12.9.1
Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. Good data tables allows the user to scan, analyze, compare, filter, and sort information to derive insights and commit actions.
Table shift and alignment attributes can work in conjunction with each other, as well as be applied to the table header (not just the table body).
Use table size "sm" when data density is a priority. Smaller row height enables the user to view more data without the need for scrolling.
Table can leverage the max-width property. Learn more in our visual guidelines.
import React from 'react' import Table from '../_table' const TableSm = (props) => { return ( <Table size="sm" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> </tbody> </Table> ) } export default TableSm
Use table size "md" to add padding around each row to increase reading comfortability.
import React from 'react' import Table from '../_table' const TableMd = (props) => { return ( <Table size="md" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> </tbody> </Table> ) } export default TableMd
Use table size "lg" to add padding around each row to maximize reading comfortability.
import React from 'react' import Table from '../_table' const TableLg = (props) => { return ( <Table size="lg" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> </tbody> </Table> ) } export default TableLg
React: Use sticky on a table to allow the table header to be fixed in place when the user scrolls up and down on the page.
Rails: Pass sticky: true to props.
If the table header is not sticking in the right place you will need to pass a inline top style to the thead.
React Example: <thead style={{ top: "-16px" }}>
Rails Example: <thead style="top: -16px">
Sticky may not work if any parent/ancestor of the sticky element has any of the overflow properties set. Additionally, specifying a height on the overflowing container provides measurement for this feature to work properly. In some cases, it may be necessary to set the same parent/ancestor container to position: static as well.
import React from "react" import Table from "../_table" const TableSticky = (props) => ( <Table sticky {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> </tbody> </Table> ) export default TableSticky
This is to be used to shift the whole row.
The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.
import React from 'react' import Table from '../_table' const TableAlignmentRow = (props) => { return ( <Table {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr align="center"> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr align="right"> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> </tbody> </Table> ) } export default TableAlignmentRow
You can individually align a pieace of table data, but a more practical use would be applied to align a column.
In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.
import React from 'react' import Table from '../_table' const TableAlignmentColumn = (props) => { return ( <Table {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th align="center">{'Rating'}</th> <th align="right">{'Money'}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td align="center">{'3'}</td> <td align="right">{'$57.32'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td align="center">{'2'}</td> <td align="right">{'$5,657.08'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td align="center">{'4'}</td> <td align="right">{'$358.77'}</td> </tr> </tbody> </Table> ) } export default TableAlignmentColumn
import React from 'react' import Table from '../_table' const TableAlignmentShiftRow = (props) => { return ( <Table {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td> {'Value 1a'} <br /> {'Value 1a'} <br /> {'Value 1a'} </td> <td>{'Value 2a'}</td> <td>{'Value 3a'}</td> <td>{'Value 4a'}</td> <td>{'Value 5a'}</td> </tr> <tr shift="middle"> <td> {'Value 1b'} <br /> {'Value 1b'} <br /> {'Value 1b'} </td> <td>{'Value 2b'}</td> <td>{'Value 3b'}</td> <td>{'Value 4b'}</td> <td>{'Value 5b'}</td> </tr> <tr shift="down"> <td> {'Value 1c'} <br /> {'Value 1c'} <br /> {'Value 1c'} </td> <td>{'Value 2c'}</td> <td>{'Value 3c'}</td> <td>{'Value 4c'}</td> <td>{'Value 5c'}</td> </tr> </tbody> </Table> ) } export default TableAlignmentShiftRow
You can individually shift a pieace of table data, or shift an entire column.
The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.
import React from 'react' import Table from '../_table' const TableAlignmentShiftData = (props) => { return ( <div> <Table marginBottom="md" {...props} > <thead> <tr> <th> </th> <th>{'Price'}</th> </tr> </thead> <tbody> <tr> <td shift="down">{'Total'}</td> <td> {'$12'} <br /> {'$46'} <br /> {'$25'} <br /> {'-------'} <br /> {'$83'} </td> </tr> </tbody> </Table> <Table {...props} > <thead> <tr> <th>{'Espresso Drinks'}</th> <th>{'Ingredients'}</th> </tr> </thead> <tbody> <tr> <td shift="up">{'Cappuccino'}</td> <td> {'Espresso'} <br /> {'Steamed Milk'} <br /> {'Milk Foam'} </td> </tr> <tr> <td shift="up">{'Macchiato'}</td> <td> {'Espresso'} <br /> {'Steamed Milk'} </td> </tr> <tr> <td shift="up">{'Mocha'}</td> <td> {'Espresso'} <br /> {'Hot Chocolate'} <br /> {'Steamed Milk'} </td> </tr> </tbody> </Table> </div> ) } export default TableAlignmentShiftData
Side highlight can take product, status, and category colors. To view full list of colors, visit token colors.
Note: Only use category colors for categories. Do not mix it with product or status colors.
import React from 'react' import Table from '../_table' import TableRow from '../_table_row' const TableSideHighlight = (props) => { return ( <div> <Table size="sm" {...props} > <thead> <tr> <th>{'Product colors'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <TableRow sideHighlightColor="solar" {...props} > <td>{'Solar'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </TableRow> <TableRow sideHighlightColor="roofing" {...props} > <td>{'Roofing'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </TableRow> <TableRow sideHighlightColor="gutters" {...props} > <td>{'Gutters'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </TableRow> <TableRow sideHighlightColor="none" {...props} > <td>{'None'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </TableRow> </tbody> </Table> <br /> <Table size="sm" {...props} > <thead> <tr> <th>{'Status colors'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <TableRow sideHighlightColor="success" {...props} > <td>{'Success'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </TableRow> <TableRow sideHighlightColor="warning" {...props} > <td>{'Warning'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </TableRow> <TableRow sideHighlightColor="error" {...props} > <td>{'Error'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </TableRow> <TableRow sideHighlightColor="none" {...props} > <td>{'None'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </TableRow> </tbody> </Table> <br /> <Table size="sm" {...props} > <thead> <tr> <th>{'Category Colors'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <TableRow sideHighlightColor="category_1" {...props} > <td>{'Category Color 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </TableRow> <TableRow sideHighlightColor="category_2" {...props} > <td>{'Category Color 2'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </TableRow> <TableRow sideHighlightColor="category_3" {...props} > <td>{'Category Color 3'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </TableRow> <TableRow sideHighlightColor="none" {...props} > <td>{'None'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </TableRow> </tbody> </Table> </div> ) } export default TableSideHighlight
import React from 'react' import Table from '../_table' const TableContainer = (props) => { return ( <Table container={false} size="md" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> </tbody> </Table> ) } export default TableContainer
import React from 'react' import Table from '../_table' const TableDisableHover = (props) => { return ( <Table disableHover size="md" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> </tbody> </Table> ) } export default TableDisableHover
import React from 'react' import Table from '../_table' const TableMultiline = (props) => { return ( <Table size="sm" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td> {'Value 1'} <br /> {'Value 1'} <br /> {'Value 1'} </td> <td>{'Value 2'}</td> <td> {'Value 3'} <br /> {'Value 3'} </td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td> {'Value 1'} <br /> {'Value 1'} <br /> {'Value 1'} </td> <td>{'Value 2'}</td> <td> {'Value 3'} <br /> {'Value 3'} </td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td> {'Value 1'} <br /> {'Value 1'} <br /> {'Value 1'} </td> <td>{'Value 2'}</td> <td> {'Value 3'} <br /> {'Value 3'} </td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> </tbody> </Table> ) } export default TableMultiline
import React from 'react' import Table from '../_table' const TableSingleLine = (props) => { return ( <Table singleLine size="sm" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td> {'Value 1'} <br /> {'Value 1'} <br /> {'Value 1'} </td> <td>{'Value 2'}</td> <td> {'Value 3'} <br /> {'Value 3'} </td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td> {'Value 1'} <br /> {'Value 1'} <br /> {'Value 1'} </td> <td>{'Value 2'}</td> <td> {'Value 3'} <br /> {'Value 3'} </td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td> {'Value 1'} <br /> {'Value 1'} <br /> {'Value 1'} </td> <td>{'Value 2'}</td> <td> {'Value 3'} <br /> {'Value 3'} </td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> </tbody> </Table> ) } export default TableSingleLine
import React from 'react' import Table from '../_table' const TableDataTable = (props) => { return ( <Table dataTable {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> </tbody> </Table> ) } export default TableDataTable
import React from 'react' import Table from '../_table' import Title from '../../pb_title/_title' const TableResponsiveTable = (props) => { return ( <div> <Title size={4} text="Not Responsive" {...props} /> <Table responsive="none" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> </tbody> </Table> <br /> <br /> <Title size={4} text="Collapse Mobile" {...props} /> <Table collapse="sm" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> </tbody> </Table> <br /> <br /> <Title size={4} text="Collapse Tablet" {...props} /> <Table collapse="md" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> </tbody> </Table> <br /> <br /> <Title size={4} text="Collapse Desktop" {...props} /> <Table collapse="lg" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> </tbody> </Table> </div> ) } export default TableResponsiveTable
If there is one button on each row of the table, ideally, it should use the secondary variant and be placed at the end of the row
import React from 'react' import Table from '../_table' import Button from '../../pb_button/_button' const TableOneAction = (props) => { return ( <Table size="sm" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{''}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td align="right"> {' '} <Button onClick={() => alert('button clicked!')} text="Action" variant="secondary" {...props} /> {' '} </td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td align="right"> {' '} <Button onClick={() => alert('button clicked!')} text="Action" variant="secondary" {...props} /> {' '} </td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td align="right"> {' '} <Button onClick={() => alert('button clicked!')} text="Action" variant="secondary" {...props} /> {' '} </td> </tr> </tbody> </Table> ) } export default TableOneAction
If there are two actions on each of the row, one should ideally one should use the secondary variant and the other use the link variant. The button using the secondary variant should be placed at the end.
import React from 'react' import Table from '../_table' import Button from '../../pb_button/_button' const TableOneAction = (props) => { return ( <Table size="sm" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{''}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td align="right"> <Button onClick={() => alert('button clicked!')} paddingLeft="none" text="Tetriary Action" variant="link" {...props} /> <Button onClick={() => alert('button clicked!')} text="Secondary Action" variant="secondary" {...props} /> </td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td align="right"> <Button onClick={() => alert('button clicked!')} paddingLeft="none" text="Tetriary Action" variant="link" {...props} /> <Button onClick={() => alert('button clicked!')} text="Secondary Action" variant="secondary" {...props} /> </td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td align="right"> <Button onClick={() => alert('button clicked!')} paddingLeft="none" text="Tetriary Action" variant="link" {...props} /> <Button onClick={() => alert('button clicked!')} text="Secondary Action" variant="secondary" {...props} /> </td> </tr> </tbody> </Table> ) } export default TableOneAction
If there are more than two actions on each row, then they should be contained in secondary circle icon button with the ellipsis-h icon (horizontal ellipsis) at the end of the row
import React from 'react' import Table from '../_table' import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button' const TableTwoPlusActions = (props) => { return ( <Table size="sm" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{''}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td align="right"> {' '} <CircleIconButton icon="ellipsis-h" variant="secondary" {...props} /> </td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td align="right"> {' '} <CircleIconButton icon="ellipsis-h" variant="secondary" {...props} /> </td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td align="right"> {' '} <CircleIconButton icon="ellipsis-h" variant="secondary" {...props} /> </td> </tr> </tbody> </Table> ) } export default TableTwoPlusActions
If the button is towards the middle of the table, it should likely use button variant link
import React from 'react' import Table from '../_table' import Button from '../../pb_button/_button' const TableActionMiddle = (props) => { return ( <Table size="sm" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{'Column 5'}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td> {' '} <Button onClick={() => alert('button clicked!')} paddingLeft="none" text="Action" variant="link" {...props} /> </td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td> {' '} <Button onClick={() => alert('button clicked!')} paddingLeft="none" text="Action" variant="link" {...props} /> </td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td> {' '} <Button onClick={() => alert('button clicked!')} paddingLeft="none" text="Action" variant="link" {...props} /> </td> <td>{'Value 4'}</td> <td>{'Value 5'}</td> </tr> </tbody> </Table> ) } export default TableActionMiddle
Icon buttons are great to use if space is limited. If the icon isn’t VERY self explanatory (for example pencil/pen for edit, trashcan for delete) then it should use a tooltip explaining what the action does. The tooltip shouldn’t be longer than a few words and essentially serves as a replacement for what the button would say if it weren’t an icon
import React from 'react' import Table from '../_table' import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button' import Flex from '../../pb_flex/_flex' import FlexItem from '../../pb_flex/_flex_item' const TableIconButtons = (props) => { return ( <Table size="sm" {...props} > <thead> <tr> <th>{'Column 1'}</th> <th>{'Column 2'}</th> <th>{'Column 3'}</th> <th>{'Column 4'}</th> <th>{''}</th> </tr> </thead> <tbody> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td align="right"> <Flex justifyContent="end" orientation="row" > <FlexItem> <CircleIconButton icon="trash-alt" variant="link" {...props} /> </FlexItem> <FlexItem> <CircleIconButton icon="pencil" variant="secondary" {...props} /> </FlexItem> </Flex> </td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value 4'}</td> <td align="right"> <Flex justifyContent="end" orientation="row" > <FlexItem> <CircleIconButton icon="trash-alt" variant="link" {...props} /> </FlexItem> <FlexItem> <CircleIconButton icon="pencil" variant="secondary" {...props} /> </FlexItem> </Flex> </td> </tr> <tr> <td>{'Value 1'}</td> <td>{'Value 2'}</td> <td>{'Value 3'}</td> <td>{'Value lk'}</td> <td align="right"> <Flex justifyContent="end" orientation="row" > <FlexItem> <CircleIconButton icon="trash-alt" variant="link" {...props} /> </FlexItem> <FlexItem> <CircleIconButton icon="pencil" variant="secondary" {...props} /> </FlexItem> </Flex> </td> </tr> </tbody> </Table> ) } export default TableIconButtons