The Table component provides a flexible way to display tabular data with support for dividers, rounded borders, and striped rows.
Installation
npm install @naturacosmeticos/natds-web
import {
Table,
TableContainer,
TableHead,
TableBody,
TableRow,
TableCell
} from '@naturacosmeticos/natds-web';
function DataTable() {
return (
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Email</TableCell>
<TableCell>Role</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>John Doe</TableCell>
<TableCell>[email protected]</TableCell>
<TableCell>Developer</TableCell>
</TableRow>
<TableRow>
<TableCell>Jane Smith</TableCell>
<TableCell>[email protected]</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
);
}
Table Variants
With Dividers
Render table with visible borders between cells:
<Table dividers={true}>
{/* table content */}
</Table>
Rounded Borders
Apply rounded corners to the table:
<Table rounded={true} dividers={false}>
{/* table content */}
</Table>
Striped Rows
Alternate row background colors for better readability:
<Table striped={true}>
{/* table content */}
</Table>
Composition Pattern
The Table component is designed to work with several subcomponents:
<TableContainer>
<Table dividers striped rounded>
<TableHead>
<TableRow>
<TableCell>Header 1</TableCell>
<TableCell>Header 2</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Data 1</TableCell>
<TableCell>Data 2</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
Table with Selection
import { Table, TableHead, TableBody, TableRow, TableCell, Checkbox } from '@naturacosmeticos/natds-web';
function SelectableTable() {
const [selected, setSelected] = React.useState([]);
const handleSelect = (id) => {
setSelected(prev =>
prev.includes(id)
? prev.filter(item => item !== id)
: [...prev, id]
);
};
const handleSelectAll = (event) => {
if (event.target.checked) {
setSelected(data.map(row => row.id));
} else {
setSelected([]);
}
};
return (
<Table>
<TableHead>
<TableRow>
<TableCell>
<Checkbox
checked={selected.length === data.length}
indeterminate={selected.length > 0 && selected.length < data.length}
onChange={handleSelectAll}
/>
</TableCell>
<TableCell>Name</TableCell>
<TableCell>Status</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<TableRow
key={row.id}
selected={selected.includes(row.id)}
onClick={() => handleSelect(row.id)}
>
<TableCell>
<Checkbox checked={selected.includes(row.id)} />
</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>{row.status}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}
If true, the table will be rendered with dividers between cells.
If true, the table will be rendered with rounded borders.
If true, the table will be rendered with alternating row colors.
TableCell
align
'left' | 'center' | 'right' | 'inherit'
Set the text alignment for the cell content.
TableRow
If true, the row will be styled as selected.
Callback fired when the row is clicked.
Subcomponents
- TableContainer: Wrapper component providing scrolling behavior
- TableHead: Groups header rows
- TableBody: Groups body rows
- TableFooter: Groups footer rows
- TableRow: Represents a single row
- TableCell: Represents a single cell
- TablePagination: Adds pagination controls
- TableSortLabel: Adds sorting functionality to headers
Best Practices
- Always wrap Table in a TableContainer for proper scrolling behavior
- Use TableHead to clearly separate headers from body content
- Keep cell content concise for better readability
- Use striped rows for tables with many rows
- Consider adding dividers for complex tables with many columns
Accessibility
- Table automatically uses semantic HTML table elements
- Ensure header cells are properly marked in TableHead
- Provide meaningful labels for interactive elements
- Use proper color contrast for striped rows
Related Components
