如果总列宽小于网格宽度，则在反应虚拟化网格中填充剩余 space
Fill remaining space in react-virtualized Grid if total columns width is less than Grid width
我使用具有交替行背景颜色的网格组件。
在我的应用程序中，我可以动态地select显示哪些列。如果列的总宽度超过网格的宽度，没问题。但是如果总宽度小于网格的宽度，我想用与我的单元格相同的背景颜色填充剩余的空白 space 。我不想更改列的宽度以适应网格的宽度。
有简单的方法吗？
我尝试使用 prop cellRangeRenderer（如文档 https://github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md#cellrangerenderer 中所述），但它似乎无法解决我的要求。
我必须 fork defaultCellRangeRenderer 函数吗？
screenshot
提前致谢
假设你想用交替的颜色填充剩余的 space（从你的问题中不完全清楚）那么你有两个选择。
对于这两个选项，您都需要检测可见列的宽度何时小于 Grid 的宽度。 （你没有分享你的源代码，所以我不会就具体如何做到这一点提出建议。不过应该很简单！）
选项 1：cellRangeRenderer
分叉 default cellRangeRenderer。当您的 Grid 列太少而无法填充时，可以在每一行的右侧呈现一个空的 div（以填充剩余的宽度） 或 覆盖style 每行中最右侧单元格的属性，以使其填充剩余宽度。
选项 2：columnWidth 函数
使用 columnWidth 函数（根据您的屏幕截图，您似乎已经在这样做了）。当您的 Grid 列太少无法填充时，只需 return 最右侧可见列的不同大小（以便它填充剩余的 space）。
请注意，您需要让 Grid 知道给定列的宽度何时发生变化。您可以通过调用 gridRef.recomputeGridSize({ columnIndex: indexOfRightMostColumn }).
来完成此操作
我使用具有交替行背景颜色的网格组件。
在我的应用程序中，我可以动态地select显示哪些列。如果列的总宽度超过网格的宽度，没问题。但是如果总宽度小于网格的宽度，我想用与我的单元格相同的背景颜色填充剩余的空白 space 。我不想更改列的宽度以适应网格的宽度。 有简单的方法吗？
我尝试使用 prop cellRangeRenderer（如文档 https://github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md#cellrangerenderer 中所述），但它似乎无法解决我的要求。 我必须 fork defaultCellRangeRenderer 函数吗？
screenshot
提前致谢
假设你想用交替的颜色填充剩余的 space（从你的问题中不完全清楚）那么你有两个选择。
对于这两个选项，您都需要检测可见列的宽度何时小于 Grid 的宽度。 （你没有分享你的源代码，所以我不会就具体如何做到这一点提出建议。不过应该很简单！）
选项 1：cellRangeRenderer
分叉 default cellRangeRenderer。当您的 Grid 列太少而无法填充时，可以在每一行的右侧呈现一个空的 div（以填充剩余的宽度） 或 覆盖style 每行中最右侧单元格的属性，以使其填充剩余宽度。
选项 2：columnWidth 函数
使用 columnWidth 函数（根据您的屏幕截图，您似乎已经在这样做了）。当您的 Grid 列太少无法填充时，只需 return 最右侧可见列的不同大小（以便它填充剩余的 space）。
请注意，您需要让 Grid 知道给定列的宽度何时发生变化。您可以通过调用 gridRef.recomputeGridSize({ columnIndex: indexOfRightMostColumn }).