No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Table
Use the Table component for tabular data. Add the hasAction prop to automatically align the last column to the right.
() => {
    return (
        <Table responsive="cards" hasActions>
            <TableHeader>
                <TableHeaderCell>ID</TableHeaderCell>
                <TableHeaderCell>Name</TableHeaderCell>
                <TableHeaderCell>Action</TableHeaderCell>
            </TableHeader>
            <TableBody>
                <TableRow>
                    <TableCell label="ID">Lorem ipsum</TableCell>
                    <TableCell label="Name">Lorem ipsum</TableCell>
                    <TableCell>
                        <Button size="small">Loremium</Button>
                    </TableCell>
                </TableRow>
                <TableRow>
                    <TableCell label="ID">Lorem ipsum</TableCell>
                    <TableCell label="Name">Lorem ipsum</TableCell>
                    <TableCell>
                        <Button size="small">Loremium</Button>
                    </TableCell>
                </TableRow>
                <TableRow>
                    <TableCell label="ID">Lorem ipsum</TableCell>
                    <TableCell label="Name">Lorem ipsum</TableCell>
                    <TableCell>
                        <Button size="small">Loremium</Button>
                    </TableCell>
                </TableRow>
            </TableBody>
        </Table>
    );
}
Responsive
To optimize a table, add responsive="cards" and add a headline as label prop to each table cell. The labels are indepentent from the table header cells and can be omitted if the cell content makes sense without headline (like "Action" or "Status")
Props
No inputs found for this component. Read the docs