Components
Table
Data tables with heads, rows, cells and paging.
Table lays out rows of data. TableHead, TableBody and TableFooter group rows, TableCell holds values, TableContainer scrolls a wide table and TablePagination pages through rows.
import Table from '@hone-ui/react/Table';
import TableHead from '@hone-ui/react/TableHead';
import TableBody from '@hone-ui/react/TableBody';
import TableFooter from '@hone-ui/react/TableFooter';
import TableRow from '@hone-ui/react/TableRow';
import TableCell from '@hone-ui/react/TableCell';
import TableContainer from '@hone-ui/react/TableContainer';
import TablePagination from '@hone-ui/react/TablePagination';Examples
| Dessert | Calories |
|---|---|
| Frozen yogurt | 159 |
| Eclair | 262 |
<TableContainer component={Paper} sx={{ maxWidth: 480 }}>
<Table aria-label="Desserts" size="small">
<TableHead>
<TableRow>
<TableCell>Dessert</TableCell>
<TableCell align="right">Calories</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow hover>
<TableCell component="th" scope="row">
Frozen yogurt
</TableCell>
<TableCell align="right">159</TableCell>
</TableRow>
<TableRow hover>
<TableCell component="th" scope="row">
Eclair
</TableCell>
<TableCell align="right">262</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>Props
| Component | Props |
|---|---|
Table | size ('medium'), padding ('normal'), stickyHeader (false), component ('table') |
TableHead, TableBody, TableFooter | component |
TableRow | hover (false), selected (false), component ('tr') |
TableCell | align ('inherit'), padding, size, scope, sortDirection, variant, component |
TableContainer | component ('div') |
TablePagination | count, page (0-based), rowsPerPage, onPageChange(event, page), onRowsPerPageChange(event), rowsPerPageOptions ([10, 25, 50, 100]), labelRowsPerPage, labelDisplayedRows, getItemAriaLabel, showFirstButton, showLastButton, disabled, SelectProps, component |
Every part takes sx, className, style and ref.
Notes
- Head cells render as
thwithscope="col", andsortDirectionsetsaria-sort. - Table's
size,paddingandstickyHeaderreach every cell. - TablePagination's
ActionsComponent,slotsandslotPropsare not supported, and neither is TableSortLabel.
Accessibility
Name every table. Make the first cell of a body row a th with scope="row" when it names
the row.