Tabelele afișează seturi de date. Acestea pot fi complet personalizate.

table

Tabelele afișează informații într-un mod ușor de scanat, astfel încât utilizatorii să poată căuta modele și informații. Ele pot fi încorporate în conținutul principal, cum ar fi cardurile.

Tabelele pot include:

  • O vizualizare corespunzătoare
  • Navigare
  • Instrumente pentru interogarea și manipularea datelor

La includerea instrumentelor, acestea trebuie plasate direct deasupra sau sub masă.

Tabel de bază

Un exemplu simplu, fără bibelouri.

Desert (100g portie) Calorii Grăsime (g) Glucide (g) Proteine ​​(g)Iaurt inghetatÎnghețată de tip sandwichEclerBrioseTurtă dulce
1596244
2379374.3
26216246
3053.7674.3
35616493.9

Tabel de date

Componenta DataGrid este concepută pentru cazuri de utilizare care se concentrează asupra manipulării unei cantități mari de date tabulare. Deși vine cu o structură mai rigidă, în schimb, obțineți caracteristici mai puternice.

Masă densă

Un exemplu simplu de masă densă, fără bibelouri.

Desert (porție de 100 g) Calorii Grăsime (g) Glucide (g) Proteine ​​(g)Iaurt inghetatÎnghețată de tip sandwichEclerBrioseTurtă dulce
1596244
2379374.3
26216246
3053.7674.3
35616493.9

Sortare și selectare

Acest exemplu demonstrează utilizarea casetei de selectare și a rândurilor care pot fi făcute clic pentru selectare, cu o bară de instrumente personalizată. Utilizează componenta TableSortLabel pentru a ajuta la stilizarea titlurilor de coloană.

Tabelul a primit o lățime fixă ​​pentru a demonstra derularea orizontală. Pentru a preveni derularea controalelor de paginare, componenta TablePagination este utilizată în afara tabelului. (Exemplul „Acțiune personalizată de paginare a tabelelor” de mai jos prezintă paginarea din TableFooter.)

Mese personalizate

Iată un exemplu de personalizare a componentei. Puteți afla mai multe despre acest lucru în pagina de documentare pentru suprascrieri.

Desert (100g portie) Calorii Grăsime (g) Glucide (g) Proteine ​​(g)Iaurt inghetatÎnghețată de tip sandwichEclerBrioseTurtă dulce
1596244
2379374.3
26216246
3053.7674.3
35616493.9

Opțiuni de paginare personalizate

Este posibil să personalizați opțiunile afișate în selecția „Rânduri pe pagină” folosind propoziția rowsPerPageOptions. Ar trebui fie să furnizați o serie de:

numere, fiecare număr va fi utilizat pentru eticheta și valoarea opțiunii.

obiecte, tastele valoare și etichetă vor fi utilizate respectiv pentru valoarea și eticheta opțiunii (utilă pentru șirurile de limbă, cum ar fi „Toate”).

Acțiuni de paginare personalizate

Propoziția ActionsComponent a componentei TablePagination permite implementarea acțiunilor personalizate.