rb-table

High performance table with fixed columns and header support

Usage no npm install needed!

<script type="module">
  import rbTable from 'https://cdn.skypack.dev/rb-table';
</script>

README

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%);

Browser Support

Chrome Firefox IE Safari
Latest Latest 11+ Latest

Contributions

Use GitHub issues for requests.

Pull requests are most welcome;

Changelog

Changes are tracked as GitHub releases.

License

rb-table is MIT-licensed.