ReactJS UI Ant Design Table Component

Ant Design Library has this component pre-built, and it is very easy to integrate as well. ReactJS UI Ant Design Table Component is used to display rows of data. It is used to display data in the form of table format. We can use the following approach in ReactJS to use the Ant Design Table Component.

Table Props:

• bordered: It is used to indicate whether to show all table borders or not.
• columns: It is used to denote the columns of the table.  
• components: It is used to override default table elements,  
• dataSource: It is used to denote the data record array to be displayed.
• expandable: It is used to configure expandable content.  
• footer: It is used to denote the Table footer renderer.  
• getPopupContainer: It is the rendering container of dropdowns in the table.  
• loading: It is used to denote the loading status of the table. 
• locale: It is the i18n text including filter, sort, empty text, etc.
• pagination: It is used for the configuration of pagination.  
• rowClassName: It is used to denote the row’s className.
• rowKey: It is used to denote the row’s unique key.
• rowSelection: It is used to denote the row selection config.  
• scroll: It is used to indicate whether the table can be scrollable or not.
• showHeader: It is used to indicate whether to show table header or not.
• showSorterTooltip: It is used for the header show next sorter direction tooltip.  
• size: It is used to denote the size of the table.
• sortDirections: It is used to denote the sort directions.
• sticky: It is used to set a sticky header and scroll bar.  
• summary: It is used to denote the summary content.  
• tableLayout: It is used to denote the table-layout attribute of the table element.  
• title: It is used to denote the table title renderer.  
• onChange: It is a callback function that is executed when pagination, filters, or sorter is changed. 
• onHeaderRow: It is used to set props on per header row.  
• onRow: It is used to set props per row. 

Column Props:

• align: It is used to specify which way that column is aligned.
• className: It is used to denote the className of this column.  
• colSpan: It is used to denote the span of this column’s title.  
• dataIndex: It is used to display the field of the data record.
• defaultFilteredValue: It is used to denote the default filtered values.
• defaultSortOrder: It is used to denote the default order of sorted values.  
• editable: It is used to indicate whether a column can be edited.  
• ellipsis: It is used to denote the ellipsis cell content.
• filterDropdown: It is used to customized filter overlay.  
• filterDropdownVisible: It is used to indicate whether filterDropdown is visible or not.
• filtered: It is used to indicate whether the dataSource is filtered or not.
• filteredValue: It is used to denote the controlled filtered value, filter icon will highlight.
• filterIcon: It is used for the customized filter icon.
• filterMultiple: It is used to indicate whether multiple filters can be selected or not.
• filters: It is used to denote the filter menu config.  
• fixed: It is used to set columns to be fixed.
• key: It is used to denote the unique key of this column.
• render: It is the renderer of the table cell.  
• responsive: It is used to denote the list of breakpoints at which to display this column.  
• shouldCellUpdate: It is used to denote the control cell render logic.
• showSorterTooltip: Used to override showSorterTooltip in table if header show next sorter direction tooltip. 
• sortDirections: It is used to sort directions in a Table and values could be ascend or descend.
• sorter: It is a sort function for local sort.
• sortOrder: It is used to denote the order of sorted values.
• title: It is used to denote the title of this column.  
• width: It is used to width of this column.  
• onCell: It is used to set props on per cell.  
• onFilter: It is a callback function that determines if the row is displayed when filtered.  
• onFilterDropdownVisibleChange: Callback function that is triggered when filterDropdownVisible is changed
• onHeaderCell: It is used to set props on per header cell. 

ColumnGroup Props:

• title: It is used to denote the title for the column group.

Creating React Application And Installing Module:

• Step 1: Create a React application using the following command:

  npx create-react-app foldername

• Step 2: After creating your project folder i.e. foldername, move to it using the following command:

  cd foldername

• Step 3: After creating the ReactJS application, Install the required module using the following command:

  npm install antd

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from 'react'
import "antd/dist/antd.css";
import { Table } from 'antd';

export default function App() {

    // Sample Data for the table
    const dataSource = [
        { key: '1', username: 'Gourav', age: 10 },
        { key: '2', username: 'Kartik', age: 20 },
        { key: '3', username: 'Madhu', age: 30 },
        { key: '4', username: 'Karu', age: 40 },
        { key: '5', username: 'Dinesh', age: 50 },
    ];

    // Sample Columns data
    const columns = [
        {
            title: 'Username',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        },
    ];

    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Ant-Design Table Component</h4>
            <Table dataSource={dataSource} columns={columns} />
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://ant.design/components/table/