Comments (26)
I think this is an important feature.
Feel free to narrow down the scope of the behavior.
For instance, it is not unreasonable to require that all widths be percentages when using fractions.
Admittedly this is a tradeoff, but hard-coding the width is definitely not ideal.
from table.
Given react-table is using flexbox, wouldn't it make sense to allow setting the flex-grow and flex-shrink properties of each column instead of percentage widths? That should give you similar results if I understand flexbox correctly.
from table.
How to do that properly in 2024?
from table.
a solution to this could be something as simple as:
This would give your particular column a screen width of 20% ; not very dynamic though.
width: Math.round(window.innerWidth * 0.2)
from table.
@sean-magin
a solution to this could be something as simple as:
This would give your particular column a screen width of 20% ; not very dynamic though.
width: Math.round(window.innerWidth * 0.2)
This is very useful, we can add a global event listener and just regenerate the data when the window size changes.
const getColumns = () => {
return [
{
Header: 'Name',
accessor: 'name',
id: 'name',
width: Math.round((window.innerWidth - 55) * 0.2),
disableFilters: true,
},
{
Header: 'Age',
accessor: 'age',
id: 'age',
width: Math.round((window.innerWidth - 55) * 0.2),
disableFilters: true,
},
{
Header: 'Visits',
accessor: 'visits',
id: 'visits',
width: Math.round((window.innerWidth - 55) * 0.2),
disableFilters: true,
},
{
Header: 'Last Visit',
accessor: 'last_visit',
id: 'last_visit',
width: Math.round((window.innerWidth - 55) * 0.2),
disableFilters: true,
},
{
Header: 'Status',
accessor: 'status',
id: 'status',
width: Math.round((window.innerWidth - 55) * 0.2),
disableFilters: false,
},
];
};
const [columns, setColumns] = useState(() => getColumns());
useEffect(() => {
const resizeCols = () => {
setColumns(() => getColumns());
};
window.addEventListener('resize', resizeCols);
return () => {
window.removeEventListener('resize', resizeCols);
};
}, []);
from table.
I'm really surprised this does not exist. Seems like a really useful / standard feature for a table. Hard-coding widths gives basically 0 flexibility for window resizing.
from table.
@colomar We managed to use flex-grow in this case and it does the trick:
CSS:
.react-table-column-flex-grow-1 {
flex-grow: 1 !important;
width: unset !important;
flex-basis: 5px !important;
max-width: none !important;
}
JS
getTdProps={( state, rowInfo, column, instance) =>
({ className: `react-table-column-flex-grow-${column.flexGrow}` })}
Also, don't forget to set a flexGrow property in the relevant column(s):
Header: "Reference"
accessor: "refId"
flexGrow: 1
width: 100 // you could also play with the width value
from table.
a solution to this could be something as simple as:
This would give your particular column a screen width of 20% ; not very dynamic though.
width: Math.round(window.innerWidth * 0.2)
you can do like this too,just pass variable value as decimal value like 20 which means 20%.check the example with image.
width: Math.round(window.innerWidth * (value/100))
from table.
@tannerlinsley any update for using percentage values on minWidth, maxWidth and width?
from table.
from table.
any update for using percentage values related to width?
from table.
This is a great question. I'm trying to think how that would work with flexbox right now. Would you expect the percentage to be relative to the width of the table viewport? I'll have to experiment with this :)
from table.
Yes, exactly! What I really need is to set relative scaling. So, if I have 4 columns, and I want the 1st column to be twice the size of the others, the flex
properties would be 40, 20, 20, 20, respectively, rather than all 25.
from table.
(sorry didn't mean to actually close this)
from table.
Still working on this. I did just add support for all pixel widths though. minWidth, width, and maxWidth
from table.
the more I'm getting into this, I'm not sure if it's going to work exactly how I was thinking. Especially when mixing percentage widths with min/max widths and static widths. I'm going to keep working on it, but just wanted to report back on the difficulty ;)
from table.
Thanks for the help! We could overwrite inline styles with css and !important
but would prefer if we didn't have to go through all that
from table.
Absolutely. I'm with ya. I'll give it a fresh look this week and see if I can't achieve it another way ;)
from table.
Closing this one for now. Multiple attempts have been made and nothing seems to get the job done correctly. I'll keep trying as the code matures.
from table.
Any update on this yet?
from table.
or could you do something like colspan
to support flexibility?
from table.
@Joaquinox Thanks for this. looks great.
to clarify - in your code above. flexGrow: 1
turns it on? Where are you actually setting the percentage?
from table.
@yniknafs Apologies, this is a workaround to setting a percentage. We are simply setting the flexGrow property as per docs.
from table.
I have a very hacky plugin hook to use alongside flex layout. When I say hacky, I mean hacky -- use with caution. It even works with resizable columns. Here it is: gist.github.com/adamscybot/65df3ce2b155c20c8b867786ef612e72
from table.
@evilPaprika how did you solve this?
from table.
I also needed columns to have a given fraction of the overall table and came up with the following solution:
https://gist.github.com/DreierF/0511d58d36c3ac2aaa0aa68807efb912
It can be plugged in as a feature into Tanstack Table v8 and allows to specify column sizes either as pixel values or fractions of the remaining table space. Would also be easy to extend this to percentage, but IMHO fraction is easier to deal with as you don't need to ensure that the values add up to 100%. Maybe this is a helpful starting point for others facing a similar challenge.
from table.
Related Issues (20)
- Unexpected behavior of array filterFns (arrIncludes, arrIncludesAll, arrIncludesSome) HOT 1
- Table v8 expanding - incorrect state of parent checkbox when selecting subrows HOT 1
- `getTopRows()` and `getBottomRows()` Not Referentially Stable Between Renders
- Calling `row.getParentRow()` with expanded, filtered row models and initial filtering value throws an error HOT 1
- Table sorting is not working when drag and drop of columns is used HOT 1
- Custom sortingFn not being run when row key is undefined
- [Angular] In the example, column sorting does not work. HOT 2
- Global filter only works with string and number types
- To use @Tanstack Table/vue-table, you must import the core package, but the documentation does not specify this HOT 2
- Sub components are overlapped with successive rows HOT 1
- Bug Report: cell.isGrouped Always Returns false Despite enableGrouping Being true (REACT) HOT 2
- The left position of pinned columns in the sticky table is calculated incorrectly HOT 2
- cell only displays one line HOT 1
- When using virtual rendering and column drag-and-drop sorting simultaneously, they don't work well together HOT 2
- onPaginationChange when set to undefined doesn't fallback to using default pagination HOT 1
- Failed to monitor data changes, resulting in page turning without re-rendering. HOT 2
- Table using insane amount of memory even with virtualisation when scrolling HOT 2
- Issue with getIsSomeRowsSelected when using grouping
- [vue table] support for reactivity in Vue-adapter in version 8.20 broke reactive for the old getter `get data()` style HOT 1
- Use of svelte/internal in Svelte 5 HOT 6
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.