Preview the data table component with the React live demo. For detailed code
usage documentation, see the Storybooks for each framework below.
<DataTable rows={rowData} headers={headerData}>
{({ rows, headers, getHeaderProps, getTableProps }) => (
<TableContainer title="DataTable">
<Table {...getTableProps()}>
<TableHead>
<TableRow>
{headers.map((header) => (
<TableHeader {...getHeaderProps({ header })}>
{header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.id}>
{row.cells.map((cell) => (
<TableCell key={cell.id}>{cell.value}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
</DataTable>
const headerData = [
{
header: 'Name',
key: 'name',
},
{
header: 'Protocol',
key: 'protocol',
},
