pupudu / window-table

Windowing Table for React based on React Window

window-table

Render large amounts of data in a HTML table in React

Checkout window-table.netlify.com for getting started, API docs, examples and guides.

Check a simpler Demo and the corresponding editable code-sandbox

Support us by pressing the star button.

Introduction

This is a light-weight, powerful implementation of a virtualized table, based off react-window. Why Window Table?

• Supports HTML5 table tags
• Tiny footprint - ~10kB
• Easy to customize - Custom tags, class names and what not

Alternatives

• React Fluid Table, a drop in replacement for window-table with a ton of more features.
• React Base Table, a library which also offers a ton more features, with a slightly different API.

Looking for contributions

I, the author of this library, have been unable to provide support for the issues opened in the library in the past few months. Contributions highly appreciated.

window-table's Issues

Migrate to tsdx

Dealing with rollup and babel is hard. tsdx takes care of that for us.

Width infinitely grows when adding table-bordered css class

If I add table-bordered to this className attribute, the table starts out with the desired width defined by the parent but then grows quickly overtime (if you inspect, the width keeps increasing). Have you run into this at all? Bootstrap 3.3.7, I'll see if I can make a contrived example on Codesandbox.

<Html5Table
  className="table-condensed table-hover table-striped"
  data={data}
  height={this.props.size.height - 150}
  rowHeight={35}
  columns={this.columns}
/>

Warning: Cannot update a component (`ForwardRef`) while rendering a different component (`AutoSizer`)

I am having issues with the HTML5Table component when the data prop is updated.

Console error (Firefox):

react_devtools_backend.js:6:7472

Warning: Cannot update a component (`ForwardRef`) while rendering a different component (`AutoSizer`). To locate the bad setState() call inside `AutoSizer`, follow the stack trace as described in https://fb.me/setstate-in-render
    in AutoSizer (created by Measurer)
    in Measurer (created by ForwardRef)
    in div (created by ForwardRef)
    in ForwardRef
    in ForwardRef (created by Html5Table)
    in Html5Table (created by EditableTable)
{...snip...}
    React 5
        Measurer window-table.esm.js:438
        render window-table.esm.js:382
    React 8
        unstable_runWithPriority scheduler.development.js:653
    React 6
        componentDidUpdate EditableTableUI.js:107

Code below:

WindowTableTest.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Html5Table} from 'window-table';


/**
 *
 */
class WindowTableTest extends Component
{
	constructor( props )
	{
		super( props );

		this.state = {
			items:        this.props.items,
			tableData:    [],
			tableColumns: [],
		};
	}

	componentDidUpdate( prevProps, prevState, snapshot )
	{
		const { items } = this.props;

		if (prevProps.items !== this.props.items) {
			this.setState( {
				items:        items,
				tableColumns: this.buildTableColumns(),
				tableData:    this.buildTableData( items ),
			} );
		}
	}

	buildTableColumns()
	{
		return [
			{
				key:   'foo',
				title: 'Foo',
				width: 50
			},
			{
				key:   'bar',
				title: 'Bar',
				width: 50
			}
		];
	}

	buildTableData( items )
	{
		return items.map( item =>
		{
			return {
				foo: item.foo,
				bar: item.bar
			};
		} );
	}

	render()
	{
		const { tableData, tableColumns } = this.state;

		return (
			<Html5Table
				data={tableData}
				columns={tableColumns}
				headerClassName="thead"
			/>
		);
	}
}

WindowTableTest.propTypes = {
	items: PropTypes.array
};

export default WindowTableTest;

PageTest.js:

import React, {Component} from 'react';
import WindowTableTest from './WindowTableTest';


/**
 *
 */
class PageTest extends Component
{
	constructor( props )
	{
		super( props );

		this.state = {
			items: []
		};
	}

	componentDidMount()
	{
		// simulate an async request, such as an api call that populates items

		setTimeout( () =>
		{
			this.setState( {
				items: [
					{
						foo: 1,
						bar: 2,
					}
				]
			} );
		}, 1000 );
	}

	render()
	{
		return (
			<WindowTableTest items={this.state.items} />
		);
	}
}

export default PageTest;

Using window-table 0.12.1 and React 16.13.1.

Feature Request: How can we handle rowspan and colspan

In table we can set rowspan and colspan, how about TableWindow?

Width not adjusted until screen size is changed

Great wee library! Thank you!

I have a question/issue.

I am starting off with an empty table that gets populated. What I find is that the first time we add data, the width is the full size of the screen (there are divs to the right). When I adjust the screen size, then we correctly fit the table into the div.

Am I doing something incorrect to cause the width to be "wrong" first time or am I able to programmatically trigger a measure after I have added data?

Add 'react-virtualized-auto-sizer' as dependency

Thanks @pupudu for the component!
Don't forget to add 'react-virtualized-auto-sizer' as a dependency. It's imported, but not in the package.json.

Migrate example website to docusaurus

Currently, the example website is based on Create React App and is janky. Docusaurus seems to be a good candidate for documenting the library along with examples.

Add more guides to the docs

It would be cool if we can add more guides to the guide list in the docs. Currently, there's only the striped-rows guide. From an initial thought, here are some potential guides we can add:

• Using Custom Components
• Using Custom Components by Cells (Based on cell data)
• Fixed/explicit row height
• Row height based on sampleRowIndex and sampleData
• Change row height based on index

Extra div table header

When rendering Html5Table receive the following warning in console:

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>. in div (created by AutoSizer) in AutoSizer (created by Measurer) in Measurer (created by HeaderRowRenderer) in tr (created by HeaderRowRenderer) in thead (created by THead) in THead (created by HeaderRowRenderer) in HeaderRowRenderer (created by WindowTable) in table (created by WindowTable) in div (created by WindowTable) in div (created by WindowTable) in WindowTable in WindowTable (created by Html5Table)

<table class="table table-condensed table-hover table-striped" style="width: 566px; margin-bottom: 0px;">
   <thead class=" table-header">
      <tr class="table-header-row" style="display: flex; position: relative;">
<!-- this comes from where? -->
         <div style="overflow: visible; height: 0px; width: 0px;"></div>
         <th class="table-header-cell" column="[object Object]" style="width: 150px; display: inline-block; flex-grow: 150;">Name</th>
         <th class="table-header-cell" column="[object Object]" style="width: 50px; display: inline-block; flex-grow: 50;">Open</th>
         <th class="table-header-cell" column="[object Object]" style="width: 50px; display: inline-block; flex-grow: 50;">Late</th>
         <th class="table-header-cell" column="[object Object]" style="width: 50px; display: inline-block; flex-grow: 50;">15m/60m</th>
         <th class="table-header-cell" column="[object Object]" style="width: 50px; display: inline-block; flex-grow: 50;">Earliest</th>
         <div class="resize-triggers">
            <div class="expand-trigger">
               <div style="width: 567px; height: 33px;"></div>
            </div>
            <div class="contract-trigger"></div>
         </div>
      </tr>
   </thead>
</table>

Dynamic col widths

Hey @pupudu is there a way to use this lib with dynamic col widths or is it best to go with this approach? bvaughn/react-window#60 (comment)

Thanks

Double scrollbars with Bulma

Thank you for this awesome library, it saves a lot in performance for my app.

I have an issue when using the Html5Table component with Bulma however, and I cannot pinpoint the issue. The outer div which contains the table header and auto-sizing table appears to have an incorrect height, which has the side effect of showing a Y scrollbar (shown in Ubuntu 20.04 + Firefox 79).

In my app it appears to be the extra height of the table header row, but in this reproduced example it does not look like that is the case. When removing the Bulma styles, it works as it should.

Is there something in Bulma's CSS that is knocking the auto-sizer off course? I have tried eliminating the rules one-by-one to get the culprit to no joy.

Thank you.

Support sticky columns

details TBA

Create github templates for Pull Requests and Issues

Need to do some research around the templates used by the industry leaders and come up with something simple that would work for us

Migrate examples to use faker

I used the naruto based data for the examples on the website because why not.

However, since we are repeating the same data over and over, it becomes harder to showcase filtering and sorting. Thus, we should migrate the examples to use faker to generate fake data for us.

Expand rows

Hi! Is there a way to expand some rows on a interaction?

forwardRef warning when supplying custom row component

Hi

Great library!

I'm trying to use the library with Semantic React. Then working through your examples.

So the key bits of code are

import { Table } from 'semantic-ui-react';

//create the custom row component, with click handler
const SemanticRow = ({ row, ...rest }) => {
    return (
        <Table.Row
            onClick={() => console.log(row)}
            {...rest}
        />
    );
};

//then pass the row to the table
<Html5Table
       // ...other props
       Row={SemanticRow}
/>

This results in warning, even when I remove all semantic react components

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

So with the additional of

import React, { forwardRef } from 'react';

The following code works raises no warnings

const SemanticRow = forwardRef(
    ({ index, row, ...rest }, ref) => {
        return (
            <Table.Row
                onClick={() => console.log(row)}
                {...rest}
            />
        );
    }
);

I'm a bit of a React beginner but I had a few questions.

Is the warning raised because the Semantic React Table.Row is a complex component?

Am I going to create performance concerns by passing a complex component in this manner?

Is there a better approach because I could end up with forwardRef nested inside useMemo hooks and then I'm starting to feel a bit out of my depth!!!

Thanks

Tom

Extra vertical scrollbars in codesandbox example.

This is a beautiful library!
I noticed that on the codesandbox example and on the website there are extra vertical scrollbars - an outer one that seems like an accident, and an inner one (which is initially hidden behind the outer one!) that actually does the scrolling. I've played around with the table size and css to try to make the outer one vanish, but can't get it to go away. Is it possible to make it disappear?

Blank table when fast scrolling on MS Edge

If I open the demo site https://window-table.now.sh/ on MS-Edge (Windows 10 1903 build) and scroll slowly, it works ok. But if I scroll quickly, the body of the table suddenly goes blank, and stays blank even if I then scroll slowly.

why there is a duplication of table ?

I tried to using the HTML5 Table. But, it's appending a duplication of table header and table body. It makes sense for having the below one table-header and table-body within a separate table. But, I didn't understand the point of the first one. Thats creating an unnecessary issues if I pass ref to header and body. because sometimes it's returns the below table-body and sometimes above one. Even though I'm interested in the table-body (below) with the actual values.

Is there any way, I can avoid rendering the first table`?

Why is row="[object Object]" column="[object Object]" in all of the elements?

https://codesandbox.io/s/sorting-in-window-table-forked-wmzhl?file=/src/index.js

<td class="table-cell" row="[object Object]" column="[object Object]" index="0" style="width: 50px; flex-grow: 50; display: inline-block; overflow: auto; box-sizing: border-box;">
  <div row="[object Object]" column="[object Object]" index="0">
    Demetris
  </div>
</td>

Support accessibility?

I'm trying out this library for the past few weeks. It's really quite powerful and nice.

But, in terms of accessibility, facing some issues.

• I would like to navigate within the table header if its sortable column. Checked one of your example but it didn't support accessibility (https://codesandbox.io/s/sorting-in-window-table-69wjb)
• I would like to navigate table rows by up/down arrow keys

I'm looking a flow something like this. Pressing tab it first focus on header sortable column one after other then focus move to row. Then I can using the arrow keys I can navigate within the table rows.

Couldn't hide border of the last child from thead

Hi,
Thanks for bring us such a nice lib! Really helpful but there seems to be a tiny flaw:

.table-header-cell, .table-cell {
    padding: 15px;
    border-bottom: 4px solid var(--light);
    border-right: 4px solid var(--light);

    &:last-child {
      border-right: 0;
    }
}

Result:

Is there a recommended approach for implementing infinite scrolling?

Hi there, amazing library you've built out!

One of the things that's really important for us is the ability to have an infinitely scrolling list. I'm thinking it might be possible to implement this with a sub-component that triggers an event to the parent on mount, but I'd love to know if anyone has implemented this already?

After mount, Html5Table rows start out sized correctly, but their height quickly grows too large

See here:

https://codesandbox.io/s/adoring-fermi-swfl3?file=/src/App.js

Sorting possible?

Is there any example of doing sort by column? Anyone has done this? Thanks!

Html5Table alignment when scrollbar appears

When the content is more than table height, scrollbar appears for the table body, then it breaks the alignment with table-header and table-body. You can see this issue in the document example itself. https://window-table.netlify.com/#blazing-fast-

Unable to scroll to row?

Is there a way I can tell the table to scroll to a given row? For example, I have a table with 20 000 rows and I want to scroll to row number 4500. I couldn't find anything like this in the docs and/or in the issues here.

Q: How to bind nested attributes with key?

Given following code:

<WindowTable
  columns={[
    { key: 'id', width: 50, title: 'ID'},
    { key: 'detail', width: 150, title: 'TAGS', Component: renderTags},
    { key: 'detail', width: 150, title: 'KEYWORDS', Component: renderKeywords},
  ]}
  data={data!.articles}
/>

Got following warnings:

Warning: Encountered two children with the same key, `detail`. 
Keys should be unique so that components maintain their identity across updates. 
Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Tried key: detail.tags no luck..

Thanks!

ClassNames to elements

Why not adding classnames to div elements, so we can access to them easily if we want add addictionaly styling?

Add support for HTML5Table to accept Row as component

Firstly, thanks for your great library! Really performant and smooth!
It just lacks a bit of flexibility.

I wanted to render a table with HTML tags so I pick the HTML5Table component.
Then I realized that the rows are not resized dynamically, which made me export the Row to separate component to measure it.

But passing Row renderer to HTML5Table like below won't work. Really appreciate if you can soon add support for this.

<Html5Table
          headerClassName="header"
          className="ui profile"
          data={profiles}
          columns={columns}
          Header={HeaderRenderer}
          Row={RowRenderer}
          rowHeight={getRowHeight}
 />

Setup semver

Maybe done as a part of #6
Currently we decide versions manually. This better be done using semver automation

className is not applied to <Table>

If you add className to Html5Table it applies the classes to the main parent div. It does not apply the classes to the table element.

So when using this with bootstrap, adding table-striped doesn't style the table correctly.

lodash-es dependencies are required to install

If using npm install window-table --save , the lodash dependencies aren't installed with. So when using webpack-dev-server to build, you'll run into:

ERROR in ./node_modules/window-table/dist/window-table.esm.js
Module not found: Error: Can't resolve 'lodash-es/debounce' in 'C:\...path\node_modules\window-table\dist'
 @ ./node_modules/window-table/dist/window-table.esm.js 3:0-42 428:11-19 801:11-19
 @ ./src/app.js
 @ ./src/index.js

ERROR in ./node_modules/window-table/dist/window-table.esm.js
Module not found: Error: Can't resolve 'lodash-es/isEqual' in 'C:\...path\node_modules\window-table\dist'
 @ ./node_modules/window-table/dist/window-table.esm.js 4:0-40 414:9-16
 @ ./src/app.js
 @ ./src/index.js

If I install the lodash-es libraries, project builds fine.

Not sure if it's more appropriate to mark them as dependencies rather than peer dependencies, or just make a note in the documentation when installing via npm.

Should we support Event Handler in this library?

The table works well since i follow the documentation https://window-table.now.sh/

But for now i'm thinking to add some event handler in table's rows such as onClick handler

as far as i see the documentation i don't get the event handler, is that possible to add some event with this module?

Thanks in advance

react-window on a next js ssr

Cannot set dragImage because Row always rerenders

I set some dragging state on a component wrapping the table, so when I change it, the table re-renders and all rows are unmounted and then re-mounted.

The Row sets event.dataTransfer.setDragImage in onDragStart, but because it re-mounted, the event target changes and image is not shown. Also onDragEnd doesn't work because of the same reasons.

Setup Circle CI

details TBA

Mantain color of selected row

Hi! I'm storing in the state the index of selected row and I color it. But if I scroll the table, the rows are rerendered, so the color on the row disappear. How mantain the color of the selected row ?

Nested tables

Hi, your package has some problems with nested tables. I try to render one table, but DOM has rendered three same tables :

is there a way to have dynamic row height?

Hi @pupudu,

Is there any way we can do dynamic height for dynamic content in the row?
could you please help me with any working example?

the existing one in the document are with some random height.

Warning: Cannot update a component (`WindowTable`) while rendering a different component (`AutoSizer`).

Hi, thank you for this great library. I'm facing this warning and dont have any idea about the cause. Could you provide some help? Thanks.

Full warning text:
index.js:1 Warning: Cannot update a component (WindowTable) while rendering a different component (AutoSizer). To locate the bad setState() call inside AutoSizer

It says this line in Measurer.tsx causes the warning:
dispatch({ dimensions: [height, width], entity })

Move measurers to its own file

As of now, all the measurers; table measurer, cell measurer and header measurer are used directly inside the root WindowTable component. It would look cleaner if we move the measurers to its own module.

Currently, the header measurer is embedded in the actual header. It will be better to have another sample header(possibly using the same column titles, or double rendering the header) inside the measurers component.

This would also take the Measurer component and the react-virtualized-auto-sizer along.

Should we support sorting and filtering in this library?

There are many ways to do those two. So we can either be agnostic or opinionated about them. This is to discuss the pros and cons

Trouble with storybook

Trying to use this library in storybook ends up with the following exception:

Cannot update a component (`WindowTable`) while rendering a different component (`AutoSizer`). To locate the bad setState() call inside `AutoSizer`, follow the stack trace as described in https://fb.me/setstate-in-render
    in AutoSizer (created by Measurer)
    in Measurer (created by WindowTable)
    in tr (created by HeaderRowRenderer)
    in thead (created by THead)
    in THead (created by HeaderRowRenderer)
    in HeaderRowRenderer (created by WindowTable)
    in table (created by WindowTable)
    in div (created by WindowTable)
    in WindowTable
    in WindowTable (created by Html5Table)
    in Html5Table
    in Unknown (created by Table)
    in Table (created by storyFn)

In this method

var Measurer = function Measurer(_ref2) {
  var measure = _ref2.measure,
      entity = _ref2.entity,
      debounceWait = _ref2.debounceWait,
      _ref2$innerElementTyp = _ref2.innerElementType,
      innerElementType = _ref2$innerElementTyp === void 0 ? 'div' : _ref2$innerElementTyp;
  var debounced = useMemo(function () {
    return debounce(measure, debounceWait, {
      leading: true
    });
  }, [measure, debounceWait]);
  var dispatch = debounceWait > 0 ? debounced : measure;
  return createElement(AutoSizer, {
    innerElementType: innerElementType
  }, function (_ref3) {
    var height = _ref3.height,
        width = _ref3.width;
    dispatch({
      dimensions: [height, width],
      entity: entity
    });
    return null;
  });
};

On this line:

 dispatch({
      dimensions: [height, width],
      entity: entity
    });