mantine DataGrid 中的子行(反应表)

问题描述 投票:0回答:0

由于 DataGrid 遵循 react-table,我尝试在 DataGrid 中显示 subRows,如 this exmple 但表的每一行中的 subRows 或 getLeafRows 数组属性数组保持空数组 []。我认为 DataGrid 组件有问题! 我的代码是:

const items= useMemo(
    () =>
      data?.map((item) => ({
        id: item.id,
        name: item.name,
        time: item.time,
        subRows: parseStringToArray(data.children).map((child) => ({
          id: child.id,
          name: child.name,
          time: child.time,
        })),
      })),
    [data]
  );
const onRow = useCallback<(row: Row<any>) => HTMLAttributes<HTMLTableRowElement>>((row) => {
    return row.getCanExpand()
      ? {
          onClick: row.getToggleExpandedHandler(),
          style: { cursor: 'pointer' },
        }
      : {};
  }, []);
const getRowCanExpand = useCallback<(row: Row<any>) => boolean>((row) => !!row.original.subRows?.length, []);

return(
<DataGrid
        data: items || [],
        columns: gridCols || [],
        withRowExpanding: true,
        getRowCanExpand,
        renderSubComponent,
        onRow,
        withColumnFilters
        withSorting
        withFixedHeader
        withPagination
        highlightOnHover
        height={1000}
        pageSizes={['50', '100', '200']}
      />
)

如果你在这个概念上帮助我,我会很高兴。

我希望在数据网格中显示我的子行,就像数据网格中的另一行一样

reactjs next.js react-table mantine
© www.soinside.com 2019 - 2024. All rights reserved.