schrodinger / fixed-data-table-2 Goto Github PK

Hello! Is there a version for react 15.3.2 ?

I used version 0.6.1 fixed-data-table before, but there is a warning about div and columnKey.

I know that fixed-data-table-2 seems solved this question.

After installed the fixed-data-table-2, there is a conflict caused by version.

How do I solve the question?

Thanks very much!!

FDT2 has grown modestly over the last couple months. I think it's time to rename the repository to differentiate from the original repo.

The driving forces behind this are as follows:

• We want to start introducing breaking changes into the API. We don't want someone migration from FDT to just append '-2' to their package.json and expect full compatibility
• We want to increase community awareness and feedback. I think living in the shadow of a much larger repository will hinder that.
• We aren't as 'Fixed' in FixedDataTable anymore, so the name itself has lost some meaning
• We have plans for v1.0 release, and it would be an excellent springboard

We have some big plans in the future to make the code much easier to work with and more contributor friendly.

Please feel free to suggest names and thumbs up the ones you like!

The columnKey prop is passed to the underlying children and react now moans about it.

Warning: Unknown prop `columnKey` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

Expected Behavior

no warning

Current Behavior

warning

Your Environment

React 15.3.1

The repo looks broken because of it

Expected Behavior

It should be easy to apply custom styles to the grid.

Current Behavior

The default styling does too much and is not well organized. This makes it difficult apply custom styling in many cases. A few examples are:

Wraps on default cell make styling hard. Can't style the border of FixedDataTableCellDefault
Also when table width > total column width, it's difficult to style the extra header space.

Possible Solution

Consider making default styles into themes which can easily be applied or removed depending on the needs of each use case.

Steps to Reproduce (for bugs)

Your Environment

• Version used: 0.7.5
• Browser Name and version: Chrome 53
• Operating System and version (desktop or mobile): Mac OSX Yosemite
• Link to your project:

We currently have v0.6 API Migration docs which is largely unused. We should instead refactor this to be a migration guide coming from facebooks fixed-data-table v0.6.3.

Currently we don't have any breaking features but we should list new APIs, new features and maybe resolved bugs from the origin repo.

When loading a large number of rows to the fixed-data-table-2 component, rows at the bottom of the table may not be rendered currently. Sometimes it can even crash the browser. This is caused by the height limit of a HTML Dom element in the browser. Different browsers may have different limit. In the implementation of the fixed-data-table-2, it uses a sliding canvas container to expose rows that are visible depending on the window size and the scrolling position. The height of the canvas is the combined height of all rows, visible and hidden. If the combined height exceeds the allowed height of any element in the Dom structure, rows at the bottom with a top offset larger than the limited value, won't be displayed correctly.

Expected Behavior

Any number of rows can be rendered correctly with no feature broken.

Current Behavior

When loading a large number rows, the rows at the bottom can't be rendered correctly. It may crash the browser if using FF.

Possible Solution

Instead of using a sliding canvas and setting the height of the canvas to be literally the combined height of all rows, we can simply slide the visible rows up or down to by a calculated offset to bring them to the right position that they can be seen. The offset will always be less than combined the height of visible rows, which will never exceed the limit of any browsers.

Steps to Reproduce (for bugs)

• Navigate to the example page: 'http://schrodinger.github.io/fixed-data-table-2/example-object-data.html'.
• Scroll down to the bottom. There is a big blank (in Chrome).
• Then scroll up to the last visible row. It's a little overlapped with the one above it.

Context

By using a buffered design, we could load a large number of data to the component. But this issue prevents us from doing so. Because it won't allow rows at the bottom of the table to be rendered correctly.

Your Environment

• Version used: Most up-to-date
• Browser Name and version: Chrome Version 53.0.2785.143 (64-bit)
• Operating System and version (desktop or mobile): Mac Sierra v10.12

Expected Behavior

When changing scrollTop prop, onScrollStart/onScrollEnd functions are called as expected.
The same should happen when passing scrollLeft prop.

Current Behavior

Passing a different scrollLeft prop value, onScroll* callbacks are not called.

Steps to Reproduce (for bugs)

• JSFiddle
• In the example above, scrollTop value is incremented every second. When the value exceeds the max available value, onScrollEnd will adjust the state variable with the max scroll position.
• changing line 60 (replace scrollTop with scrollLeft) and line 41 (replace y with x), the value will continue to grow and grow, exceeding the max available value for horizontal scrolling (onScrollEnd is never called and state variable is never adjusted)

Context

I'm trying to control the scroll using keyboard arrows, saving the scroll state and passing the stored scrollTop and scrollLeft to the table at each render.
When trying to pass a scrollTop value greater then the max allowed value, the table will scroll to the max and onScrollEnd will return the right scroll value, allowing me to revise my saved state with the correct max value, with no need to pre-calculate the max allowed value myself.

The same thing doesn't happen with scrollLeft, so my state variable will continue to grow over the max allowed value with no chance to revise it when it exceeds the max value.

Your Environment

• Version used: 0.7.2
• Browser Name and version: Chrome 53
• Operating System and version (desktop or mobile): Mac OS X El Capitan

Expected Behavior

If you scroll right on the table you should be able to scroll left after any other action.

Current Behavior

It varies but usually it doesn't work. I can consistently get it to scroll if I scroll up or down first and then try left.

Possible Solution

Update to Chrome v52.

Steps to Reproduce (for bugs)

Open Any Example.
Reduce window size or increase some column widths.
Scroll right.
Switch tabs to something else and then come back.
Attempt to scroll the table left.
???

Context

Scrolling left is very important.

Your Environment

• Version used: The Example
• Browser Name and version: Chrome v51
• Operating System and version (desktop or mobile): Mac OS X El Capitan V10.11.5
• Link to your project: Mine does as well but so does the example so you can see it there

Expected Behavior

I'm rendering a checkbox on each row that is used to mark the elements that have to be removed from the table when clicking a button. When removing the top row I would expect the checkbox on the row below (now the one on top) not to be checked.

Current Behavior

But as it stands right now, when removing the top row (whose checkbox was checked), the checkbox on the the row below (now on top) remains checked.

Possible Solution

I imagine that the reason for the bug is that React somehow thinks that the "new" top row is the same as the previous one.

Steps to Reproduce (for bugs)

Will provide a link to a fiddle as son as possible.

Context

The context and what I'm trying to accomplish is pretty clear.

Your Environment

• Version used: 0.7.2
• Browser Name and version: Internet Explorer 11
• Operating System and version (desktop or mobile): Windows 7 Enterprise

Just reported an issue on the "original" repo before I saw that this fork might be the one to work with.
This is the existing issue 419

Is there any way to achieve a layout like a this?

+-------------------------------------------------------------------+
|          Names         |            |          |                  |
+------------------------+ Birthday   | City     | Mail             |
| First name | Last name |            |          |                  |
+------------+-----------+------------------------------------------+
| Roy        | Stokes    | 1989-01-01 | New York | [email protected]     |
| Kelly      | Rose      | 1988-02-02 | London   | [email protected]   |
+-------------------------------------------------------------------+

I don't want it to look like this:

+-------------------------------------------------------------------+
|          Names         |                                          |
+------------------------+------------------------------------------+
| First name | Last name | Birthday   | City     | Mail             |
+------------+-----------+------------------------------------------+
| Roy        | Stokes    | 1989-01-01 | New York | [email protected]     |
| Kelly      | Rose      | 1988-02-02 | London   | [email protected]   |
+-------------------------------------------------------------------+

Expected Behavior

We should use open source projects for default styling. Potentially looking at CSS in JS approaches. This will make it easier for folks to jump into the project and help improve the default styling or create default styling themes as suggested in #60

Current Behavior

We currently use internal Facebook utilities for applying styles. This approach is not well understood or documented, and can lead to issues when applying custom styling to the grid.

Possible Solution

Consider using Aphrodite or another alternative to replace the Facebook utilities

Steps to Reproduce (for bugs)

Your Environment

• Version used: 0.7.5
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project:

Same as #398

I'd like to make an editable spreadsheet with the input in each cell. Everything works fine and fast the only issue is that when I focus any input every other n-th row input is focused as well (n depends on the height of the table).

Clicked:

Scrolled:

We use cssmodules so we have no global CSS and so we'd like to be able to use fixed-data-table-2 but we have no place to load global CSS.

Could you use CSS modules or inline styles for this component so they are isolated?

Experiencing this exact issue facebookarchive/fixed-data-table#292 in this repo also.

Expected Behavior

onContentHeightChange should always get called if any of the rows grew in height

Current Behavior

The first time rowHeightGetter is called it always returns the rowHeight value because the rows haven't been rendered yet. Once the rows have been rendered it gets called again and the row height updates (there's about a 500ms delay however) but onContentHeightChange does not get called again, and so if any of the rows grew in height, the table cuts them off at the bottom.

Context

Trying to implement dynamic row heights based on cell values and have the table update its height appropriately

Your Environment

fixed-data-table-2 0.6.6
react 0.14.8
react-dom 0.14.8

I believe that it makes sense to add a data context to the Table element. As all data should have the same source it makes sense that all child nodes of the <Table> have access to the same data-source. This makes sense as there is a strictly hierarchical nature: table -> column -> cell. One could also store column within context with the same argument. I'm aware of that context is advised against, but it seems like the most natural place to add this and it does seem to have a certain degree of maturity.

Use-case example

As I've been trying to convert the data-filtering example to a more general solution, context seems to be an interesting alternative. In the example they store the data in this.state.filteredDataList. While this works I run into issues when children are specified outside the class, here's a basic example:

class FilterTable extends Component {
  ....
  render() {
    ....
    return (
      <Table
        rowHeight={50}
        rowsCount={data.getSize()}
        headerHeight={100}
        width={1000}
        height={500}
        {...this.props}
        >
        {children}
      </Table>
    )
  }
}

I would like to then be able to design a FilterTable component that looks something like:

<FilterTable
  rawData={myData}
  filters={this.state.filters}
  {...props}
>
  <Column
    header={
      <FilterHeaderCell
        placeholder="name"
        onChange={e => this.onChangeFilter('name', e)}
        value={this.state.filters.name}
      >
        Name
      </FilterHeaderCell>}
    cell={<TextCell col="name" />}
    width={100}
  />
</FilterTable>

The problem is that since myData is filtered inside the <FilterTable> component the child <TextCell> doesn't have access to the filtered list. I've tried adding filteredData to my Redux store but I got into an eternal loop-issue and it doesn't seem like the store should have to worry about the filtering within a table.

TextCell

The TextCell implementation shouldn't be that tricky:

import React, { PropTypes } from 'react';
import { Cell } from 'fixed-data-table-2';

const TextCell = ({ rowIndex, col, ...props }, { data }) => (
  <Cell {...props}>
    {data.getObjectAt(rowIndex).get(col)}
  </Cell>);

TextCell.conextTypes = {
  data: PropTypes.shape({
    getObjectAt: PropTypes.func.isRequired,
  }).isRequired,
};

TextCell.propTypes = {
  rowIndex: PropTypes.number,
  col: PropTypes.string.isRequired,
};

export default TextCell;

This is less of an issue as it is a pro-tip. I've noticed that you can style elements of the table by adding a className to the <Table/> component. However this can get clunky when you have to do some finagling to gain specificity precedence on certain elements. What has worked best for me has been to use "Aphrodite" to accomplish the custom styling. I'm more than happy to build out an example when I get some free time, but it might be something that you folks consider throwing into the docs as an aside for those wishing for a clean, verbose and snazzy way to style the fixed tables.

I was confused on the pagination example because there were a lack of links for pagination (ex. first, last, next, previous, page #). Could you add some documentation for adding pagination to a table?

The fixed-data-table does not render with matching markup on the server and client.

Console output

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) ight:32px;z-index:1;transform:translate3
 (server) ight:32px;z-index:1;left:0px;top:0px;"
Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.

Possible Solution

We will probably need to change the code to always render with top and left on the first pass then use translate if the browser supports after that.
facebookarchive/fixed-data-table#44

I may send a pull request if I get a chance to fix it myself, but I figured I'd report it nonetheless.

Edit: this PR seems to be a reasonable solution facebookarchive/fixed-data-table#308

Setting align to right on the column only align right the table header, not the cell content

Your Environment

• Version used: 0.7.2
• Browser Name and version: IE11
• Operating System and version (desktop or mobile): win7
• Link to your project:

My table has dynamic row heights. When I change the height of a cell and re-render the table, the scrolling on the table is broken. If I expand the same row again, scrolling is restored.

Expected Behavior

I would expect that after re-rendering the table that the scrolling would work.

Current Behavior

The row expands but the scrollbar is removed which prevents scrolling.

Possible Solution

It appears that _calculateState() is not getting the actual row heights from the rowHeightGetter methods when it calls

var scrollContentHeight = this._scrollHelper.getContentHeight()

At this point it is getting the height of the rows by checking the rowHeight property on the table. I see in _calculateState() there are other calls that eventually call this._scrollHelper._updateHeightsInViewport() to properly get height.

Steps to Reproduce (for bugs)

https://jsfiddle.net/3cooper/9dayaac8/

Context

This prevents me from using this table in a solution that we have designed around it.

Your Environment

• Version used: 6.1
• Browser Name and version: Chrome 50
• Operating System and version (desktop or mobile): Desktop OS X 10.11.4
• Link to your project: It is private.

I have been using fixed-data-table successfully but lately after fixing lots of linting errors, I started getting this error: Uncaught (in promise) TypeError: Cannot read property '__TableColumnGroup__' of undefined. I'm not sure what is going on as the code in my component seems to be fine. The error is thrown in the library code which makes me think that the error is in my code somewhere else.

Here is the code that is related to fixed data table:

import React, { PropTypes } from 'react';
import { Table, Column, Cell } from 'fixed-data-table-2';
import { TextCell } from './CellComponents.jsx';
import { createDynamicComponentForCells } from './UtilityFunctions.jsx';

class TableComp extends React.Component {
  render() {
    return (
      <Table
        height={this.props.heightFactor}
        width={this.props.widthFactor}
        rowsCount={this.props.data.length}
        rowHeight={this.props.rowHeight}
        headerHeight={this.props.headerHeight}
        style={null}
      >

        { Object.keys(this.props.data
          .reduce((val1, val2) => Object
            .assign({}, val1, val2), {}) || {})
        .map((field, index) => {
          let CellComponent;
          let widthCell;
          if (this.props.mapDataToCellComponentName === undefined) {
            CellComponent = <TextCell style={null} data={this.props.data} col={field} />;
          } else {
            const [component, decimalPlaces, width] = this.props
            .mapDataToCellComponentName(field, index);
            widthCell = width;
            /*CellComponent = createDynamicComponentForCells(component,
              { style: null,
                data: this.props.data,
                col: field,
                decimals: decimalPlaces
              }
            );*/
          }
          return (<Column
            style={null}
            key={field}
            cell={<Cell>ji</Cell>}
            header={
              <Cell
                width={widthCell !== undefined ? widthCell :
                  this.props.columnWidth}
              >{field}</Cell>
            }
            width={widthCell !== undefined ? widthCell : this.props.columnWidth}
          />
          );
        })
        };
      </Table>
    );
  }
}

TableComp.propTypes = {
  data: PropTypes.array.isRequired,
  mapDataToCellComponentName: PropTypes.func,
  heightFactor: PropTypes.number.isRequired,
  widthFactor: PropTypes.number.isRequired,
  rowHeight: PropTypes.number.isRequired,
  headerHeight: PropTypes.number.isRequired,
  columnWidth: PropTypes.number.isRequired
};

export default TableComp;

As you can see, I'm trying to render the simplest cells inside Column since I want to see if it's working or not. It used to have custom cells.

Here is the error stack trace:

• Version used: "fixed-data-table-2": "^0.7.7"
• Browser Name and version: electron with react and redux
• Operating System and version (desktop or mobile): windows 10 PC

Current Behavior

When I tray to reorder my column the speed of the scrolling bar is very slow,.

Possible Solution

It think will be better if the speed value of the scrolling bar is passed by props.

Expected Behavior

When I drag a column to the left,the column should move and when I arrived to the table end the scroll should move until the end of the columns

Current Behavior

The scroll bar move but after 5-6 seconds the column that i was dragging disappear and the scroll bar moves on its own.

Steps to Reproduce (for bugs)

1.Create a table with 20 + columns
2.Try to drag the first column until the end of the table
3.After 5 - 6 second of dragging an warning apear
'warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the FixedDataTableColumnReorderHandle component. '
This is the function where the warning appear:
_updateState: function() {
this._animating && requestAnimationFrame(this._updateState), this.setState({
dragDistance: this._distance
}), this.props.onColumnReorderMove(this._distance);
}

Context

I am trying to reorder column in my table,i have more than 30 column on the table

Your Environment

version :"fixed-data-table-2": "0.7.1",

• Browser Name and version: Chromium
• Operating System :Ubuntu 12.04

Right now FixedDataTableCellDefault provides a hard-coded padding of 8px. You can workaround this by setting a margin of -8px (or some equivalent) but it would be nicer if this were configurable.

Possible Solution

Probably just pass down via props to <Cell> (though I assume this would affect cell height calculation)

Context

We're trying to provide a very dense table of data and the extra space that 8px gives you is annoying to workaround.

Expected Behavior

If new content is added to the table and I drag the vertical scroller down, then I should be able to view all the content.

Current Behavior

After new content is added in the table, the scroller appears but when you drag it down, you cannot see some of the new content. Whereas if you scroll inside the table (without dragging the in-built scroller), then you can see all the content.

Steps to Reproduce (for bugs)

https://jsfiddle.net/amit1911/34k8uf8o/

Context

I have a table with pagination and change records per page feature. When users switch from let's say 10 records/page to 100 records/page then they should be able to scroll and view all the new rows. So right now when users drag the in-built scroller down to view new records, they are not able to scroll down to the last record. A couple of records become inaccessible. But if you just scroll down inside the table (without dragging down the in-built scroller), then you can view all the records.

Your Environment

• Version used: 0.7.6
• Browser Name and version: Chrome and Firefox (latest)
• Operating System and version (desktop or mobile): Windows 7 64-bit

The scroll bar disappears and the user can't see all the data from the table.

1. Go to Client-side Filter example.
2. Add a filter text that shows only a couple of items and the vertical scroll bar is not visible.
3. Make the page smaller until the vertical scroll bar appears.
4. Scroll down to see the last row.
5. Make the page larger so the scroll bar disappears.

Expected Behavior

All rows should be visible.

Current Behavior

Only a part of the rows are visible.

Possible Solution

Steps to Reproduce (for bugs)

It can be reproduced on Example Filter

Context

I think this is a general issue for all use cases that have table resize.

Your Environment

• Version used: 0.7.7
• Browser Name and version: Chrome 54.0.2840.99 m (64-bit)
• Operating System and version (desktop or mobile): Desktop Win 10.

Spun off from #76 and #80

Hello,
Now I am implementing hidden columns using your example. And I've noticed that after removing one column, next columns keys were regenerated.

Expected Behavior

Column keys should not be regenerated on each render.

Current Behavior

Column keys are generated on each render.

Possible Solution

I have tried allowCellsRecycling=true but after removing column keys were regenerated because next columns move one position left.
I'd propose to update component without key regeneration or/and provide separate key parameter in Column component.
https://github.com/schrodinger/fixed-data-table-2/blob/master/src/FixedDataTableCellGroup.js

render() {
...
for (var i = 0, j = columns.length; i < j; i++) {
      var columnProps = columns[i].props;
      var recycable = columnProps.allowCellsRecycling && !isColumnReordering;
      if (!recycable || (
            currentPosition - props.left <= props.width &&
            currentPosition - props.left + columnProps.width >= 0)) {
        var key = 'cell_' + i;
        cells[i] = this._renderCell(
          props.rowIndex,
          props.rowHeight,
          columnProps,
          currentPosition,
          key,
          contentWidth,
          isColumnReordering
        );
      }
      currentPosition += columnProps.width;
    }
...
}

Context

I created table with header filters and hidden columns functionality. After filters were applied I started to hide column - all columns after that were recreated as a result filter's state was cleared.

Your Environment

• Version used: ^0.7.6

The new 0.6.6 versions solves the issue of resizing columns on IE11, however, there is still an old bug regarding srcolling in IE11: facebookarchive/fixed-data-table#15
Thanks a lot for maintaining this project.

Original issue here: facebookarchive/fixed-data-table#56

Do we plan on only supporting IE11 going forward? I think its important to hear what the community has to say about this

It would be a really convenient feature if I could have onMouse* Events for cells. Say, I want to display an icon as soon as the user hovers over a specific cell, to give a hint, that an action can be performed on the cell.

Right now, I can get these events only for the complete row. The cell or column the user hovers over at that time cannot be reconstructed, as far as I can tell.

I migrated our fixed-data-table project over to use the fixed-data-table-2 with the new touchScrollEnabled feature and the scrolling with momentum on mobile devices is awesome. However I was experiencing an issue where the onClick handler on my cell component wasn't getting called.

I ended up commenting out the event.preventDefault() lines in the onTouchStart and onTouchEnd functions in ReactTouchHandler.js. That fixed the problem for me and as of yet has not caused any additional issues I have noticed with the scroll functionality.

I mainly just wanted to highlight this in case it's useful. I'm also curious though, is it an issue that other people have noticed, or is it perhaps getting caused by some conflicting code specific to my project? Also i'm curious if there are expected consequences I should be aware of due to disabling the event.preventDefault functions in onTouchStart and onTouchEnd.

Thanks!

#5

Hi,

I've tried using the original table and found that flex columns can shrink to nothing and seem to ignore the minWidth setting. Is this also true in your version (or am I just doing something wrong).

Thanks,
David

If table has not any record, show message "No records" in the table body

Expected Behavior

Message in table when table is empty

Current Behavior

Showing only header cells

Possible Solution

Put some span with text to body, something like:

<span>{this.props.emptyDataMessage}</span>

to file https://github.com/schrodinger/fixed-data-table-2/blob/master/src/FixedDataTable.js:

render() /*object*/ {
   ...
    return (
      <div
        className={joinClasses(
          this.state.className,
          cx('fixedDataTableLayout/main'),
          cx('public/fixedDataTable/main'),
        )}
        onWheel={this._wheelHandler.onWheel}
        onTouchStart={this._touchHandler.onTouchStart}
        onTouchEnd={this._touchHandler.onTouchEnd}
        onTouchMove={this._touchHandler.onTouchMove}
        onTouchCancel={this._touchHandler.onTouchCancel}
        style={{height: state.height, width: state.width}}>
        <div
          className={cx('fixedDataTableLayout/rowsContainer')}
          style={{height: rowsContainerHeight, width: state.width}}>
          {dragKnob}
          {groupHeader}
          {header}
          {rows}
          {footer}
          {topShadow}
          {bottomShadow}
        </div>
        {rows.length ? "" :  <span>{this.props.emptyDataMessage}</span> }
        {verticalScrollbar}
        {horizontalScrollbar}
      </div>
    );
},

Context

It will more usefull when table will empty. For now we have implementation like div under the table, and have more problem with resizing page, or etc.
Functional like this, there is in a lot of table components.

Your Environment

• Version used: 0.7.7
• Browser Name and version: Chrome
• Operating System and version (desktop or mobile): Mint 18
• Link to your project:

Initially Table is rendering successfully and scrolling works fine. But on filtering or column sorting, I am getting this error

Uncaught Error: Invariant Violation: Index out of range 0

After getting this error, Scrolling also stops working and throws the same error.

I am on the latest version of react and fixed-data-table and using es6 classes.

"fixed-data-table-2": "^0.7.2", "react": "^15.3.0", "react-dom": "^15.3.0"

Goals

Change the way fixed data table handles its internal state to allow correct dynamic row height calculation## Current Behavior

Current State

• State is stored as part of the top level react component, as well as in some children component
• Changing any portion of state re-runs _calculateState, which update scrollContentHeight from scrollHelper
• Child components, namely BufferedRows, force the row height calculation to update, meaning the contentHeight value becomes stale
• _reportContentHeight uses stale data because update state wasn’t triggered
• In certain edge cases, there is no further action to trigger subsequent call to _calculateState, leading to incorrect call to update content height

Proposed Solution

• Remove all state in react components and add redux dependency to hold state
• Start this process by first moving only scrolling/height related data to redux store

1. Move ScrollHelper state to redux store
   • One issue that may arise is usage of PrefixIntervalTree. Since it is a self-contained object, it may require some hacking around to return new reference.
2. Move all ScrollHelper callbacks to actions
   • scrollRowIntoView
   • setViewportHeight
   • scrollBy
   • scrollTo
   • scrollToRow
   • setRowHeightGetter
3. Add redux react store connectors to replace ScrollHelper getters
   • getContentHeight
   • getRowPosition
4. Remove state from BufferedRows
   • We want the main table to be in charge of telling BufferedRows which ones to render
   • This will allow us to remove getRowPosition call from BufferedRows and instead precompute the desired row heights
   • This will allow us to remove the side effect in getRowPosition so that it doesn’t update state

Tasks

• Inject redux store logic into FDT calculateState
• Migrate scrollHelper state to redux store
• Create actions/reducers for scrollHelper setters
• Inject store updating to replace getters
• Cleanup BufferedRows state

After running:
npm install fixed-data-table-2 --save

When I run I get the following error:

ERROR in ./~/fixed-data-table-2/internal/FixedDataTableCell.react.js
Module not found: Error: Cannot resolve 'file' or 'directory' ././FixedDataTableColumnReorderHandle.react in /workspace/myapp/node_modules/fixed-data-table-2/internal
 @ ./~/fixed-data-table-2/internal/FixedDataTableCell.react.js 20:40-94

I do not see the FixedDataTableColumnReorderHandle.react.js anywhere.

Thanks for starting this repo! Any plans to support touch scrolling natively? This was a common question in the original issue tracker.

For reference:
facebookarchive/fixed-data-table#403
facebookarchive/fixed-data-table#365
facebookarchive/fixed-data-table#26

I don't see any rows when click to expand collapsed row. Just height increased.

Can someone provide an example of it?

Can you update react version like below?

"peerDependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1"
}

BTW, I just fork this, and try to install from my repository.
And there is an error in my browser.

internal/FixedDataTableRoot.js
    Error: XHR error (404 Not Found) loading

I know the file is generated from npm run build-npm, but how can I do after npm install?

Just curious how you are planning to do releases. Are you going to pick up a new package name, take over the existing? And when do you anticipate a first release to be ready? Thanks much!

1. Go to your primary example
2. Scroll with macbook touchpad to the right side of the table
3. Scroll back to the left

Expected Behavior

Table is scrolling to the left

Current Behavior

Chrome goes back in history

Possible Solution

Probably fixed-data-table "unfolds" too slow when scrolling to the left, so chrome triggers "history back" gestory. I found no way to prevent this geature programmatically without destroying table's behavior. There are some plugins for this, but none of them actually works.

• Version used: 0.7.5
• Browser Name and version: Google Chrome 53
• Operating System and version (desktop or mobile): OSX 10.11.6

I'm trying to have both the ability to have a responsive table (grow/shrink based on parent container), as well as the ability to resize any column within the table. As of right now they seem to be mutually exclusive, i.e., I can do one or the other but not both.

Code:

const TextCell = ({rowIndex, data, col}) => (
  <Cell>
    {data[rowIndex][col]}
  </Cell>
);

TextCell.propTypes = {
  rowIndex: PropTypes.number,
  data: PropTypes.array,
  col: PropTypes.number,
};

const layout = {
  columnWidth: 100,
};

class MyTable extends Component {

  static propTypes = {
    labels: PropTypes.array,
    data: PropTypes.array,
    containerWidth: PropTypes.number,
    containerHeight: PropTypes.number,
  }

  constructor(props) {
    super(props);

    this.state = {
      columnWidths: {},
    };

    this.onColumnResizeEndCallback = this.onColumnResizeEndCallback.bind(this);
  }

  onColumnResizeEndCallback(newColumnWidth, columnKey) {
    this.setState(({columnWidths}) => ({
      columnWidths: {
        ...columnWidths,
        [columnKey]: newColumnWidth,
      }
    }));
  }

  render() {
    const {
      props: {
        labels,
        data,
        containerWidth,
        containerHeight,
      },
      state: {
        columnWidths,
      },
    } = this;

    return (
        <Table
          rowHeight={80}
          headerHeight={80}
          rowsCount={data.length}
          onColumnResizeEndCallback={this.onColumnResizeEndCallback}
          isColumnResizing={false}
          width={containerWidth}
          height={800}
        >
          {
            labels.map((label, index) => (
              <Column
                key={index}
                columnKey={index}
                header={<Cell>{label}</Cell>}
                cell={<TextCell data={data} col={index} />}
                width={columnWidths[index] || layout.columnWidth}
                flexGrow={1}
                isResizable={true}
              />
            ))
          }
        </Table>
    );
  }
}

export default GetContainerDimensions()(MyTable)

Thanks for sharing your folk.

We're also building the re-ordering of columns then we saw yours.

Just curious, have you implemented the "scroll-on-drag" when you are re-ordering more columns that will fit the current page? We having issues on how to simulate horizontal scroll externally. If you have any ideas, please do share!

Thanks again

I want to make my table scroll to top when some event happens. For example when user sorts the table data, i want the user to be moved to the top of the table. For this I am using the scrollToRow property. So I have a scrollToRow property in my state that I set to 0 when the user sorts the data and then the cursor moves to the top of the table.

Problem
Now when I scroll inside my table and then some other action happens, the state changes and the table is re-rendered and it scrolls to the top because the scrollToRow property in my state is still 0. What is the best way to tackle this issue?

What is the most efficient way to calculate dynamic row heights based on cell contents?

Hi,

I'm trying to use the table with cells that you can hover on them and see tooltips. Because of overflow/z-indexing issues I see my tooltips being clipped, and I see other issues with recycling of cells (for example, using https://github.com/wwayne/react-tooltip with a single <ReactTooltip /> wouldn't work out of the box).

Currently, we can't find any way to style vertical lines between column groups. We know that we can do it when you're using fixed column groups, but we simply want a vertical line through the entire table for each column groups (when none are fixed).

Expected Behavior

We'd like to be able to have a public style where we can add a nice border/vertical line through the edge of each column group to give a user clear grouping of columns. We don't want a vertical line for every single column - just the grouped ones.

Current Behavior

Currently, the only way is to use fixed column groups, which means you can only have "effectively" two column groups with the vertical line through them. We've looked at the CSS and there are no "overarching" cell group elements, nor are there any special CSS classes on the start/end columns in a group.

Possible Solution

The easiest solution would be to add a public CSS class to the start of every column group (e.g. public_fixedDataTableCell_cellFirstInGroup or something).

Context

Ideally, the user should see nice column groups in the table spanning the entire height. This helps our users analyse different parts of the table clearly.