reactjs - 如何在 react-table v-7 中添加具有不同值的子行？

Question

如何在 react-table v-7 中添加不同列的子标题？需要能够配置子行

需要能够在 react-table v-7 中配置 subrowshow 添加不同列的子标题？

https://codesandbox.io/s/tannerlinsleyreact-table-expanding-k4rhe

function Table({ columns: userColumns, data }) {
  const {
    getTableProps,
    headerGroups,
    rows,
    prepareRow,
    state: [{ expanded }],
  } = useTable(
    {
      columns: userColumns,
      data,
    },
    useExpanded // Use the useExpanded plugin hook
  )

  return (
    <>
      <pre>
        <code>{JSON.stringify({ expanded }, null, 2)}</code>
      </pre>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {rows.map(
            (row, i) =>
              prepareRow(row) || (
                <tr {...row.getRowProps()}>
                  {row.cells.map(cell => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                    )
                  })}
                </tr>
              )
          )}
        </tbody>
      </table>
      <br />
      <div>Showing the first 20 results of {rows.length} rows</div>
    </>
  )
}

function App() {
  const columns = React.useMemo(
    () => [
      {
        // Build our expander column
        Header: () => null, // No header, please
        id: 'expander', // Make sure it has an ID
        Cell: ({ row }) =>
          // Use the row.canExpand and row.getExpandedToggleProps prop getter
          // to build the toggle for expanding a row
          row.canExpand ? (
            <span
              {...row.getExpandedToggleProps({
                style: {
                  // We can even use the row.depth property
                  // and paddingLeft to indicate the depth
                  // of the row
                  paddingLeft: `${row.depth * 2}rem`,
                },
              })}
            >
              {row.isExpanded ? '👇' : '👉'}
            </span>
          ) : null,
      },
      {
        Header: 'Name',
        columns: [
          {
            Header: 'First Name',
            accessor: 'firstName',
          },

          {
            Header: 'age',
            accessor: 'id',
          },
          {
            Header: 'color',
            accessor: 'color',
          },
        ],
      },

    ],
    []
  )
  const subColumns = React.useMemo(
    () => [
      {

      },
      {
        Header: 'Name',
        columns: [
          {
            Header: 'First Name',
            accessor: 'id',
          },

          {
            Header: 'age',
            accessor: 'id',
          },
          {
            Header: 'color',
            accessor: 'color',
          },
        ],
      },

    ],
    []
  )



  const data = [
    {firstName:'cat',subRows:[
      {id:3,age:10, color:'red'}
    ]},
    {firstName:'dog',lastName:'black',subRows:[
      {id:3,age:10, color:'black'}]}
  ]

  return (
    <Styles>
      <Table columns={columns} data={data} />
    </Styles>
  )
}

如何在 react-table v-7 中添加不同列的子标题？

Answer 1

看来我来晚了一点，但这是任何需要它的人的答案。为此，您必须:

1. 在子行中创建一个表，它有自己的列。
2. 当表格展开时隐藏主要的子行。
3. 只获取要展开的主要行。

const columns = useMemo(
  () => [{
      id: "expander",
      Cell: ({
        row
      }: any) => ( <
        span { ...row.getToggleRowExpandedProps({
            style: {
              paddingLeft: `${row.depth * 2}rem`,
            },
          })
        } > {
          row.isExpanded ? "👇" : "👉"
        } <
        /span>
      ),
    },
    {
      Header: "Symbol/Size",
      accessor: "col1"
    },
    {
      Header: "Current Price",
      accessor: "col2",
    },
    {
      Header: "Allocatons",
      accessor: "col3",
    },
    {
      Header: "Amount",
      accessor: "col4",
    },
    {
      Header: "value",
      accessor: "col5",
    },
  ], []
);
const inseidecolumns = useMemo(
  () => [{
      Header: "Exchange",
      accessor: "col6",
    },
    {
      Header: "Allocation",
      accessor: "col7",
    },
    {
      Header: "Amount",
      accessor: "col8",
    },
    {
      Header: "value",
      accessor: "col9",
    },
  ], []
);

const data = useMemo(
  () => [{
      col1: "1",
      col2: "2",
      col3: "3",
      col4: "4",
      col5: "5",
      subRows: [{
        col6: "6",
        col7: "7",
        col8: "8",
        col9: "9",
      }, ],
    },
    {
      col1: "1",
      col2: "2",
      col3: "3",
      col4: "4",
      col5: "5",
      subRows: [{
          col6: "6",
          col7: "7",
          col8: "8",
          col9: "9",
        },
        {
          col6: "6",
          col7: "7",
          col8: "8",
          col9: "9",
        },
      ],
    },
  ], []
);

const MainTable: React.FC < Props > = () => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } =
  useTable({
      columns,
      data,
    },
    useSortBy,
    useExpanded
  );

  return ( <
    table { ...getTableProps()
    } >
    <
    thead > {
      headerGroups.map((headerGroup) => ( <
        tr { ...headerGroup.getHeaderGroupProps()
        } > {
          headerGroup.headers.map((column) => ( <
            th { ...column.getHeaderProps()
            } > {
              column.render("Header")
            } <
            /th>
          ))
        } <
        /tr>
      ))
    } <
    /thead> <
    tbody { ...getTableBodyProps()
    } > {
      rows.map((row) => {
        /*check if it's a main row*/
        if (row.canExpand) {
          prepareRow(row);
          return ( <
            >
            <
            tr { ...row.getRowProps()
            } > {
              row.cells.map((cell) => {
                return ( <
                  td { ...cell.getCellProps()
                  }
                  className = "p-3" > {
                    cell.render("Cell")
                  } <
                  /td>
                );
              })
            } <
            /tr>
            /*check if row is expanded then send row.originalSubRows to new table */
            {
              row ? .isExpanded ? ( <
                tr >
                <
                td colSpan = {
                  8
                } >
                <
                DetailsTable columns = {
                  innerColumns
                }
                data = {
                  row.originalSubRows
                }
                /> < /
                td > <
                /tr>
              ) : null
            } <
            />
          );
        }
      })
    } <
    /tbody> < /
    table >
  );
};

const DetailsTable: React.FC < InnerProps > = ({
  columns,
  data
}) => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } =
  useTable({
      columns,
      data,
    },
    useSortBy
  );

  return ( <
    table { ...getTableProps()
    } >
    <
    thead > {
      headerGroups.map((headerGroup) => ( <
        tr { ...headerGroup.getHeaderGroupProps()
        } > {
          headerGroup.headers.map((column) => ( <
            th { ...column.getHeaderProps()
            } > {
              column.render("Header")
            } <
            /th>
          ))
        } <
        /tr>
      ))
    } <
    /thead> <
    tbody { ...getTableBodyProps()
    } > {
      rows.map((row) => {
        prepareRow(row);
        return ( <
          tr { ...row.getRowProps()
          } > {
            row.cells.map((cell) => {
              return ( <
                td { ...cell.getCellProps()
                }
                className = "p-2" > {
                  cell.render("Cell")
                } <
                /td>
              );
            })
          } <
          /tr>
        );
      })
    } <
    /tbody> < /
    table >
  );
};