Table

Use Tables to list data in an accessible, searchable, and filterable format.

import Table from "@ds-kit/table"

Basic Table

Basic Table
Basic table subtitle
Row 1
Row 2
Row 3
Row 1
0
Row 2
Element #0
Row 3
Row 1
1
Row 2
Element #1
Row 3
Row 1
2
Row 2
Element #2
Row 3
Row 1
3
Row 2
Element #3
Row 3
Row 1
4
Row 2
Element #4
Row 3
Row 1
5
Row 2
Element #5
Row 3
Row 1
6
Row 2
Element #6
Row 3
Row 1
7
Row 2
Element #7
Row 3
Row 1
8
Row 2
Element #8
Row 3
Row 1
9
Row 2
Element #9
Row 3
/3
Table footer
datastory.org
Copy
<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

Editable Table
Row 1
Row 2
Row 1
0
Row 2
Element #0
Row 1
1
Row 2
Element #1
Row 1
2
Row 2
Element #2
Row 1
3
Row 2
Element #3
Row 1
4
Row 2
Element #4
Row 1
5
Row 2
Element #5
/5
Table footer
datastory.org
Copy
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
Table with download, disable sorting for column, enable filter, multi-sorting(press sort + 'shift' key)
Row 1
Row 2
Row 1
-6
Row 2
Long text word to be wrapped with Long text word to be wrapped with Long text word to be wrapped with
Row 1
2
Row 2
Long text word to be wrapped with
Row 1
-9
Row 2
Long text word to be wrapped with
Row 1
44
Row 2
Long text word to be wrapped with
Row 1
98
Row 2
Long text word to be wrapped with
Row 1
13
Row 2
Long text word to be wrapped with
/2
Table footer
datastory.org
Copy
<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,
    },
  ]}
/>