en-US

This example shows how to implement table nesting.

zh-CN

该示例展示了如何实现表格嵌套。

import React from 'react';

import { useImmer } from '@react-devui/hooks';
import { DTable, DButton, DSeparator } from '@react-devui/ui';

const list = Array.from({ length: 3 }).map((_, i) => ({
  name: `Name ${i + 1}`,
  age: `2${i}`,
  address: `Room 100${i}, Building 2, Fandou Garden, Fandou Street`,
}));
export default function Demo() {
  const [expand, setExpand] = useImmer(new Set());

  const nestedTable = (
    <DTable>
      <table>
        <thead>
          <tr>
            <DTable.Th>Data 1</DTable.Th>
            <DTable.Th>Data 2</DTable.Th>
          </tr>
        </thead>
        <tbody>
          {Array.from({ length: 3 }).map((_, i) => (
            <tr key={i}>
              <DTable.Td>Some content...</DTable.Td>
              <DTable.Td>Some content...</DTable.Td>
            </tr>
          ))}
        </tbody>
      </table>
    </DTable>
  );

  return (
    <DTable>
      <table>
        <thead>
          <tr>
            <DTable.Th dWidth={60}></DTable.Th>
            <DTable.Th>Name</DTable.Th>
            <DTable.Th>Age</DTable.Th>
            <DTable.Th>Address</DTable.Th>
            <DTable.Th>Action</DTable.Th>
          </tr>
        </thead>
        <tbody>
          {list.map((data) => (
            <React.Fragment key={data.name}>
              <tr>
                <DTable.Td dWidth={60} dAlign="center">
                  <DTable.Expand
                    dExpand={expand.has(data.name)}
                    onExpandChange={(expand) => {
                      setExpand((draft) => {
                        if (expand) {
                          draft.add(data.name);
                        } else {
                          draft.delete(data.name);
                        }
                      });
                    }}
                  />
                </DTable.Td>
                <DTable.Td>{data.name}</DTable.Td>
                <DTable.Td>{data.age}</DTable.Td>
                <DTable.Td>{data.address}</DTable.Td>
                <DTable.Td dNowrap>
                  <DButton dType="link">Edit</DButton>
                  <DSeparator dVertical></DSeparator>
                  <DButton dType="link">Delete</DButton>
                </DTable.Td>
              </tr>
              {expand.has(data.name) && (
                <tr>
                  <td style={{ padding: '0 0 0 60px', backgroundColor: 'var(--rd-background-color-light-gray)' }} colSpan={5}>
                    {nestedTable}
                  </td>
                </tr>
              )}
            </React.Fragment>
          ))}
        </tbody>
      </table>
    </DTable>
  );
}