[英]How to resize columns with React Table Hooks with a specific table width
I'm trying to implement the resizing feature with React-Table and the Hook useResizeColumns .我正在尝试使用React-Table和 Hook useResizeColumns来实现调整大小功能。 I want to force the table to take always the full width of its container.
我想强制表格始终占据其容器的全宽。 Only the columns should change theirs size.
只有列应该改变它们的大小。 Not the table.
不是桌子。 If you take a look into this example that I made here .
如果你看看我在这里制作的这个例子。 (Codesandbox) You can easily resize the column to surpass the red container.
(Codesandbox) 您可以轻松地调整列的大小以超过红色容器。 And for some reason if you minimize the columns size, the table will fit always the container !
出于某种原因,如果您最小化列的大小,表格将始终适合容器!
I don't understand the behavior here.我不明白这里的行为。 Any ideas ?
有任何想法吗 ? Thank you very much.
非常感谢。
You need to set the max width for the table.您需要设置表格的最大宽度。 You can use this code.
您可以使用此代码。
const defaultColumn = React.useMemo(
() => ({
width: 100,
minWidth: 50,
maxWidth: 100
}),
[]
);
const { headerGroups, rows, prepareRow } = useTable(
{
columns,
data,
defaultColumn
},
useResizeColumns,
useFlexLayout
);
After altering this, the table stays within its container.更改此设置后,该表将保留在其容器中。
Source:来源:
https://codesandbox.io/s/intelligent-brook-0qicz?file=/src/App.js:1187-1314 https://codesandbox.io/s/intelligent-brook-0qicz?file=/src/App.js:1187-1314
If you want a CSS solution, you have two options.如果你想要一个 CSS 解决方案,你有两个选择。 Option #1 is probably what you want, but your intention is a bit unclear, so I've included a second option, just in case I've misunderstood your intention.
选项 #1 可能是您想要的,但您的意图有点不清楚,所以我包含了第二个选项,以防我误解了您的意图。
Option #1: (Give the table a scrollbar, mimicking the behavior most React tables seem to prefer.)选项#1:(给表格一个滚动条,模仿大多数 React 表格似乎更喜欢的行为。)
.table {
overflow: auto;
}
or Option #2: (Shrink the columns to fit within the table)或选项#2:(缩小列以适应表格)
.td, .th, .tr {
flex-shrink: 1 !important;
min-width: auto !important;
}
Found the fix.找到了修复。 You need to fix your css for table to have display:inline-block;.
您需要修复表格的 css 以具有 display:inline-block;。 It is weird that a css fixes the issue :-).
奇怪的是 css 解决了这个问题:-)。 You can see the fixed issue over here https://codesandbox.io/s/react-table-with-full-width-forked-rbi6u
您可以在此处查看已修复的问题https://codesandbox.io/s/react-table-with-full-width-forked-rbi6u
.table {
border: 2px red solid;
display:inline-block;
}
Please try the sandbox again as I had missed saving the fix in codesandbox.请再次尝试沙箱,因为我错过了在代码沙箱中保存修复程序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.