I think I would rename the CSS class from

.public_fixedDataTableRow_highlighted

to

.public_fixedDataTableRow_odd // (or _even)

Because that's more precise. CSS class names should describe the content, not the appereance. Highlight means it's highlighted, selected for a certain purpose which isn't the case here.

Found that I must use headerHeight & rowHeight with attribute expressions:

Won't Work:
<Table width="1000" height="500" headerHeight="50" rowHeight="50" rowGetter={rowGetter} rowsCount={this.state.data.length}>

Works:
<Table width="1000" height="500" headerHeight={50} rowHeight={50} rowGetter={rowGetter} rowsCount={this.state.data.length}>

Is this bug or intentional?

Show how the data can be fetched in chunks as the use scroll down the page and how to show basic loading states in the rows while the data loads.

The bottom row is staying fixed while scrolling (it does still update when done scrolling). It sits above the row on top of it like this:

This happened after scrolling about 3/4 down scrolled up, and then back down again.

Chrome (Mac) Version

There is a lot of boilerplate necessary to get fixed-data-table working.

I have created a repo which simplifies the example and makes it MUCH easier to use: https://github.com/ofersadgat/fixed-data-table-simple . It would be cool if we could integrate this with the actual examples (as it also shows how to do dynamic loading).

I notice that this code doesn't include @flow, but it does have @typechecks. Is this something related to Facebook's internal type checking system?

Looks like I cannot assign a onDoubleClick event handler on a row. Can you confirm it's not supported or missing?

Is there any way to pass className or style to table and cell components? I know I can attach CSS styles directly to generated elements and classes, but that's not very ideal because it generates hard linkings with inner workings of the component which should be opaque to the outside and is subject to changes.

Trying out the demo and both horizontal and vertical scrolling don't work on my iPad.

Browser console error gives:
FixedDataTable expected an ES6 compatible Object.assign polyfill.

Hi all!

Thanks for your work on FixedDataTable.

Currently, it's mandatory to provide a height or a maxHeight to the Table component. I was wondering what's the reason for making this parameter mandatory? Then, is it possible to flatten the table so all the data are displayed on the page using the default scrollbar of the page?

For now, when I have a lot of data which takes more place than the specified table height, a scrollbar appears for the table container. I'd like to display all the data on the page, and use the normal scrollbar.

Any advices?

Thanks

Similar to column grouping, the ability to display row spans/grouping would help show relationships in the data at the row level:

firefox 37 is working
chrome 39 give me these errors.

ReactWheelHandler.js:44 Uncaught ReferenceError: normalizeWheel is not defined
DOMMouseMoveTracker.js:45 Uncaught ReferenceError: EventListener is not defined 

PS. Also, shouldn't be dependencies like object.assign be in readme? or browser support? at least couple of lines. Thanks.

A very small glitch:

https://www.youtube.com/watch?v=ohHOLLKWckY

Steps to reproduce.
Reduce the height of table
Scroll to the last row of the table
Increase the height of the table

I was confronted by my colleagues about the advantages of using this component against simply using HTML <table> for rendering and I found I couldn't come up with anything convincing. Most importantly when I mentioned about the alleged performant speed, I can't find any figures to support it. So it might be good if we can come up with performance benchmarks of some sort.

Scrolling on Firefox constantly stutters. Tested on FF 35.01 on OS X. Chrome on the same machine is buttery smooth.

A scroll bar for the document keeps appearing while trying to scroll inside the table.

I do not understand how touch events work with this library. There is no call to React.initializeTouchEvents(true) and React pre 0.13 doesnt even have TouchEvents included in the default build. Did you use a custom library for the website or am I missing something? For some reason your event handler in touchable area is being called where mine isnt, did you do anything special to achieve this?

Currently the code has some dependencies on the client-side DOM, e.g.

1. FixedDataTableColumnResizeHandle componentWillMount has dependency on document.body
2. getActiveElement (which in turn dependent on document.body) is used

Is there a plan to make this component support isomorphic application?

Thanks.

Have you given any thought to handling cases (like time-series data) where the number of columns, rather than rows, is large?

We wrote a virtualizing grid (using Knockout) for that scenario, because as far as we could tell, none of the existing table libraries handled it well, if at all. The primary problems were:

• Hanging a lot of configuration off an explicit Column entry
• Assuming that scroll/overflow was vertical

The version my team wrote is internal, but a (very rough) open-source re-implementation is at https://github.com/jstclair/knockout-virtual-grid (hotkeys for editing the grid are documented at https://github.com/gnab/editableCell#list-of-keyboard-shortcuts )

I would really like to see this feature implemented, is it in any future plan?

I'm also trying to do this myself, but the way columns are handled internally currently transcend my poor React knowledge

Seems inefficient to call render when the scroll position hasn't actually changed, even though the user is 'scrolling'

I've tested this by returning new data from rowGetter func such that shouldComponentUpdate in FixedDataTableRow always returns false

We've got a table view that loads data as it is fetched. Using rowGetter, we check if there is data. If there is none that index is queued for fetching. Once it reaches a certain size or after a certain debounce time, the missing indexes are fetched.

That solution is serviceable at best but not at all efficient. It's not efficient when scrolling up a row (since it doesn't know direction) and when re-fetching the table (such as sorting or changing query) there isn't an easy way to find the starting offset to fetch from. Unless...

We have a visibleRows callback. That way we know exactly what is seen as each row is fetched. 10...20 then 11...21, etc. It shows direction and lets us know the last visible rows to fetch when re-fetching.

tl;dr need way to know what rows are visible for smarter fetching of server data.

Is it possible to have the table load upwards? E.g. imagine displaying a list of messages, the newest of which is at the bottom and you can scroll upwards to see (and potentially load) older messages.

Also, pardon my asking, but what is the state of this project? Are there still people working on it or is it "take it as it is"?

If I install from npm, I get #11 error.
If I install from github via npm install --save git+https://github.com/facebook/fixed-data-table, I get the following error: Error: Cannot find module './internal/FixedDataTableRoot' from '/Users/szhen2/Documents/app/node_modules/fixed-data-table'

I'm using the sample code provided in the homepage

Scrolling does not work on IE11 with example http://facebook.github.io/fixed-data-table/example-object-data.html.

• Simplify examples wrapper components and allow them to run standalone (outside the website) (#30)
• Create example of requesting + batching data requests based on visible content - http://jsbin.com/kuhene/5/edit?html,js,output (#66, #28)
• Pagination example - https://github.com/ofersadgat/fixed-data-table-simple/blob/master/src/js/ObjectDataListStore.jsx (#64)
• Sorting example - http://jsbin.com/pukiri/6/edit (#29)
• Filtering example - http://jsbin.com/fupiyipoba/3/edit
• scrollToRow/scrollToColumn example - http://jsbin.com/lajada/1/edit?html,js,output

Feel free to claim one of these task or provide suggestions for other examples we could add.

I am using fixed-data-table v0.1.0 with react 0.12.2 and i get the following error in the browser

Uncaught ReferenceError: process is not defined18../ExecutionEnvironment @ FixedDataTableRoot.js:14s @ _prelude.js:1(anonymous function) @ _prelude.js:156../internal/FixedDataTableRoot @ main.js:1s @ _prelude.js:1(anonymous function) @ _prelude.js:14.fixed-data-table @ ratings.js:7s @ _prelude.js:1(anonymous function) @ _prelude.js:11../footer @ app.js:10s @ _prelude.js:1e @ _prelude.js:1(anonymous function) @ _prelude.js:1

Here is the react component, which uses the table, which is just code from the samples.

'use strict';

var React = require('react');
var {Table, Column} = require('fixed-data-table');

var rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3']
];

var Ratings = React.create({
  getInitialState() {
    return {
      data: rows
    }
  },

  render: function() {
    return (
      <Table
        rowHeight={50}
        rowGetter={this.state.data}
        rowsCount={this.state.data.length}
        width={5000}
        height={5000}
        headerHeight={50}>
        <Column
          label="Col 1"
          width={3000}
          dataKey={0}
          />
        <Column
          label="Col 2"
          width={2000}
          dataKey={1}
          />
      </Table>
    );
  }
});

module.exports = Ratings;

and here is the usage

'use strict';

var React = require('react');
var Router = require('react-router');
var {DefaultRoute, Link, NotFoundRoute, Route, RouteHandler} = Router;
var {Panel} = require('react-bootstrap');

var Header = require('./header');
var Footer = require('./footer');
var Ratings = require('./ratings');

var App = React.createClass({
  getInitialState() {
    return {
    };
  },

  componentWillMount() {
  },

  componentWillUnmount() {
  },

  render() {
    return (
        <div>
          <Ratings />
        </div>
    );
  }
});

var NotFound = React.createClass({
  render() {
    return (
      <h2>Not found</h2>
    );
  }
});

var routes =
  <Route name="app" path="/" handler={App}>
    <DefaultRoute handler={NotFound}/>
    <NotFoundRoute handler={NotFound}/>
  </Route>;

Router.run(routes, function(Handler, state) {
  React.render(<Handler params={state.params} query={state.query}/>, document.getElementById('app'));
}

Any ideas?

Seems like if you specify a flexGrow constant and isResizeable on the same column, it should respect the flexGrow constant until the column is resized for the first time. Right now it just causes columns not to resize properly.

There doesn't seem to be any information listed on supported browsers. Is there any information available and if there is, is this something that could be added to the README?

Thanks!

Usual behavior for scrollable divs is that if you reach top/bottom via mouse scroll is that page continue to scroll.. But fixed-data-table eat all the scroll events when mouse is on top of it even if top/bottom is reached.

Would be possible to add this behavior in fixed-data-table?

Not sure if this is a planned feature or not, but it would be nice to be able to 'autoscroll' with middle-click and scroll as you would in a normal browser window. Right now it seems like that functionality is unavailable.

Slightly strange one here - but seems to apply to any laptop with touchscreen but using an external mouse (quite common on win8 machines)
I've got a touchscreen laptop (Yoga pro 2, win 8.1) and in firefox scroll works fine (though framerate does seem a bit slow)

In chrome (44) and IE11 though, things get a bit weird..
In chrome, scroll on the table works with touch, but NOT with the mouse. I also cant see the scroll bar (appears on FF)
In IE11 scroll is bust completelly bust (touch tries to scroll the page, mouse wheel does nothing)

Becomes a bit of a bigger issue at work, with external monitors still apparently thinking they are touch screen..
Guess this relates to overriding the native browser scroll and #20 and possibly #15 ?
All happening on http://facebook.github.io/fixed-data-table/example-object-data.html

Does it make sense to add onRowMouseLeave to the Table API? onRowMouseEnter is great, but I want to have a feature where the row changes when the mouse is over it, then reverts back when it leaves. Doing this with just :hover CSS properties might work, but I'm wondering if a JS handler is better.

The package.json requires "react": "0.12.x"

http://facebook.github.io/fixed-data-table/assets/main.js is pretty large and currently unminified. Ideally it should be minified, served with a far-future expires header, and have a cache-busting hash in the URL :)

Currently we have to pass the width of the table into the component on initial rendering, and the resulting table has a fixed width which does not response to window resizing etc. Is it possible to make the component more responsive without compromising the performance?

I get this error when I scroll horizontally multiple times or resize multiple columns.

Here is the code I am using (it is mostly the code from the resize example with some data) https://github.com/TomClarkson/fixeddatatable/blob/master/scripts/index.js

I'm using a pattern like this:

const [matrix, columns] = generateData(this.props.data);

return <Table width = {400}
              height = {500}
              headerHeight = {36}
              rowHeight = {36}
              rowGetter = {x => matrix[x]}
              rowsCount = {matrix.length}
              overflowX = "hidden">
         {columns.map((v, k) => (
           <Column width = {100}
                   label = {v}
                   dataKey = {k} />
         ))}
       </Table>

And inside generateData I'll do a switch-case basing on some other state so that whenever this state changes, the columns will update accordingly. However, what I was seeing is that under seemingly random occasions, the table will just re-render with its previous data, as if the whole table has been cached. No warnings or errors whatsoever.

hello!

I have a fixed data table, and am trying to add column sorting when a user clicks on a column header. I am using the headerRenderer property of Column to pass in a custom header rendering function. Within this function, I have an onClick handler on my header virtual element that tries to setState to re-render the view. However, the methods I passed into headerRenderer are not re-triggering.

Is there anyway for me to get the Column headers to re-render after a call to setState?

Thanks!

I had hoped to replace some simple data tables in my application with fixed-data-table but gave up after spending a few hours and having nothing visible on the page.

I spent some time studying the examples in this repo but had a difficult time distinguishing boilerplate or scaffolding related to the pages of this repo (things like the use of ExamplesWrapper, the direct inclusion of individual .css files from the src directory at the top level instead of the single css file recommended in the README, the use of non-React callbacks to track window size in ExamplesPage.js) from what's really needed to get data tables working.

I think it would be easier to get started using DataTables with a separate examples repository that built independently and had three individual example pages with (hopefully) a single, much smaller source file per example. That would also provide a baseline I could compare against when things aren't working in my app.

A secondary plea: Like the vast majority of users my tables are in a container

http://jsfiddle.net/michaelheuberger/4jg2z343/17/

The table is not rendered properly. But the code is very similar to the example on the README.md on https://github.com/facebook/fixed-data-table#getting-started .... what's wrong?

Currently column components aren't rendered directly and as such the propTypes aren't check by React. Find a way around this, it could be as simple as rendering this component with null.

Identified via #22

In https://github.com/facebook/fixed-data-table/blob/master/site/examples/FakeObjectDataListStore.js you still index the cache if the index < 0.

Simply adding:
...
var FixedDataTable = require('fixed-data-table');
...

Produces this error in the browser:

TypeError: undefined is not a function (evaluating 'Object.assign(destination, propertyObjects[i])')

.... package.json
...
"dependencies": {
"fixed-data-table": "^0.1.1",
"fluxxor": "^1.5.2",
"react": "~0.12.2",
"react-bootstrap": "^0.14.1",
"react-router": "^0.11.6",
"react-router-bootstrap": "^0.8.3"
},
...

However, it works great in Firefox 35.0.1

I would like to know how pagination was done using this component. any one has a sample code. thanks

When new data enters the state after initial render the table doesn't pick it up untill it needs to rerender the rows affected.

Would be nice to be able to somehow specify that rows should be rerendered.

Would also help with partial data in issue #28 .

This was interesting. I use the rowClassNameGetter, which basically returns one of the following class names randomly for each row: [ 'red', 'green', 'yellow' ]

Then adding css style with background-color, as an example:

.red .public_fixedDataTableCell_main {
background-color: red;
}

Now try scrolling, warning for epileptics, it flickers/blinks and goes bananas, I suspect this has todo with your scrolling magic :). It does not happen if you simply change the colors of the standard highlighted/normal rows, it has something todo with the randomness, that some rows are color X but not others. Not sure if this is working as intended or if it should be considered a bug.

Anyway I suppose it would be useful to change colors of rows depending on some condition X.

I am trying to use the group groupHeaderRenderer method to customise a column group header but it doesn't seem like it is getting called.

https://github.com/TomClarkson/fixed-data-table-column-group-headers/blob/master/site/examples/ColumnGroupsExample.js#L46

I can use jquery to keep the state in the browser and that works just fine. However, I was looking for a react way and it seems I ran into a re-render issue in the fixed-data-table.
Is my thinking wrong?

See the original question here: http://stackoverflow.com/questions/29067247/check-all-boxes-in-a-fixed-data-table-by-using/29090399

'use strict';

var React = require('react/addons');
var Table = require('fixed-data-table').Table;
var Column = require('fixed-data-table').Column;

// Fixed data tables (Facebook) requirement:http://facebook.github.io/fixed-data-table/
require('../../styles/fixed-data-table.css');
var TableTester = React.createClass({
  getInitialState: function(){
    return ({
      selected:[],
      rows: [
        ['a1', 'b1', 'c1'],
        ['a2', 'b2', 'c2'],
        ['a3', 'b3', 'c3'],
      ]      
    })
  },
  render: function () {
    var data = this.state.rows;

    return (
      <div>
        <label>Check All</label>&nbsp;<input type="checkbox" onClick={this._checkall} />
        <Table rowsCount={data.length} rowGetter={this._rowGetter} width={1000} height={300} headerHeight={50} rowHeight={50}>
          <Column label="Col 1" width={500} dataKey={0} />                                                            
          <Column label="Col 2" width={500} dataKey={1} cellRenderer={this._renderCheckbox} align="center" />
        </Table>
      </div>
    );
  },

  _checkall:function(e){
    var newSet = [];
    if (e.target.checked) {
      this.state.rows.forEach(function(columns){
        newSet.push( columns[1] );
      });
    }
    this.setState({
      selected: newSet
    });

  },

  _onChange: function(e) {
    var {checked, value} = e.target;   
    var newSet = this.state.selected;
    if ( checked && newSet.indexOf(value) < 0 ) { // does not exist in list
      newSet.push(value);
    } else {
      newSet.splice(newSet.indexOf(value), 1);
    }  
    this.setState({
      selected: newSet
    });

  },  

  _renderCheckbox: function(data){
    var checked = this.state.selected.indexOf(data) >= 0; // value is in list  
    return <input type="checkbox" value={data} onChange={this._onChange} checked={checked} />;
  },

  _rowGetter: function(rowIndex){
      return this.state.rows[rowIndex];
  }

});

module.exports = TableTester;

Not everyone uses NPM, the site should have a regular JavaScript file download. It should use UMD for the module.