如何在React-Table中合并单元格

Question

如何在React-Table中合并单元格

5

我正在使用react-table，并希望基于它们内部的数字合并特定单元格。就像删除分隔符边框一样。

它看起来像这样：https://i.imgur.com/BelFNSj.png 我尝试了在Columns中使用className，使用border-bottom: 1px solid transparent !important;和border-top: 1px solid transparent !important;，但它没有起作用。你能告诉我如何做吗？谢谢。

- Hung Vu

Hung Vu，你解决了这个问题吗？ - Vivek Shah

@Hung Vu，有更新吗？ - jateen

使用useTable中的defaultColumn，然后您可以传递cell：customTableCell例如：

  const defaultColumn = useMemo(
    () => ({
      Filter: DefaultColumnFilter,
      Cell: customTableCell || TableCell,
      Header: DefaultHeader,
    }),
    []
  );


const instance = useTable(
    {
      columns,
      data: data || [zeroStateData],
      defaultColumn,
    },
  );

- Hung Vu

2个回答

0

在 useTable 中使用 defaultColumn，然后你就可以传递 cell: customTableCell。例如：

const defaultColumn = useMemo( () => ({ 
Filter: DefaultColumnFilter, 
Cell: customTableCell || TableCell, 
Header: DefaultHeader, }), [] );

const instance = useTable( {
 columns, data: data || [zeroStateData], 
defaultColumn, }, );

- Hung Vu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dillon Liu · Accepted Answer

尝试使用内置表格属性 colSpan，该属性指定您要水平合并多少个单元格。

<TableCell colSpan=2> My Cell </TableCell>