如何在移动端隐藏Tanstack React-Table的指定列（使用Tailwind CSS）

结合你用的Tanstack React-Table和Tailwind CSS，有两种简单靠谱的方法实现移动端隐藏指定列：

方法一：用Tailwind响应式类直接控制显示 #

这种方式最直观，不需要额外状态监听，直接给需要隐藏的列的表头和单元格加上Tailwind的响应式隐藏类就行。比如用hidden md:table-cell，表示在小于md断点（默认768px）的移动端隐藏，大屏设备正常显示。

示例代码：

const columns = useMemo(() => [
  {
    header: 'ID',
    accessorKey: 'id',
    cell: ({ row }) => <div className="px-4 py-2 table-cell">{row.id}</div>,
    headerCell: () => <div className="px-4 py-2 font-bold table-cell">ID</div>,
  },
  {
    header: '用户名',
    accessorKey: 'username',
    cell: ({ row }) => <div className="px-4 py-2 table-cell">{row.original.username}</div>,
    headerCell: () => <div className="px-4 py-2 font-bold table-cell">用户名</div>,
  },
  // 移动端隐藏邮箱列
  {
    header: '邮箱',
    accessorKey: 'email',
    cell: ({ row }) => <div className="hidden md:table-cell px-4 py-2">{row.original.email}</div>,
    headerCell: () => <div className="hidden md:table-cell px-4 py-2 font-bold">邮箱</div>,
  },
  // 仅大屏（lg断点以上）显示注册日期
  {
    header: '注册日期',
    accessorKey: 'registerDate',
    cell: ({ row }) => <div className="hidden lg:table-cell px-4 py-2">{row.original.registerDate}</div>,
    headerCell: () => <div className="hidden lg:table-cell px-4 py-2 font-bold">注册日期</div>,
  },
], []);

方法二：通过Tanstack Table的列配置动态控制 #

如果需要完全不渲染隐藏列的DOM元素（而非仅样式隐藏），可以用Tanstack Table自带的列隐藏功能，结合窗口大小监听动态切换列的显示状态。

示例代码：

import { useTable, useColumnVisibility } from '@tanstack/react-table';
import { useEffect, useMemo, useState } from 'react';

const CustomTable = ({ data }) => {
  // 判断当前是否为移动端
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);

  // 监听窗口大小变化，更新移动端状态
  useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // 根据移动端状态配置列的隐藏属性
  const columns = useMemo(() => [
    { header: 'ID', accessorKey: 'id' },
    { header: '用户名', accessorKey: 'username' },
    { 
      header: '邮箱', 
      accessorKey: 'email', 
      hidden: isMobile // 移动端隐藏该列
    },
    { 
      header: '注册日期', 
      accessorKey: 'registerDate', 
      hidden: isMobile 
    },
  ], [isMobile]);

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    data,
    columns,
    enableHiding: true, // 必须开启这个配置才能使用列隐藏功能
  });

  return (
    <div className="overflow-x-auto">
      <table {...getTableProps()} className="min-w-full border-collapse">
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()} className="border px-4 py-2 bg-gray-50">
                  {column.render('Header')}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map(row => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()} className="border-b">
                {row.getVisibleCells().map(cell => (
                  <td {...cell.getCellProps()} className="border px-4 py-2">
                    {cell.render('Cell')}
                  </td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

注意事项 #

• 方法一的样式隐藏只是视觉上隐藏，DOM元素仍然存在；方法二会直接从表格的可见列中移除，更适合性能敏感的场景
• 可以在tailwind.config.js中自定义断点值，适配你的项目设计规范
• 两种方法可以结合使用，比如部分列用样式隐藏，部分列用动态配置隐藏

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