v14.0.5


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

Sample Title

 OrderFirst columnSecond columnValue
1Some data to printAnother key data123
2Some data to print 2Another key data 21234
3Some data to print 3Another key data 35324
4Some data to print 4Another key data 4124
5Some data to printAnother key data123

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.

 OrderFirst columnSecond columnValue
1Some data to printAnother key data123
2Some data to print 2Another key data 21234
3Some data to print 3Another key data 35324
4Some data to print 4Another key data 4124
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.

 OrderFirst columnSecond columnValue
2Some data to print 2Another key data 21234
3Some data to print 3Another key data 35324
4Some data to print 4Another key data 4124
5Some data to printAnother key data123
6Some data to print 2Another key data 21234
7Some data to print 3Another key data 35324
8Some data to print 4Another key data 4124
9Some data to print 3Another key data 35324
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

Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2024