Expandable Table

Expand collapsed tables with a simple button

npm create webcore@latest add ExpandableTable

Use the ExpandableTable component to manage large sets of tabular data in a small space with a collapsed state. The ExpandableTable component can be toggled on and off using a button at the end of the table:

---
const data = [
    ['#1', 'John Doe'],
    ['#2', 'Jane Smith'],
    ['#3', 'Bob Johnson'],
    ['#4', 'Emily Davis'],
    ['#5', 'William Brown'],
    ['#6', 'Frank Miller']
]
---

<ExpandableTable
    data={data}
/>

The component builds on top of the Table component, meaning you can use all available Table component props with this component. The only prop it expects is a data prop that should describe the columns as an array of strings. You are free to use HTML tags within the cells to format them.

The following example shows a striped table with headings and hover effect using the props inherited from the Table component:

---
const data = [ ... ]
const headings = ['ID', 'Name']
---

<ExpandableTable
    data={data}
    headings={headings}
    striped="row"
    offsetStripe={true}
    hover={true}
/>

Set Visible Rows

By default, the number of visible rows is set to 5. This can be customized using the numberOfVisibleRows prop. If there are less entries than the number of visible rows, the button will not be displayed.

<ExpandableTable
    data={data}
    numberOfVisibleRows={3}
/>

Customizing Buttons

You can also customize buttons through the expandButton prop. This prop expects an object in the form of a Button component props:

<ExpandableTable
    data={data}
    expandButton={{ theme: 'success' }}
/>

API

type ExpandableTableProps = {
    numberOfVisibleRows?: number
    expandButtonLabel?: string
    collapseButtonLabel?: string
    expandButton?: ButtonProps
} & Omit<TableProps, 'footer'>