如何让Shadcn Data Table的可折叠内容铺满表格宽度？

问题：用Shadcn-UI构建的可展开折叠数据表，点击左侧箭头展开的内容仅与第一列等宽，需要让展开内容铺满整个表格宽度。

问题原因 #

当前展开内容的CollapsibleContent直接放在表格行外，没有利用表格的单元格跨列特性，导致宽度被限制在第一列范围内。

解决方法 #

将展开内容包裹在一个跨所有列的表格行和单元格中，通过设置TableCell的colSpan属性为表格的总列数，实现内容铺满整个表格宽度。

修改后的代码 #

仅需调整data-table.tsx文件的展开内容结构：

//data-table.tsx

"use client";

import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/shadcn/ui/table";

import {
  Collapsible,
  CollapsibleContent,
} from "@/components/shadcn/ui/collapsible";
import React from "react";
import { Row } from "./columns";

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
}

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  const CollapsibleRowContent = ({ row }: { row: Row }) => (
    <div className="p-5">{row.collapsibleContent}</div>
  );

  return (
    <div>
      <Table>
        <TableHeader>
          {table.getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id}>
              {headerGroup.headers.map((header) => {
                return (
                  <TableHead key={header.id}>
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                  </TableHead>
                );
              })}
            </TableRow>
          ))}
        </TableHeader>
        <TableBody>
          {table.getRowModel().rows.map((row) => (
            <Collapsible key={row.id} asChild>
              <>
                <TableRow>
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </TableCell>
                  ))}
                </TableRow>
                {/* 核心修改：用跨列表格行包裹展开内容 */}
                <CollapsibleContent>
                  <TableRow>
                    <TableCell colSpan={columns.length} className="bg-slate-700 p-0">
                      <CollapsibleRowContent row={row.original} />
                    </TableCell>
                  </TableRow>
                </CollapsibleContent>
              </>
            </Collapsible>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

关键修改点 #

1. 将CollapsibleContent内的内容放入<TableRow>中，保持表格结构一致性
2. 给<TableCell>添加colSpan={columns.length}，让单元格跨所有列，铺满整个表格宽度
3. 调整样式（把背景色移到TableCell上，避免内容溢出）

修改后，展开的内容会自动铺满整个表格宽度，同时保持表格布局的完整性。

内容的提问来源于stack exchange，提问作者simibac