如何使 Ant Design 表响应式答案

【问题标题】：How to make Ant Design table responsive如何使 Ant Design 表响应式
【发布时间】：2021-04-07 01:33:16
【问题描述】：

我想制作一个类似于 gmail 收件箱表格的表格，其中表格列在小屏幕上显示为行。我正在使用 Ant Design 的表格组件，但在文档中找不到如何使其具有响应性。

我想要的大屏幕：

From	To
aaa@example.com	zzz.zzz@example.com
ccc@example.com	yyy.yyy@example.com

我想要的小屏幕：

From To
aaa@example.com zzz.zzz@example.com
ccc@example.com yyy.yyy@example.com

这是我使用 Ant Design 制作表格的反应代码：

import "./App.css";
import { Table } from "antd";

function App() {
  const columns = [
    {
      title: "From",
      dataIndex: "from",
      sorter: (a, b) => a.from.length - b.from.length,
      sortDirections: ["descend", "ascend"],
    },
    {
      title: "To",
      dataIndex: "to",
      sorter: (a, b) => a.to - b.to,
      sortDirections: ["descend", "ascend"],
    },
    {
      title: "Subject",
      dataIndex: "subject",
      sorter: (a, b) => a.subject.length - b.subject.length,
      sortDirections: ["descend", "ascend"],
    },
    {
      title: "Date",
      dataIndex: "date",
      sorter: (a, b) => a.date.length - b.date.length,
      sortDirections: ["descend", "ascend"],
    },
  ];

  const data = [
    {
      key: "1",
      from: "aaa@example.com",
      to: "zzz.zzz@example.com",
      subject: "[ HR-888 ] Notice of official announcement",
      date: "0:20",
    },
    {
      key: "2",
      from: "bbb.bbbb@example.com",
      to: "yyy.yyy@example.com",
      subject: `[web:333] "Web Contact"`,
      date: "0:20",
    }
  ];
  return (
    <div className="App">
      <Table columns={columns} dataSource={data} pagination={false} />
    </div>
  );
}

export default App;

【问题讨论】：

你看this了吗？
是的，但该示例将隐藏该列
请看我的demo
是的，这是正确的，请将其放在答案中，以便我接受。

标签： css reactjs antd

【解决方案1】：

您可以在要控制屏幕尺寸的列上使用responsive 属性。只需添加一个带有自定义渲染功能的From To 列，并将该列上的responsive 属性设置为仅在xs 屏幕上显示。 From 和 To 列将设置为在 md 及更高版本上显示的响应属性。

这种方法有一个警告。如果您希望From To 显示在xs 屏幕上，但如果您希望From To 显示在sm 或更小的屏幕上，则将响应属性设置为["sm"] 会中断。这是因为 AntDesign 如何实现他们的breakpoint 定义。注意他们的xs 定义是(max-width: 575px)。这是唯一具有max-width 属性的断点。其他断点使用min-width 属性。因此，将响应属性设置为 ["sm"] 意味着该列将显示在 sm 和更大的屏幕上。

DEMO

const columns = [
  {
    title: "From To",
    render: (record) => (
      <React.Fragment>
        {record.from}
        <br />
        {record.to}
      </React.Fragment>
    ),
    responsive: ["xs"]
  },
  {
    title: "From",
    dataIndex: "from",
    sorter: (a, b) => a.from.length - b.from.length,
    sortDirections: ["descend", "ascend"],
    responsive: ["sm"]
  },
  {
    title: "To",
    dataIndex: "to",
    sorter: (a, b) => a.to - b.to,
    sortDirections: ["descend", "ascend"],
    responsive: ["sm"]
  },
  {
    title: "Subject",
    dataIndex: "subject",
    sorter: (a, b) => a.subject.length - b.subject.length,
    sortDirections: ["descend", "ascend"]
  },
  {
    title: "Date",
    dataIndex: "date",
    sorter: (a, b) => a.date.length - b.date.length,
    sortDirections: ["descend", "ascend"]
  }
];

【讨论】：

唯一的问题是为什么它不在官方文档中）

【解决方案2】：

另一种方法不好但仍然可以呈现包含数据列的堆栈或卡片。

const isWebDevice = useMediaQuery('(min-width:700px)');
const deviceColumns = [
    {
      title: "Student Data",
      render: (record, key, index) => {
         const from = record.from;
         const to = record.to;
         const subject = record.subject;
         const date = record.date;
         return (
             <div>
                  <span>
                        <h4>From</h4>
                        <h4>{from}</h4>
                  </span>
                  <span>
                        <h4>To</h4>
                        <h4>{to}</h4>
                  </span>
                  <span>
                        <h4>Subject</h4>
                        <h4>{subject}</h4>
                  </span>
                  <span>
                        <h4>Date</h4>
                        <h4>{date}</h4>
                  </span>
             </div>
         )
      }
  ];

<Table 
    columns={isWebDevice ? columns : deviceColumns}
    dataSource={data} 
    pagination={false} 
/>

像上面一样，您可以将类应用于<span>，并根据设备使用 CSS 相应地呈现它们。

【讨论】：