react实现表格展开

实现表格展开功能的方法

在React中实现表格展开功能可以通过多种方式完成，以下是几种常见的方法：

使用状态管理控制展开/折叠

通过React的useState钩子管理展开状态，动态渲染展开内容：

import React, { useState } from 'react';

function ExpandableTable() {
  const [expandedRows, setExpandedRows] = useState({});

  const toggleRow = (rowId) => {
    setExpandedRows(prev => ({
      ...prev,
      [rowId]: !prev[rowId]
    }));
  };

  const data = [
    { id: 1, name: 'Item 1', details: 'Details for Item 1' },
    { id: 2, name: 'Item 2', details: 'Details for Item 2' }
  ];

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {data.map(item => (
          <React.Fragment key={item.id}>
            <tr>
              <td>{item.name}</td>
              <td>
                <button onClick={() => toggleRow(item.id)}>
                  {expandedRows[item.id] ? 'Collapse' : 'Expand'}
                </button>
              </td>
            </tr>
            {expandedRows[item.id] && (
              <tr>
                <td colSpan="2">{item.details}</td>
              </tr>
            )}
          </React.Fragment>
        ))}
      </tbody>
    </table>
  );
}

使用第三方表格库

许多流行的React表格库如react-table或Material-UI的DataGrid都内置了展开功能：

import { useTable, useExpanded } from 'react-table';

function ReactTableExpandable({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state: { expanded }
  } = useTable(
    { columns, data },
    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 => {
          prepareRow(row);
          return (
            <React.Fragment key={row.id}>
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => (
                  <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                ))}
              </tr>
              {row.isExpanded && (
                <tr>
                  <td colSpan={row.cells.length}>
                    {row.original.details}
                  </td>
                </tr>
              )}
            </React.Fragment>
          );
        })}
      </tbody>
    </table>
  );
}

使用CSS过渡动画

为展开效果添加平滑的动画过渡：

.expandable-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.expandable-content.expanded {
  max-height: 500px; /* 或足够大的值 */
}

嵌套子表格实现

对于更复杂的数据结构，可以嵌套子表格：

function NestedTable({ data }) {
  const [expandedId, setExpandedId] = useState(null);

  return (
    <table>
      <tbody>
        {data.map(item => (
          <React.Fragment key={item.id}>
            <tr onClick={() => setExpandedId(expandedId === item.id ? null : item.id)}>
              <td>{item.name}</td>
              <td>{expandedId === item.id ? '▼' : '▶'}</td>
            </tr>
            {expandedId === item.id && item.subItems && (
              <tr>
                <td colSpan="2">
                  <table>
                    <tbody>
                      {item.subItems.map(subItem => (
                        <tr key={subItem.id}>
                          <td>{subItem.name}</td>
                          <td>{subItem.value}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </td>
              </tr>
            )}
          </React.Fragment>
        ))}
      </tbody>
    </table>
  );
}

这些方法可以根据具体需求进行组合或调整，实现不同复杂度的表格展开功能。