layouts

Table

Makes tabular data readable and interactive

Features

Highly customizable
Support sorting, expand, row selection and many other interactions
Pagination and loading state out of the box
Themes ready

Links

Open in playground Open in Storybook View source Reference library

Sample Title

Order	First column	Second column	Value
1	Some data to print	Another key data	123
2	Some data to print 2	Another key data 2	1234
3	Some data to print 3	Another key data 3	5324
4	Some data to print 4	Another key data 4	124
5	Some data to print	Another key data	123

Items per page:

Anatomy

import { Table } from "@wonderflow/react-components";

export default () => {
  return <Table columns={columns} data={data} />;
};

tsx

Custom expand

If you want to use a custom expand component to bypass the default behaviour, you can do so by passing a custom expand function to the table.

Order	First column	Second column	Value
1	Some data to print	Another key data	123
2	Some data to print 2	Another key data 2	1234
3	Some data to print 3	Another key data 3	5324
4	Some data to print 4	Another key data 4	124

import { Table } from "@wonderflow/react-components";

export default () => {
  return <Table
    columns={columns}
    data={data}
    expandableRowComponent={(subRow) => (
      <div>
        {JSON.stringify(subRow, null, 2)}
      </div>
    )}
  />;
};

tsx

Row actions

If needed each row can show related actions or any custom element.

Order	First column	Second column	Value
2	Some data to print 2	Another key data 2	1234
3	Some data to print 3	Another key data 3	5324
4	Some data to print 4	Another key data 4	124
5	Some data to print	Another key data	123
6	Some data to print 2	Another key data 2	1234
7	Some data to print 3	Another key data 3	5324
8	Some data to print 4	Another key data 4	124
9	Some data to print 3	Another key data 3	5324

const columns = [
  {
    id: 'actions',
    disableSortBy: true,
    isToggable: true,
    isCollapsed: true,
    accessor: row => <div>actions</div>
  },
  /* ...other columns */
]

tsx

API Reference

This component extends react-table library, which exposes different props that enables multiple functionalities, including (but not limited to) sorting, pagination, and expanded rows.

Original API reference

Custom extended API

PROPERTY

TYPE

DEFAULT

columns*

array

data*

array

[]

defaultHiddenColumns

Array<IdType<T>>

selectSubRows

boolean

true

showPagination

boolean

itemsPerPage

number

10

initialPageIndex

number

0

onPaginationChange

function

totalRows

number

pageClusters

Arrray<number>

[5, 10, 20, 30, 50, 100]

selectableRows

boolean

isManualSorted

boolean

onSortChange

function

stripes

boolean

loading

boolean

showSeparators

boolean

true

title

string|Title

showHeader

boolean

false

showTableHead

boolean

true

columnsControl

boolean

false

actions

ReactNode

selectedRowIds

Array<IdType<T>>

[]

onSelectedRowsChange

function

selectedLabel

function

`Selected items: ${selectedRowIds.length}`

selectedActions

function

height

string

background

string

expandableRowComponent

ReactNode|function

emptyComponent

ReactNode

initialSortBy

Array<SortingRule<T>>

onRowExpandChange

function