如何在react-table中计算和设置defaultColumn Width？

Question

我正在尝试动态设置列宽，以便列宽的总和占据 table 的整个宽度。我有一个具有动态宽度的 react-table 组件（占其父宽度的 100%），我将宽度除以 columns.length 并设置以下内容：

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

当我在控制台记录 defaultColumn 时，它为我提供了正确的计算宽度，但 table 单元格始终显示 150 像素。为什么 table 不显示 defaultColumn 宽度值？我该如何正确地做到这一点？

Answer 1

如我所见，defaultColumn 中的更改不会触发重建您的 columns 定义。

因此，为了修复它，我建议让您的列定义依赖于 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,
);

如何在react-table中计算和设置defaultColumn Width？

How to calculate and set defaultColumn Width in react-table?

javascript

reactjs

react-table

react-hooks