Demo
Warianty komponentu tabeli
6 form: domyślna, compact, striped, selectable, sortable, cards, expandable
1. DataTable — domyślna
| Imię i nazwisko | Rola | Wydano PLN | |
|---|---|---|---|
| Anna Kowalska | anna@example.com | Admin | 12 840 |
| Marek Nowak | marek@example.com | Manager | 4 280 |
| Joanna Wiśniewska | joanna@example.com | User | 890 |
| Tomasz Lewandowski | tomasz@example.com | User | 2 140 |
| Ewa Zielińska | ewa@example.com | Manager | 7 320 |
2. DataTableCompact — gęsta, dla dużych zbiorów
| Imię i nazwisko | Rola | Wydano PLN | PLN | |
|---|---|---|---|---|
| Anna Kowalska | anna@example.com | Admin | 12 840 | 12 840 |
| Marek Nowak | marek@example.com | Manager | 4 280 | 4 280 |
| Joanna Wiśniewska | joanna@example.com | User | 890 | 890 |
| Tomasz Lewandowski | tomasz@example.com | User | 2 140 | 2 140 |
| Ewa Zielińska | ewa@example.com | Manager | 7 320 | 7 320 |
3. DataTableStriped — naprzemienne tło wierszy + akcent kolumn
| Imię i nazwisko | Rola | Wydano PLN | |
|---|---|---|---|
| Anna Kowalska | anna@example.com | Admin | 12 840 |
| Marek Nowak | marek@example.com | Manager | 4 280 |
| Joanna Wiśniewska | joanna@example.com | User | 890 |
| Tomasz Lewandowski | tomasz@example.com | User | 2 140 |
| Ewa Zielińska | ewa@example.com | Manager | 7 320 |
4. DataTableSelectable — zaznaczanie wierszy + bulk actions
| Imię i nazwisko | Rola | Wydano PLN | ||
|---|---|---|---|---|
| Anna Kowalska | anna@example.com | Admin | 12 840 | |
| Marek Nowak | marek@example.com | Manager | 4 280 | |
| Joanna Wiśniewska | joanna@example.com | User | 890 | |
| Tomasz Lewandowski | tomasz@example.com | User | 2 140 | |
| Ewa Zielińska | ewa@example.com | Manager | 7 320 |
5. DataTableSortable — sortowanie po kolumnach (klik w nagłówek)
| Imię i nazwisko | Rola | Wydano PLN | |
|---|---|---|---|
| Anna Kowalska | anna@example.com | Admin | 12 840 |
| Marek Nowak | marek@example.com | Manager | 4 280 |
| Joanna Wiśniewska | joanna@example.com | User | 890 |
| Tomasz Lewandowski | tomasz@example.com | User | 2 140 |
| Ewa Zielińska | ewa@example.com | Manager | 7 320 |
6. DataTableCards — wiersze jako karty (responsywne)
Imię i nazwisko
Anna Kowalska
anna@example.com
Rola
Admin
Wydano PLN
12 840
Imię i nazwisko
Marek Nowak
marek@example.com
Rola
Manager
Wydano PLN
4 280
Imię i nazwisko
Joanna Wiśniewska
joanna@example.com
Rola
User
Wydano PLN
890
Imię i nazwisko
Tomasz Lewandowski
tomasz@example.com
Rola
User
Wydano PLN
2 140
Imię i nazwisko
Ewa Zielińska
ewa@example.com
Rola
Manager
Wydano PLN
7 320
7. DataTableExpandable — rozwijane szczegóły wiersza
| Imię i nazwisko | Rola | Wydano PLN | ||
|---|---|---|---|---|
| Anna Kowalska | anna@example.com | Admin | 12 840 | |
| Marek Nowak | marek@example.com | Manager | 4 280 | |
| Joanna Wiśniewska | joanna@example.com | User | 890 | |
| Tomasz Lewandowski | tomasz@example.com | User | 2 140 | |
| Ewa Zielińska | ewa@example.com | Manager | 7 320 |