Rb-table NPM | npm.io

rb-table

Declarative React table component with highly customizable scroll and layout feature. demo

Festures

Declarative react table component.
Advanced table layout with width / minWidth / maxWidth support.
Fixed header and columns support.
Seamingless scroll behaviour on fixed header/columns mode.
Customized scrollbar style.
Less and Sass with variables defined.

Getting started

For npm:

npm install --save rb-table

Add the default stylesheet, you can choose css/sass/less version by just change the suffix.

import 'rb-table/dist/rb-table.css';

For cdn version

<script src="https://unpkg.com/rb-table@1/dist/rb-table.bundle.min.js" crossorigin></script>

Put <RBTable/> in your page with props and you are good to go.

<RBTable 
	columns={[
		{ header: () => 'header 1', cell: i => i },
		{ header: 'header 2', cell: i => i },
		{ header: <span>header 3</span>, cell: i => i }
	]}
    data={[1,2,3]}
/>

Api

RBTable Props

Property	Description	Type	Default
columns	Columns of table	Array<ColumnProps>	-
data	Data to be displayed	Array <any>	-
onRowClick	Event callback on row click, if provided an extra class 'rb-table-row--clickable' will append to each body row	function	-
prefixCls	Classname prefix, if specified must use with less/sass style and override variable `@prefix-rb-table` with the same value	string	'rb-table'

ColumnProps

Property	Description	Type
header	Render column header	string \| number \| element \| function(data, column)
cell	Render column cell	string \| number \| element \| function(rowData, data, column)
width	Specify column width in `px`, if not specify the width will be auto calculate to fit content in one row, when the total width of table is exceed a horizontal scrollbar will be show	number
minWidth	Specify column minimum width in `px` only when width is not set	number
maxWidth	Specify column maximum width in `px` only when width is not set	number
fixed	Specify column to be fixed on left or right, if not specified will scroll when it is neccessary	'left' \| 'right'
cellClassName	Additional cell class	string
cellStyle	Additional cell style	object
headerClassName	Additional header class	string
headerStyle	Additional header style	object

Layout Design

The column layout strategy of rb-table simply try to make content in one line as much as possible. If columns total width exceeds container width, it display a horizontal scrollbar.

The height layout strategy depends on if .rb-table has a specified height, if it does a vertical scrollbar will display when table total height is exceeded. otherwise it just takes as height as it should be just like normal table. You can specify height using css style or to make it into a column flexbox and set "flex: 1 0 0".

Comparison with existing Library

Compare with react-virtualize and fixed-data-table-2

rb-table pros: you can use Crtl + F to search and auto scroll to matched content.
react-virtualize & fixed-data-table-2 pros: Handles large amount of data. fixed-data-table-2 is feature rich but the scrolling experience is not so good.

Compare with antd rc-table

rb-table pros: You are able to scroll the table anywhere, even on top of fixed columns/header. Better performance.
rc-table pros: Much more features provided, bundle with antd is a big plus.

Unique of rb-table A special designed table layout are provided which makes table layout so much easier in a lot scenes.

Customize Theme

rb-table provide the less/scss style file with predefined theme variables, so you can easily customize the look by modifying these variable as well as override the default style. if you are useing wepack, bellow is an example as well as a complete list of variables:

// my-rb-table.less
@import "~rb-table"
@prefix-rb-table: rb-table;
@rb-table-cell-border-color: #e8e8e8;
@rb-table-scroll-bar-color: #bfbfbf;
@rb-table-scroll-bar-color-hover: darken(@rb-table-scroll-bar-color, 25%);
@rb-table-scroll-bar-background: #f9f9f9;
@rb-table-scroll-bar-width: 12px;
@rb-table-scroll-bar-padding: 2px;
@prefix-rb-table-padding: (@rb-table-scroll-bar-width + 5px);
@rb-table-background: #FFF;
@rb-table-color: #333;
@rb-table-row-hover-background: lighten(@rb-table-scroll-bar-color, 55%);