Блог

Я хочу создать таблицу, похожую на таблицу входящих сообщений gmail, в которой столбцы таблицы отображаются в виде строк на маленьких экранах. Я использую компонент таблицы Ant Design, но не могу найти, как сделать его адаптивным в документации.

Чего я хочу на больших экранах:

Что я хочу на маленьких экранах:

Это мой код react, в котором я создал таблицу с использованием 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;
 

Вы можете использовать responsive свойство столбца, которым вы хотите управлять для размеров экрана. Просто добавьте From To столбец с пользовательской функцией рендеринга и установите responsive свойство для этого столбца, чтобы оно отображалось только на xs экранах. From To Для столбцов and будет установлено свойство responsive для отображения на md и выше.

В этом подходе есть предостережение. Это работает, если вы хотите From To показывать на xs экранах, но если вы хотите From To показывать на sm экранах или меньших размеров, установка свойства responsive на ["sm"] будет нарушена. Это связано с тем, как AntDesign реализовал свои определения точек останова. Обратите внимание, что их xs определение (max-width: 575px) . Это единственная точка останова со max-width свойством. Другие точки останова используют min-width свойства. Поэтому установка адаптивного свойства на ["sm"] означает, что столбец будет отображаться на sm экранах большего размера.

ДЕМОНСТРАЦИЯ

 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"]
  }
];
 

Другой подход не очень хорош, но, тем не менее, вы можете отобразить стопку или карточку, содержащую ваши столбцы данных.

 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 в соответствии с устройствами.