react-expandable-table

react-expandable-table

Installation

The package can be installed via npm by running: npm install, or npm i for brevity.

Usage

import Table from 'react-expandable-table';

...

<Table columns={[{ key: 'red' }, { key: 'blue' }]} dataSource={[{ red: true, blue: false }, { red: false, blue: true }]} />

API

Props

Name	Type	Default	Required	Description
columns	arrayOf(shape)	[]	false	See column props below
dataSource	arrayOf(object)	[]	false	An array of objects, each containing key-value pairs, where the keys correspond to column keys
emptyText	string	'No Data'	false	Text to be displayed when dataSource is empty or undefined
expandButtonRender	func		false	Optional custom render to be used for the row expand button. Make sure your custom node calls the provided onClick function. Optionally, you can also use the provided isExpanded boolean if you'd like to conditionally render based on the current row's isExpanded state Function({ onClick, isExpanded }):ReactNode|[ReactNode]
expandCellWidth	number	50	false	The [fixed] width (in pixels) of the expand row button cell.
isBordered	bool	false	false	If true, the table will be styled with borders.
onRowClick	func		false	Function to be invoked when a row is clicked. Function(rowData, rowIndex):void
onRowExpand	func		false	Function to be invoked when a row expand icon is clicked The expand icon will be included by default if you provide an onRowExpand function. Function(rowData, rowIndex):ReactNode|[ReactNode]

Column Props

Name	Type	Default	Required	Description
key	string	true	false	Unique identifier used to identify this column.
dataTooltip	func		false	Function to generate a custom tooltip string for the specific data cell. If not provided, the tooltip will default to `cellData` if it can be parsed into a string. `Function(cellData, rowData):string`
render	func		false	Optional custom render to be used for the column data cell. `Function(cellData, rowData, rowIndex):ReactNode|[ReactNode]`
title	node		false	Optional custom node to be used for the column title.
titleTooltip	string		false	Optional tooltip for the column's title (th), defaults to `column.title` (if string parsable)
width	number		false	Optional number to be used to represent what percentage of the total width this column should span. Similar to the css `flex-grow` property.

Development

First, install necessary dependencies: npm i

Then start up the styleguide server on localhost:6060: npm start

You can edit or add to the styleguide examples in Table.md.

To run the test suite: npm run test or npm run test:watch