Comments (5)
This seems like your implementation problem. What would you expect TanStack Table to do differently?
from table.
This is the exact same example as from the https://tanstack.com/table/latest/docs/framework/react/examples/column-pinning-sticky but with the fixed width style removed. If the TanStack recommendation is to use column.getStart('left')
to determine the position of the sticky column, I would expect it to react to a fluid table width. column.getStart('left')
doesn't actually report the start of the column which is confusing.
from table.
@thomassimko Adding a minWidth along with width fixes it
Otherwise, you'll just have to change the width's and start values to use percentages or something if you actually want to allow the columns to squeeze
from table.
So based off your response, this library does not support pinned columns in a fluid table without specifying the width of the column as px percentages. Currently I am using a ResizeObserver that is calculating each column's bounding rect in order to calculate the true position of the pinned column, rather than using the library's getStart
methods. I was hoping that there would be a cleaner way to achieve this.
from table.
@thomassimko I guess I don't get what you would expect. TanStack Table doesn't really have a way of knowing if you change the total width of the table or not. It you are using it's size system, it expects the elements to be styled to be that exact size. If you are allowing columns to be squished together, how would the table instance know, and how would it measure?
from table.
Related Issues (20)
- How to add onClick with useState hook in cell. Error re-renders because of getRowModel()
- [Vue warn]: Invalid VNode type: Symbol(react.fragment) (symbol)
- Column Virtualisation is not working in case we have grouped columns
- "regeneratorRuntime is not defined" error in documentation example
- hello world example gives multiple errors, starting with "Can't resolve 'crypto' " HOT 1
- createColumnHelper's DeepKeys fails to properly resolve keys for accessor
- Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length') at getFacetedUniqueValues.ts:20:38
- Filters are not working with react table infinitescrolling HOT 1
- getVisibleLeafColumns The header of the getVisiBleleafColumns column is misaligned when the groups configuration is included
- Column visibility APIs do not work with column groups
- sortingFn: 'alphanumeric' returns numbers last HOT 1
- Site not loading HOT 10
- your website is down HOT 6
- useQwikTable undefined sorting handlers [QwikCity} HOT 2
- Maximum update depth exceeded when hide virtualize table
- how to allow only table to expand one row at a time HOT 2
- Angular Table Column Filters and Column Grouping Examples not working HOT 3
- Does React 18 work with v6? HOT 1
- `Infinity` is not supported for pageSize HOT 2
- Table doesnโt re-render with new React Compiler + React 19 HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from table.