如何在反应表中计算并设置默认柱宽度？

发布于 2025-01-22 11:31:33 字数 634 浏览 0 评论 0原文

我正在尝试动态设置列宽度，以便列宽的总和占据了表的整个宽度。我有一个具有动态宽度的反应表分量（需要其父宽度的100％），将宽度划分为列。长度并设置以下内容：

 
 
 const defaultColumn = useMemo(
    () => ({
      width: columnWidth > 0 ? columnWidth : 150,
    }),
    [columnWidth]
  );
  
  const tableInstance= useTable(
    {
      columns: columnsTable,
      data: dataTable,
      defaultColumn: defaultColumn,
     
    },
    useGlobalFilter,
    useSortBy,
    usePagination,
    useBlockLayout
  );

当我安装登录DefaultColumn时，它为我提供了正确的计算宽度，但是表单元格总是显示150px。为什么表不显示DefaultColumn宽度值？我该如何正确执行此操作？

原文

I am trying to set columns width dynamically so the sum of the columns width occupy the entire width of the table. I have a react-table component with dynamic width (takes 100% of its parent width), I divide the width by columns.length and set the following:

 
 
 const defaultColumn = useMemo(
    () => ({
      width: columnWidth > 0 ? columnWidth : 150,
    }),
    [columnWidth]
  );
  
  const tableInstance= useTable(
    {
      columns: columnsTable,
      data: dataTable,
      defaultColumn: defaultColumn,
     
    },
    useGlobalFilter,
    useSortBy,
    usePagination,
    useBlockLayout
  );

when I console log the defaultColumn it gives me the correct calculated width, but the table cells always show 150px. why the table is not showing the defaultColumn width value? and how can I do this correctly?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忆梦 2025-01-29 11:31:33

如我所见，DefaultColumn的更改不会触发您的列定义的重建。

因此，要修复它，我建议将您的列定义取决于DefaultColumn值。

const defaultColumn = useMemo(
  () => ({
    width: columnWidth > 0 ? columnWidth : 150,
  }),
  [columnWidth],
);

// Here we make our columns definition to be related on defaultColumn value.
const columns = useMemo(() => {
  // We recreate columnsTable array to create a new reference to table columns value by creating a new array.
  return [...columnsTable];
}, [defaultColumn]);

const tableInstance = useTable(
  {
    columns,
    data: dataTable,
    defaultColumn: defaultColumn,
  },
  useGlobalFilter,
  useSortBy,
  usePagination,
  useBlockLayout,
);

As I see, changes in the defaultColumn doesn't trigger rebuilding of your columns definition.

So, to fix it, I propose making your columns definition dependent on defaultColumn value.

const defaultColumn = useMemo(
  () => ({
    width: columnWidth > 0 ? columnWidth : 150,
  }),
  [columnWidth],
);

// Here we make our columns definition to be related on defaultColumn value.
const columns = useMemo(() => {
  // We recreate columnsTable array to create a new reference to table columns value by creating a new array.
  return [...columnsTable];
}, [defaultColumn]);

const tableInstance = useTable(
  {
    columns,
    data: dataTable,
    defaultColumn: defaultColumn,
  },
  useGlobalFilter,
  useSortBy,
  usePagination,
  useBlockLayout,
);

回复收藏 0 原文

~没有更多了~