How to make Ant Design table responsive

user_8967258 0
Viewed 15932

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
aaa@example.com zzz.zzz@example.com
ccc@example.com yyy.yyy@example.com

What I want on small screens:

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

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: "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;
antd reactjs css
2 Answers

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

Another approach not good but still, you can render a stack or a card containing your data columns.

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} 
/>

like above you can apply classes to <span> and render them accordingly using CSS according to devices.

user_93341580
Related