How to make Ant Design table responsive

Question

I want to make a table similar to gmail inbox table in which the table columns are diaplayed as rows on small screens. I am using Ant Design's table component but I can't find how to make it responsive in the documentation.

What I want on big screens:

From	To
[email protected]	[email protected]
[email protected]	[email protected]

What I want on small screens:

From To
[email protected] [email protected]
[email protected] [email protected]

This is my react code in which I have made a tabl using 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: "[email protected]",
      to: "[email protected]",
      subject: "[ HR-888 ] Notice of official announcement",
      date: "0:20",
    },
    {
      key: "2",
      from: "[email protected]",
      to: "[email protected]",
      subject: `[web:333] "Web Contact"`,
      date: "0:20",
    }
  ];
  return (
    <div className="App">
      <Table columns={columns} dataSource={data} pagination={false} />
    </div>
  );
}

export default App;

Answer 1

You can make use of the responsive property on the column that you want to control for screen sizes. Just add a From To column with a custom render function, and set the responsive property on that column to only show on xs screens. The From and To columns will have the responsive property set to show on md and above.

There is a caveat to this approach. It works if you want From To to show on xs screens but if you want From To to show on sm or smaller screens, setting the responsive property to ["sm"] will break. This is because of how AntDesign implemented their breakpoint definitions. Note their xs definition is (max-width: 575px). This is the only breakpoint with a max-width property. The other breakpoints use min-width properties. Therefore setting a responsive property to ["sm"] means that the column will show on sm and larger screens.

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