guillaumejasmin / react-table-sticky Goto Github PK
View Code? Open in Web Editor NEWSticky hook for react-table v7
License: MIT License
Sticky hook for react-table v7
License: MIT License
Thank you for creating this awesome lib. It helps me a lot.
it would be nice to give users the ability to set sticky manually for columns. It is like setting visible, hidden column function in react-table. A column should have sticky
and setSticky
property, similar to isVisible
and toggleHidden
of useTable() https://react-table.tanstack.com/docs/api/useTable#column-properties
Hey - this hook is very useful and should be mentioned on the react-table readme - thank you!
I am trying to modify the example provided and make it go full width, and adapt the width of the columns. Do you have any suggestions for this?
I tried to combine your plugin with the useGroupBy hook and it doesn't work, can it be fixed somehow or does your plugin have limitations on hooks it can work with?
Link to codesandbox: https://codesandbox.io/s/react-table-sticky-official-forked-l3hkth?file=/src/App.js:2166-2176
Can't we use semantic <table>, <thead>, <tbody>
markup and have sticky headers/column too?
Hi everyone,
Sticky Columns do not seem to work on Safari.
Safari: Version 12.0 (14606.1.36.1.9)
Currently the only way to check if a cell is sticky is by doing cell.getCellProps()['data-sticky-td']
which feels a bit hacky. It would be nice to add support for cell.isSticky
.
Hi there! Thanks for this library! It's awesome to expand on features of a large libraries.
I'm wondering if you've considered opening a PR to add this feature to the react-table library itself. I don't know what Tanner thinks of the feature, but IMO this seems like a natural addition.
And selfishly, I maintain a component library that will encourage its use with react-table, and it would be nice to point users to react-table only, instead of having to seek out other plugins!
I noticed that the headers of the sticky columns are jumpy when side-scrolling on iOS devices.
Here's a recording of a slightly modified demo (just removed some of the table structure from the demo).
You can see that only the headers present this behaviour and not the entire sticky column.
One of the perks to react-table v7 is the ability to integrate react-window's FixedSizeList to create a virtualized table. Unfortunately, it seems react-table-sticky doesn't work when using FixedSizeList as the table body component -- the header cells of sticky: 'left'
columns are indeed sticky, but the cells move. With the same setup of react-table-sticky but replacing FixedSizeList with a standard mapping of divs as the body, I can get sticky columns. Is this library meant to handle the FixedSizeList/react-window integration in react-table?
For now, I have a workaround where I am putting two FixedSizeLists adjacent to each other in the body and using their scrollTo/onScroll methods to stay in sync.
Is there any example available that shows a sticky column with useFlexLayout and column resize?
the app is not working with the latest version of react table
Just like how useGroupBy changes grouped columns to be ordered first, please make sticky state to affect the columns' order.
Here's an example of the unwanted behavior, for instance when setting a 3rd column a sticky: "left"
prop: https://codesandbox.io/s/react-table-sticky-official-forked-di4zg
TypeError
Cannot read property 'sticky' of undefined
I am trying to make 2 columns left-sticky. The first column is fine, but for some reasons the 2nd one is not right next to the first one. Instead for some reasons it has style left:150px;
and ends up on top of the 3rd column, which is not sticky.
I tried to set left:auto !important
for the 2nd column but it is no longer sticky. Really appreciate any help.
This library is awesome, was searching for react-table 7 with sticky columns and found this one! 👏 👏 . I need to ask if there is support for react-window with sticky columns or maybe an example? I'm trying to combine react-table + this library + react-window but apparently the react-window styles mess with the styles from this library as far as I can see.
Any recommendation? advice? Maybe it's in the roadmap?
Thanks.
I have a basic Table
component:
import React from "react";
import { useTable, UseTableOptions } from "react-table";
import { useSticky } from "react-table-sticky";
export type TableProps<D extends object = {}> = UseTableOptions<D>;
const Table = <D extends object>(props: TableProps<D>) => {
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(props, useSticky);
return (
<table {...getTableProps()}>
...
</table>
);
};
export default Table;
And this is how I call the component:
<Table columns={columns} data={data}></Table>
The thing is, when I try to statically declare the columns
, I get the following error:
type '{ id: string; Header: string; sticky: string; columns: ({ Header: string; accessor: "name"; } | { Header: string; accessor: "status"; } | { Header: string; accessor: "createdAt"; })[]; }' is not assignable to type 'Column<AdvertiserColumns>'.
Object literal may only specify known properties, and 'sticky' does not exist in type 'Column<AdvertiserColumns>'.ts(2322)
Which is correct, because in the end it points to this interface:
export interface UseTableColumnOptions<D extends object> {
id?: IdType<D>;
Header?: Renderer<HeaderProps<D>>;
width?: number | string;
minWidth?: number;
maxWidth?: number;
}
I know I can simply remove the typing Column<AdvertiserColumns>[]
, but then it might lead to some bugs (e.g write header
instead of Header
). Any ideas?
Take a look on my branch. I changed the logic to stick columns from any position, not only from far left/right. I use it with useFlex
hook, it works like charm. However, needs to update tests and demo.
hi . how to handle rtl for your library ?
react-table-sticky
fails with an error
Cannot read property 'sticky' of undefined
when using headergroups with depth having more than 1.
{
"id": "name_details_container",
"Header": "Name Details",
"sticky": "left",
"Footer": "Name Details",
"columns": [
{
"Header": "Name",
"Footer": "Name",
"columns": [
{
"Header": "First Name",
"Footer": "First Name",
"accessor": "firstName"
},
{
"Header": "Last Name",
"Footer": "Last Name",
"accessor": "lastName"
}
]
}
]
}
Following is a reproducible example:
https://codesandbox.io/s/react-table-sticky-official-r4hjg?file=/src/App.js
I understand that position: sticky does not work in IE11 but there is no reason, when this library is used, not to have a working page. At the moment you load the code in IE11 it throws exeption like this:
The moment I comment out the useSticky hook, the error is gone.
You can see that IE11 is not very helpful in resolving the issue. Could someone help with that? Do I need some kind of polyfill?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.