React-table: Sticky columns

[visarts]

Is there any plan to add a feature for fixed or 'sticky' columns allowing for horizontal scrolling, in addition to vertical

[rickevans]

I have this same problem as I would like to have the first two columns fixed in my table and have the rest of the table contents scroll

[x5engine]

nice to have

[gary-menzel]

There are no sticky columns. The package needs a complete redesign for this. Sorry.

[OliverKK]

Hello @gary-menzel ,
can you estimate how much effort that would mean?
We are thinking about funding the development of the feature.
I think there are many users who might need this feature.

What are u guys think?
@jsonmaur
@sghall

[dvdhsu]

We would probably fund this with a few hundred $.

[gary-menzel]

You'll have to talk to @tannerlinsley in regard to any paid-for development. My commercial rate is $100 per hour and I doubt a "few hours" will get this done as the whole architecture of ReactTable needs to be changed to do it (and I don't have the available hours to do a re-architect of RT). Seriously - if it were that easy it would already be done (others - including myself - have tried to do it in the current design and it just not feasible).

[tannerlinsley]

It would require upwards of at least 5k paid work to do this. As they have
said, this would require an architecture redesign that could take a month
at least.
On Mon, Apr 2, 2018 at 12:20 AM Gary Menzel [e-mail]
wrote:

You'll have to talk to @tannerlinsley https://github.com/tannerlinsley
in regard to any paid-for development. My commercial rate is $100 per hour
and I doubt a "few hours" will get this done as the whole architecture of
ReactTable needs to be changed to do it (and I don't have the available
hours to do a re-architect of RT). Seriously - if it were that easy it
would already be done (others - including myself - have tried to do it in
the current design and it just not feasible).

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/react-tools/react-table/issues/848#issuecomment-377864713,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCdEoHD1J6HWhtnP0eOEWek98wp1Zks5tkcMtgaJpZM4SiuJ_
.

[tannerlinsley]

If someone does decide to take this on be sure to outline the architecture
redesign in a proposal so Gary and I can approve it ultimately merge it.
Would hate to see someone spin their wheels on paid open source!
On Mon, Apr 2, 2018 at 12:32 AM MeteorPlus [e-mail] wrote:

$3k and I'll do it in less than a week!

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/react-tools/react-table/issues/848#issuecomment-377866286,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCTl0FM4Wpj6lZJ3HqLio7CSi3-rrks5tkcYBgaJpZM4SiuJ_
.

[dvdhsu]

Sorry - I didn't mean to imply a "few hours" would cut it - I know this is a big feature! But we would chip in a few hundred... and with 10 or so of us - that might be enough!

Agreed about open sourcing the results and checking with @tannerlinsley + @gary-menzel about it first.

So - is there anybody else willing to contribute?

[OliverKK]

@dvdhsu
Yes. We are willing to contribute also.

What about starting a kickstarter project to fund this feature?

[JohanDuque]

It would be great to have not only the first column sticky but also a customisable one (the last one for example)

[ahmedhosny]

Great repo over here - but I opted to use scrollsync in react-virtualized for this specific purpose.

[x5engine]

@ahmedhosny yes looks the same as I did but that is too much extra code for just one simple thing that can be done without adding any extra library...

[GuillaumeJasmin]

Hi,
I juste release my workaround, with demo here:
https://guillaumejasmin.github.io/react-table-hoc-fixed-columns/

It's a simple HOC, with some tricks. I know it's not the best solution, but it work now, and I think it can be useful for others people here. It could be use until a full support of fixed columns in ReactTable. I haven't used it with more complex table, so feedback will be appreciated.

I release it for $0, amazing, no ? ;)
ReactTable is an amazing tool, I tried many others table tools before find it, and there no equivalent. I don't understand developers who use it and want money to contribute. You should be satisfied that ReactTable was shared, stop abuse !

[OliverKK]

Hi @GuillaumeJasmin ,
thank you. The first tests passed so far. I'll give it a try.
I will have a closer look at the extension in the next days.

UPDATE:
@GuillaumeJasmin Thank you for your effort to implement the sticky column HOC. It works greate.

@meteorplus
Thank you for your efford too. I will have a look at your implementation as well, as soon as it is available :+1:

Kind regards

[x5engine]

@GuillaumeJasmin thanks mate but listen I never abused anyone! even the author suggested a hourely rate before I jumped in and even @OliverKK offered to fund this!

and keep in mind not everyone has a stable job or a monthly salary...

we hustle like this so we can pay our bills, and this is how open source works!

otherwise, I am gonna release this into my repo https://github.com/meteorplus/react-table for free, I don't give a fuck if it wasn't for my rent else I won't care.

edit: my solution doesn't involve a new component or anything more just pure CSS and has two options fixed vertical and horizontal columns!

[Oleksandr-Silin]

@meteorplus Hey, just wondering, have you released your changes?

[pmusaraj]

I wound up using a semi-simple solution to do this for one frozen column (Guillaume's HOC supports multiple), it involves a few steps:

1. In your column's definition, add className: 'frozen' and headerClassName: 'frozen'.

2. In your css add the following:

````
.rt-tr {
position: relative;
}
.frozen {
position: absolute;
left: 0px;
background: #F8F8F8;
height: 36px;
transition: left 0.2s;
}

  .rt-th.frozen {
    z-index: 2;
    height: 34px;
  }

````
(YMMV, some of the styles above are specific to my use. Like the height of the cells, for example. You may also need to add some more styles to make this work with striping and highlighting.)

1. Add a callback to the ReactTable's onResizedChange. For example:

<ReactTable onResizedChange={_.debounce(this.onTableResizeChange, 10)} ... />

(Notice that I'm using Underscore's debounce to avoid calling this too often on a resize.)
And the onTableResizeChange looks like this:

````
onTableResizeChange(params) {
let frozenCol = this.state.frozenColumn,
padLeft = 0;

if (frozenCol) {
  if (params && params[0].id === frozenCol) {
    padLeft = params[0].value;
  } else {
    padLeft = $('.ReactTable .rt-th.frozen').width() + 10;
  }

  $('.ReactTable .rt-tr').css('padding-left', padLeft + 10);
} else {
  $('.ReactTable .rt-tr').css('padding-left', 0);
}

}
````

So, this will make sure that the frozen column can be resized and that the other table columns will adjust accordingly.

1. Final step: add an onScroll event to the table properties, and then change the position of the absolutely positioned column, so that it looks frozen in place.

<ReactTable getTableProps={() => { return { onScroll: (e) => { if (this.state.frozenColumn) { if (this.tableScrollTop === e.target.scrollTop) { let left = e.target.scrollLeft > 0 ? e.target.scrollLeft - 12 : e.target.scrollLeft; $('.ReactTable .rt-tr .frozen').css({left: left}); } else { this.tableScrollTop = e.target.scrollTop; } } } }; }} ... />

Note that the onScroll relies on this.tableScrollTop to only change the position of the frozen elements when scrolling horizontally. this.tableScrolltop is initialized in the constructor, like so:

constructor(props){ super(props); this.tableScrollTop = 0; }

[krzysiek1507]

You can use position: sticky to do it. Example (please check css file)

[datanotion]

The solution from @krzysiek1507 worked for me. Next I'm going to try to determine how to freeze the grouping header as well. Thank you!

[krzysiek1507]

You're welcome!

@datanotion you can try this!

[krzysiek1507]

No, it doesn't work. Sorry! It breaks the table!

There is a problem with overflow: auto and position: sticky. Maybe some CSS master can fix it.

[x5engine]

@krzysiek1507 @Oleksandr-Silin here is my solution

https://codesandbox.io/s/pk19p2pm17
The first column is locked I don't have time to add it to the repo but you have the whole css there working fine with all browsers out there no stick or fancy css.

If I find the other horizontal lock for the first rows I will post it here too thanks.
Enjoy for free!

[GuillaumeJasmin]

I currently work on support of fixed group header in react-table-hoc-fixed-columns . I think release it in few days.

[pmusaraj]

I worked on a slightly lighter and better solution (mostly due to a bug in Safari). Here is the sandbox: https://codesandbox.io/s/k9n3y82wov

I tested on Safari/Chrome/Firefox. The frozen column can be any column, and all columns can be resized.

[tannerlinsley]

There is no direct roadmap to support Sticky Columns in the latest version of React Table.

[GuillaumeJasmin]

Hi,
I released a v1 beta of react-table-hoc-fixed-columns.

New features

• fixed columns groups
• fixed columns on the left and/or right side
• complete refactoring, no more DOM and CSS hacks, so better performances

You can install it with the tag next:

npm install react-table-hoc-fixed-columns@next

Demo

https://codesandbox.io/s/jnjv6j495y

Release note

https://github.com/GuillaumeJasmin/react-table-hoc-fixed-columns/releases/tag/v1.0.0-beta.3

Docs

https://github.com/GuillaumeJasmin/react-table-hoc-fixed-columns/tree/next

[timendez]

Using position: sticky will work as per @krzysiek1507's example, and you can polyfill for unsupported browsers with https://github.com/wilddeer/stickyfill

[GuillaumeJasmin]

position: sticky doesn't work for me with 2 fixed columns, or with fixed groups

[ykantamaneni]

@GuillaumeJasmin does v1 beta of react-table-hoc-fixed-columns support fixed header as well or just fixed column?

I don't see that working in the demo here...
https://codesandbox.io/s/jnjv6j495y

Thanks

[GuillaumeJasmin]

fixed header or fixed columns with group header ? fixed header (vertical scrolling) works by default in ReactTable.
react-table-hoc-fixed-columns add support for fixed columns, and fixed columns with header group.

Example of fixed header: https://react-table.js.org/#/story/fixed-header-w-vertical-scroll

[GuillaumeJasmin]

Stable v1 of fixed columns HOC is just release

Demo: https://codesandbox.io/s/jnjv6j495y

Source & docs: https://github.com/GuillaumeJasmin/react-table-hoc-fixed-columns

[epicfaace]

@tannerlinsley -- now that we have the fixed columns HOC by @GuillaumeJasmin , is this something that could potentially be merged as a feature in react-table?

[piotrkochan]

@GuillaumeJasmin does not work with react v7.0.0

[GuillaumeJasmin]

@piotrkochan issue already addressed here react-table-hoc-fixed-columns/issues/53

I just start react-table-sticky which is for react-table v7

[nitishnivedan]

@GuillaumeJasmin
Hi,

I am using this react-table-hoc-fixed-column to freeze certain columns. My each row in the table has inline edit (For ex. in each row, one column has dropdown).

The problem with this hoc is when I change value of any row's drop down it comes back to first page (like a fresh render).

For example I am in page 2 and i edit any row then it comes back to 1st page. Although data is being retained.

Will really appreciate any lead.

"react-table": "^6.10.3",
"react-table-hoc-fixed-columns": "^2.3.3",

[Note: my code works totally fine when I use the react-table, it doesnt come back to first page]