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,
    },
  ]}
/>