window-table
Windowing Table for React based on React Window
This ReactJs table library is a tiny, yet powerful implementation of a windowed/virtualized table, based off the awesome
virtualization library, react-window
by Brian Vaughn.
- Blazing Fast - thanks to
react-window
- Tiny footprint - <2kB
- Super easy to customize - Custom tags, class names and what not
- Supports HTML5 table tags
- Production Ready - Being used all over the Admin application at hipages, Australia
One big caveat of using a custom table is styling. For instance, a normal HTML based table can be easily
styled with a style system such as bootstrap, but a div
based table requires a bit more effort.
Thus, in addition to the basic window table, we export an HTML 5 tags (i.e. <table>
, <thead>
, <tr>
, <td>
, etc) based table, which is compatible with
popular style systems such as bootstrap.
In fact, the HTML 5 tag based table is nothing but the basic windowed table with custom tags. You have full control over what these tags/components should be.
Install
npm install --save window-table
Basic Usage
; ;
Note that we are wrapping the WindowTable
with a div
which has a height of 500px
.
Instead, we could have set that height in the WindowTable
itself, or even in a parent of NinjaTable
.
Or we can pass the pixel height as a prop, height
.
It is important to set the height somewhere. Unless we do this, the height of the windowed table will be set to 100% of viewport height.
In fact, this requirement is intuitive, because we obviously don't want to render all the cells.
The code examples below this, will assume that a parent container will have set the height for the table.
HTML 5 tags based table
Using custom tags
;
Custom Cells by Column
Some cells in a table most likely needs to render something other than plain text. In such cases, you can define the custom Component in the column options object.
;
Similarly you can pass a custom react component as HeaderCell
to the column options
to render a custom header cell.
Dynamic Row Heights
Sometimes you know what the row height could be, but some other times you just don't. In the latter case, you can pass in a sample cell, which will be used internally to derive a row height. As of now, sadly, all rows will have the same height.
License
MIT © pupudu