henrybuilt / react-sticky-table Goto Github PK

I was wondering why npm it's not there as a devDep or even at all, I added this package to a project and it added like 100 extra deps because of that. I think it's really valuable to have a package with no deps at all.

Hi there!

Nice component!

Is there a function for triggering a scroll to a particular cell in the table?

if I pass a new array of headers with different order of header names it does not update width of sticky header Cells according to a new order of names

i dont know what is happening here.

maybe due to screen height or something or opening console accelrate css hardware.

when is scroll the body in x direction the header lag behind the body.

how to show horizontal scrollbar? its not showing to me...

you can check that on the first example

Hi,

When we have fixed header, vertical scrollbar has incorrect size. Because its height without subtraction height fixed header.
Please see attachment for more details.

I hope you will fix it at the nearest time
Thanks, Alex!

It'd be nice to be able to opt out of column resizing, row resizing, or both, and instead use fixed column widths, mainly for performance reasons.

Hello,

I have a basic react-sticky-table setup with a fixed header. The sticky header keeps jumping behind the scrolling content:

The already applied z-index's seem to be getting ignored. A window resize fixes the issue. Any ideas on why this may be happening or a fix?

Note: appears to be in Chrome only, after scrolling the outer page.

Thank you.

I have a problem, where after changing the contents of the table the horizontal scrollbar doesn't allow for scrolling all the way to the right. This can even be seen on your demo page, in the "Changing Content" section.

Before changing to the new content, with the scrollbar all the way to the right:

After changing to the new content, with the scrollbar all the way to the right:

Columns 15-19 are not visible. You can still scroll to them by using a touchpad or by highlighting:

I'm on OSX, the issue is present in Chrome, Firefox and Opera. Safari doesn't display the scrollbars, so no issues there :)

<Row>
   <Cell>
      <Checkbox />
    </Cell>
    { headers.map(header =>
      <Cell
        key={ header.key }
      >
        { header.name }
      </Cell>
    )}
</Row>

that code throws Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Could you please assist?

Is it possible to have sticky rows at the bottom?

Hi there :-)

Just getting my head around this component and have come across a little issue.

When I produce a table like so there is no problem:

const DaysTable = ({ dates, emptyFirst, hideTitle, rows, onClick }) => {
  return (
    <div style={{ width: '100%', height: '200px' }}>
      <StickyTable>
        <Row>
          {emptyFirst && <Cell />}
          {dates.map(day => <Cell key={day}>{moment(day).format(dayFormat)}</Cell>)}
        </Row>
      </StickyTable>
    </div>
  );
};

However I want to move the creation of the row into a separate file:

index.js

import TableHeader from './table-header';

const DaysTable = ({ dates, emptyFirst, hideTitle, rows, onClick }) => {
  return (
    <div style={{ width: '100%', height: '200px' }}>
      <StickyTable>
        <TableHeader dates={dates} emptyFirst={emptyFirst} />
      </StickyTable>
    </div>
  );
};

table-header.js

const DaysTableHeader = ({ dates, emptyFirst }) => {
  return (
    <Row>
      {emptyFirst && <Cell />}
      {dates.map(day => <Cell key={day}>{moment(day).format(dayFormat)}</Cell>)}
    </Row>
  );
};

However when I do so I get the error in console:

I'm not quite sure what I'm doing wrong here. This would usually work fine... Any thoughts?

Hi,

Do you provide links to sources over a CDN? If not: please advise: is it possible to use showcasing environment like jsfiddle?

Best regards,
Vladimir

I just tried to replace my dynamical <table> with the <StickyTable/> but it doesn't work.
Sometimes I see the error

Uncaught in promise TypeError: row.type is not a constructor

Or sometimes the error

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

I didn't find a solution yet.

Code :

<div className="table-container">
<StickyTable className="table table-sm table-striped table-hover">
       {this.state.rows.map((line, i) => {
              return (
                    <Row key={i}>
                           {line.map((cell, j) => <Cell key={j} onClick={() => this.handlePeopleClick(cell.personNumber)}>{this.getFormatedValue(cell,j)}</Cell>)}
                     </Row>
                 )
         })}
</StickyTable>
</div>

The cells have a width set on the but how does it calculate them but my table is as thin as possible. How do I make it space it out?

I'd like to move my rows into separate components. The purpose is to make them pure components, so they don't need to be individually re-rendered if I sort the array of objects that generates them.

So I modified the example on the home page to look like:

import React, { Component } from 'react';

import { StickyTable, Row, Cell } from 'react-sticky-table';
import 'react-sticky-table/dist/react-sticky-table.css';

class SampleRow extends Component {
  render() {
    return (
      <Row>
        <Cell>Cell 1</Cell>
        <Cell>Cell 2</Cell>
      </Row>
    );
  }
}

export default class App extends Component {
  render() {
    return (
      <div>
        <div style={{width: '100%', height: '400px'}}>
          <StickyTable>
            <Row>
              <Cell>Header 1</Cell>
              <Cell>Header 2</Cell>
            </Row>
            <SampleRow />
          </StickyTable>
        </div>
      </div>
    );
  }
}

But this results in an error:

TypeError: Cannot read property 'style' of undefined
(anonymous function)
node_modules/react-sticky-table/dist/index.js:359

  356 | }
  357 | 
  358 | cells.forEach(function (cell) {
> 359 |   return cell.style.height = '';
  360 | });
  361 | 
  362 | columnHeight = Math.max(_this3.getNodeSize(cells[0]).height, _this3.getNodeSize(cells[1]).height);

Version 2.0.1.

Getting error at:
//IMPORTANT: minWidth is a necessary property here
//because display: table-cell desparately wants to be dynamic/minimum in size
cells.forEach(function (cell) {
return cell.style.width = cell.style.minWidth = '';
});

The README states how the StickyTable component takes an onScroll function as a prop that gets called with an object, seen here

On the most recent version of react-sticky-table, this onScroll handler never gets called. Was this intentional? If not, could this be added back? I have added some code to do it on a forked copy of this repository. If you want to take a look, you can find the diff here

Hi! I've come across this repo, I find it very useful.

My question is, can I have an empty cell so the previous cell expands vertically?

Could you please add the prop to the cell to make it sticky from the right?

is there any interest in migrating this package to Typescript?

I can help with the migration, I'm using it for a client in a Typescript codebase and I think it would be useful since the package is not that big.

let me know!

If you import connected children, table does not render.

It seems like mandatory feature, and unfortunatelly i can't use it without it. Maybe on the weekend i'll work on fixing this issue.

we should use prepare npm script to build this package when publishing version to npm, instead of adding more noise on pull requests diffs

like this https://github.com/entria/mongo-aggregate-lodash/blob/master/package.json#L57

StickyTable.render() always re-renders Rows even if row content didn't change

This is most apparently a bug when sort is triggered. Each Row doesn't change, it just moves around.

I'm not sure a solution is realistic, but if it was it would probably involve some kind of detection to determine the reason the render happened (whether it was sort or not). We'd probably need to implement sorting ourselves for this to work reliably.

@jacobweber

I cloned this project and try to run test but got a error at setTimeout function.
I guess the test is failed because of mount in enzyme. It's working when using shallow instead but I need to use mount function in my case.

Anyone help me to fix? Thanks in advance

I can listen to onScroll, I'd like to reset the scroll position with this information.

Use Case:
I've got a table where I can reorder the columns by dragging. When I have a wide table that is scrolling offscreen the table rerenders after the column order changes, but I then have lost my scroll position within the table.

It'd be nice to be able to set the "defaultValue" for scroll x and scroll y.

column and row resize ui possible ?

StickyTable needs to be able to handle 0 cells total.

if we have 0 rows we need to show no data row

Is there a way to style the Row element?

using storybooks will make it easy to run examples locally, so we can make sure we don't break when changing something

is there any interest in migrating this package to use a CSS-in-JS technology like styled-components or emotion?

I understand that the use of pseudo-selectors is what makes it complex to use a technology like this without increasing the bundlesize, but I think it will be a lot cleaner for the codebase and maybe we can maintain the performance.

I can help with the migration, I'm using it for a client in a Typescript codebase and I think it would be useful since the package is not that big.

let me know!

I'm at the end of the table, and the scrollbar is not positionned correctly at the end (on Chome + IE11)

Code is pretty simple:

const StickerHeaderTable = ({ headers, rows }) => (
  <div css={{ width: '100%', height: '100%', border: 'solid thin yellow' }}>
    <StickyTable stickyColumnCount={0} stickyHeaderCount={1}>
      <TableRow>
        {headers.map((header, i) => (
          <Cell key={i}>{header}</Cell>
        ))}
      </TableRow>
      {rows.map((row, i) => (
        <TableRow key={i}>
          {row.map((cell, j) => (
            <Cell key={j}>{cell}</Cell>
          ))}
        </TableRow>
      ))}
    </StickyTable>
  </div>
);

 <StickerHeaderTable
        headers={[
          <div css={{ padding: 20, minWidth: 500 }}>column A</div>,
          <div css={{ padding: 20, minWidth: 500 }}>column B</div>,
          <div css={{ padding: 20, minWidth: 500 }}>column C</div>,
        ]}
        rows={[
          ['first', '1 b', '1 c'],
          ['2 a', '2 b', '2 c'],
          ['3 a', '3 b', '3 c'],
          ['4 a', '4 b', '4 c'],
          ['5 a', '5 b', '5 c'],
          ['6 a', '6 b', '6 c'],
          ['6 a', '6 b', '6 c'],
          ['6 a', '6 b', '6 c'],
          ['6 a', '6 b', '6 c'],
          ['6 a', '6 b', '6 c'],
          ['6 a', '6 b', '6 c'],
          ['6 a', '6 b', '6 c'],
          ['6 a', '6 b', '6 c'],
          ['6 a', '6 b', '6 c'],
          ['6 a', '6 b', '6 c'],
          ['6 a', '6 b', '6 c'],
          ['last', '6 b', '6 c'],
        ]}
      />

here you are doing
https://github.com/henrybuilt/react-sticky-table/blob/master/src/index.js#L47

  componentDidMount() {
    this.table = document.getElementById('sticky-table-' + this.id);

why don't you use a ref instead? https://reactjs.org/docs/refs-and-the-dom.html

render() {
  [...]
    return (
      <div className={'sticky-table ' + (this.props.className || '')} ref={(tableWrapper) => this.table = tableWrapper}>

this is causing trouble in my react app

how to have an attribute like colspan for the element cell?

Hey, not sure why this is happening, but I keep receiving the following error:

Here is my code:

My current react setup is simply the one I downloaded from here https://github.com/facebook/create-react-app.

Any ideas as to what is causing this issue? Really want to use this sticky table!

Hi guys,
Before forking the project, to implement this I prefer to ask if this not already done somewhere! I understood that it was implemented in version 2, but in v3 it does't seem to be possible to have multiple sticky columns isn't it?

The horizontal scrollbar does not show in Safari. This can be seen using the demo.

From the README:

Responsive table dimensions (wrap it in any size container and it will fill that container)

Does this also apply to tables that are naturally smaller than the container, e.g. should it expand the column widths to fill the container? I'm not seeing this. For example, this table doesn't take up the full 600px:

import React from 'react';
import { StickyTable, Row, Cell } from 'react-sticky-table';
import 'react-sticky-table/dist/react-sticky-table.css';

export default class App extends React.Component {
	render() {
		return (
			<div style={{border: '1px solid red', width: '600px', height: '300px'}}>
				<StickyTable stickyHeaderCount={0} stickyColumnCount={0}>
					<Row>
						<Cell>A</Cell>
						<Cell>B</Cell>
						<Cell>C</Cell>
					</Row>
				</StickyTable>
			</div>
		);
	}
};

It would be a nice thing to add virtual dom implementation to the table. It would fasten rendering of large tables by a lot.

See video
https://penegue-gmail.tinytake.com/sf/MjY2NTU0MF83OTk5OTAz
The scrollbar is jumping, when there are no interactions. Testing the demo here https://henrybuilt.github.io/react-sticky-table/ .

Google Chrome    66.0.3359.181 (Official Build) (64-bit) (cohort: Stable)
Revision    a10b9cedb40738cb152f8148ddab4891df876959-refs/branch-heads/3359@{#828}
OS    Windows

Suppose you create a table with 10 rows and 4 columns. When all 40 cells have content, then layout is fine. All 4 cells in each row do align (same height).

When however, some cells don't have content, layout is messed up. The height of the empty cells is different (less) than the height of other cells (at the same row). Wich causes all cells below (in the same column) to be shifted slightly upwards, causing misalignment of the 4 cells in the same row.

Example (with data blurred, but the issue should still be clear). The circle is drawn to point the empty cell, having a smaller size than other cells in same row. Thus causing misalignment issue.

I've worked around this, by avoiding empty cells and if cell content would be empty instead add a with a non-breaking space inside.

I'm using react-sticky-table in a Gatsby project. At the building stage, when the site is statically rendered with "gatsby build" command, the process fails with error:

" WebpackError: navigator is not defined

• index.js:198 new StickyTable
  ~/react-sticky-table/dist/index.js:198:1"

Seems like vertical scroll only works when dragging the sticky column. But when dragging the table itself there is no scroll in the table (the page scrolls instead). And without sticky column it’s impossible to scroll the table

Hi,

I have a small sticky table with sticky header, and I give .sticky-table-table 100% to fill the container width.

When the screen width is growing, the setColumnWidths method is called to recalculate the column width, the new width and min-width are added to the column inline styles.

Then when we shrink the screen size back, the table size is not shrinked and a horizontal scroll bar is added. After I take a look at the source code, I found setColumnWidths is not called because the 'tableCellSizesChanged' is NOT true, and the reason is that the min-width in the column causes the 'bodyTable.offsetWidth' not decreasing even if its container width decreases. Below is the related code:

    ` var tableCellSizes = {
      corner: { width: this.dom.stickyCornerTable.offsetWidth, height: this.dom.stickyCornerTable.offsetHeight },
      header: { width: this.dom.stickyHeaderTable.offsetWidth, height: this.dom.stickyHeaderTable.offsetHeight },
      column: { width: this.dom.stickyColumnTable.offsetWidth, height: this.dom.stickyColumnTable.offsetHeight },
      body: { width: this.dom.bodyTable.offsetWidth, height: this.dom.bodyTable.offsetHeight }
    };

    var tableCellSizesChanged = JSON.stringify(tableCellSizes) !== JSON.stringify(this.oldTableCellSizes);

    var wrapperSizeChanged = JSON.stringify(wrapperSize) !== JSON.stringify(this.oldWrapperSize);

    if (forceCellTableResize || !this.oldTableCellSizes || tableCellSizesChanged) {
      this.setRowHeights();
      this.setColumnWidths();

      this.oldTableCellSizes = tableCellSizes;
    }`

I understand the min-width is to make the cell's width be dynamic, but how could we solve the shrink problem caused by it? Thanks

I've followed your demo and have width and height set in the <div> wrapping the <StickyTable> component. I want to make the table responsive and adjust based on the number of rows in the table but can't seem to figure out how to do so. If I change height to auto or use maxHeight, the table loses the sticky headers and now scroll with the rows.

As you can see here, the blue is the wrapping

Hi,

How can I set multiple sticky row? I tried with stickyHeaderCount={4}, but it isn't working.

Thanks,