如何使 Ant Design 表响应式

Posted 2023-02-22

【中文标题】如何使 Ant Design 表响应式

【英文标题】：How to make Ant Design table responsive

【发布时间】：2021-04-07 01:33:16

【问题描述】：

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

我想要的大屏幕：

From	To
[e-mail]	[e-mail]
[e-mail]	[e-mail]

我想要的小屏幕：

From To
[e-mail]@example.com
[e-mail]@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: "[e-mail]",
      to: "[e-mail]",
      subject: "[ HR-888 ] Notice of official announcement",
      date: "0:20",
    ,
    
      key: "2",
      from: "[e-mail]",
      to: "[e-mail]",
      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

是的，这是正确的，请将其放在答案中，以便我接受。

【参考方案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 相应地呈现它们。