title: "Table" slug: "/packages/table" category: "layout" componentNames:
- "Table"
Table
Use Tables to list data in an accessible, searchable, and filterable format.
import Table from "@ds-kit/table"
Basic Table
<Table
title="Basic Table"
subtitle="Basic table subtitle"
pageSize={10}
chartFooter={{
sourceText: "Table footer",
}}
data={new Array(25).fill().map((d, i) => ({
row1: i,
row2: `Element #${i}`,
row3: i % 2 === 0 ? "usa" : "swe",
}))}
columns={[
{ Header: "Row 1", accessor: "row1" },
{ Header: "Row 2", accessor: "row2" },
{
Header: "Row 3",
accessor: "row3",
Cell: props => <Flag name={props.value} />,
},
]}
/>
Editable Table
class EditableExample extends React.Component {
constructor(props) {
super(props)
this.state = {
data: new Array(25).fill().map((d, i) => ({
row1: `${i}`,
row2: `Element #${i}`,
})),
}
}
render() {
return (
<Table
title="Editable Table"
isEditable={true}
pageSize={6}
chartFooter={{
sourceText: "Table footer",
}}
updateData={newData => {
// Handle new data here
console.log("Data has been updated\n", newData)
}}
data={this.state.data}
columns={[
{ Header: "Row 1", accessor: "row1" },
{ Header: "Row 2", accessor: "row2" },
]}
/>
)
}
}
<Table
title="Table"
subtitle="Table with download, disable sorting for column, enable filter, multi-sorting(press sort + 'shift' key)"
enableDownload={true}
pageSize={6}
chartFooter={{
sourceText: "Table footer",
}}
data={[
{
row1: -6,
row2:
"Long text word to be wrapped with Long text word to be wrapped with Long text word to be wrapped with",
},
{ row1: 2, row2: "Long text word to be wrapped with" },
{ row1: -9, row2: "Long text word to be wrapped with" },
{ row1: 44, row2: "Long text word to be wrapped with" },
{ row1: 98, row2: "Long text word to be wrapped with" },
{ row1: 13, row2: "Long text word to be wrapped with" },
{ row1: 13, row2: "Long text word to be wrapped with" },
{ row1: -13, row2: "Long text word to be wrapped with" },
]}
columns={[
{
Header: "Row 1",
accessor: "row1",
enableFilter: true,
disableSorting: true,
},
{
Header: "Row 2",
accessor: "row2",
enableFilter: true,
},
]}
/>