как скрыть столбцы таблицы данных antd для небольших устройств (мобильный вид)?

Question

Если в таблице пять столбцов, я хочу отображать только 2 столбца для мобильного представления

https://ant.design/components/table

Answer 1

Внутри метода рендеринга вам нужно объявить столбцы с let и изменить их , если window.innerWidth <480 </strong> (я сделал его менее 500 px, чтобы быть безопасным). Под изменением я имею в виду фильтрацию из массива столбцов только тех столбцов, которые вам нужны. Лучший способ фильтрации - по ключу, потому что он уникален. Вот как выглядит код в реакции:

import React, { PureComponent } from "react";
import { Table } from "antd";

export default class MainPage extends PureComponent {
  renderMobileTable = columns => {
    return columns.filter(
      column => column.key === "name" || column.key === "city"
    );
  };
  render() {
    const dataSource = [
      {
        key: "1",
        name: "Mike",
        lastName: "Willins",
        age: 32,
        address: "10 Downing Street",
        city: "Chicago"
      },
      {
        key: "2",
        name: "John",
        lastName: "Billards",
        age: 42,
        address: "5th Blvd",
        city: "New York"
      }
    ];

    let columns = [
      {
        title: "Name",
        dataIndex: "name",
        key: "name"
      },
      {
        title: "Last Name",
        dataIndex: "lastName",
        key: "lastName"
      },
      {
        title: "Age",
        dataIndex: "age",
        key: "age"
      },
      {
        title: "Address",
        dataIndex: "address",
        key: "address"
      },
      {
        title: "City",
        dataIndex: "city",
        key: "city"
      }
    ];
    const isMobile = window.innerWidth < 500;
    if (isMobile) {
      columns = this.renderMobileTable(columns);
    }
    return <Table dataSource={dataSource} columns={columns} />;
  }
}

Исходный код вы можете найти в моем хранилище на GitHub.

ПРИМЕЧАНИЕ: если вы тестируете мобильный посмотрите в Chrome Dev Tools, убедитесь, что вы перезагружаете страницу после изменения размера, так как мы помещаем логи c в метод рендеринга, и приложение должно быть перерисовано или перезагружено.

Answer 2

Вы можете держать столбцы в состоянии компонента и динамически фильтровать столбцы при изменении размера окна. Как то так

useEffect(() => {
 window.addEventListener("resize", <callback function to update columns>);

 // cleanup
 return() => window.removeEventListener("resize");
});