Ant Design Table

The Ant Design Table is a versatile and powerful component that allows you to display and manipulate data in a variety of ways. It is a key component in building effective and efficient user interfaces.

Syntax

The basic syntax for creating an Ant Design Table is as follows:

import { Table } from 'antd';

function MyTable() {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];
  
  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
    },
  ];

  return <Table columns={columns} dataSource={data} />;
}

This will create a simple table with three columns ('Name', 'Age', and 'Address') and three rows of data.

Use

The Ant Design Table can be used in a variety of contexts, from simple static data display to more complex and interactive interfaces. Some common use cases include:

• Displaying user data in a profile or account settings page
• Displaying product data on an e-commerce site
• Creating data management interfaces for back-end systems
• Displaying and manipulating financial data in a dashboard or analytics page

Importance

The Ant Design Table is an important component in building effective and efficient user interfaces. It provides a powerful and flexible way to display and manipulate data, and can be customized to fit a wide variety of use cases. By using the Ant Design Table, you can create interfaces that are easy to use and navigate, and that provide a superior user experience.

Example

Here's a more complex example of an Ant Design Table, using server-side filtering and sorting:

import { Table, Input, Button, Space } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

const { Column, ColumnGroup } = Table;

function MyTable() {
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

  useEffect(() => {
    setLoading(true);

    fetchData().then(result => {
      setData(result);
      setLoading(false);
    });
  }, []);

  const fetchData = async () => {
    // fetch data from server...
  };

  const getColumnSearchProps = dataIndex => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ marginBottom: 8, display: 'block' }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            Search
          </Button>
          <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
            Reset
          </Button>
        </Space>
      </div>
    ),
    filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) =>
      record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => searchInput.current.select(), 100);
      }
    },
    render: text =>
      searchedColumn === dataIndex ? (
        <Highlighter
          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
          searchWords={[searchText]}
          autoEscape
          textToHighlight={text.toString()}
        />
      ) : (
        text
      ),
  });

  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };

  const handleReset = clearFilters => {
    clearFilters();
    setSearchText('');
  };

  return (
    <Table dataSource={data} loading={loading}>
      <ColumnGroup title="Name">
        <Column title="First Name" dataIndex="firstName" key="firstName" {...getColumnSearchProps('firstName')} />
        <Column title="Last Name" dataIndex="lastName" key="lastName" {...getColumnSearchProps('lastName')} />
      </ColumnGroup>
      <Column title="Age" dataIndex="age" key="age" />
      <Column title="Email" dataIndex="email" key="email" {...getColumnSearchProps('email')} />
      <Column title="Phone Number" dataIndex="phoneNumber" key="phoneNumber" {...getColumnSearchProps('phoneNumber')} />
    </Table>
  );
}

This example includes server-side filtering and sorting, which can be very useful for handling large amounts of data. It also includes search functionality for each column, allowing users to easily find the data they're looking for.

Summary

The Ant Design Table is a powerful and flexible component for displaying and manipulating data in user interfaces. It can be used in a variety of contexts and customized to fit a wide range of use cases. By using the Ant Design Table, you can create interfaces that are easy to use and navigate, and that provide a superior user experience.