Editable Table With Ant Design

Introduction

In computer language, a table is an arrangement of information or data. It's represented in a more complex structure including a row and column. Tables are widely used in communication, research, and data analysis. In a React table we configure it with Ant editable format. Here, a table displays rows of data. Ant design is used to display a collection of structured data and to sort, search, paginate, and filter data. All possible ways we can use the table in ant design are explained with pro features.

Ant tables provide sorting, filtering, pagination, row selections, infinite scrolling, and many more features. We know that Ant Design is a system that is known as an open-source code for enterprise-level UI design languages and the React UI library. An Ant table is one of the major components in the Ant Design system. We previously wrote about React Table, and now we will follow the same checklist to review Ant tables. It would be interesting to read side by side how React Table and Ant Design provide the same table functionalities in different ways.

Table formation in Reactjs

In React we create a table like HTML. Before this, we have to know basic knowledge about Reactjs, Html, and CSS. A React table is an arrangement that organizes information into rows and columns. It is used to store and display data in a structured format.

We use it because react-table is a lightweight, fast, fully customizable (JSX, templates, state, styles, callbacks), and extendable Data-grid built for React. It is fully controllable via optional props and callbacks. It has client-side & Server-side pagination. And it has filter features, pivoting & aggregation, and also it works on minimal design & is easily theme-able.

Let’s create a table,

To create a table first we have to start with creating a React App by using commands.

$ npx create-react-app app-name

Now we have to install a react-table. We can install a react-table with some commands also. Once, we have installed the react-table, we need to import the react-table into the react component. To do this, open the App.js file from the src/ folder and add the commands

$ npm install react-table 
/*Src/App.js*/
import ReactTable from "react-table";

Example

At first, we will see how to create a table using the hardcoded values. We create a table simply by manually iterating over the array using a loop. If we have data then we need to render it with a component and if we need to create then code by importing a CSS file to look better.

import './App.css';
  
function App() {
  return (
    <div className="App">
      <table>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
        <tr>
          <td>Gungun</td>
          <td>19</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>Subh</td>
          <td>25</td>
          <td>Male</td>
        </tr>
      </table>
    </div>
  );
}

And here our table is created,

Now, we can dynamically render data from an array. Place of manually iterating over the array using a loop, we can simply use the inbuilt Array. map() method. The Array. map() method allows you to iterate over an array and modify its elements using a callback function. The callback function will then be executed on each of the array's elements by using this code.

import './App.css';
  
const data = [
  { name: "Gungun", age: 19, gender: "Female" },
  { name: "Subh", age: 25, gender: "Male"},
]
  
function App() {
  return (
    <div className="App">
      <table>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
        {data.map((val, key) => {
          return (
            <tr key={key}>
              <td>{val.name}</td>
              <td>{val.age}</td>
              <td>{val.gender}</td>
            </tr>
          )
        })}
      </table>
    </div>
  );
}
  
export default App;

Then, Output will display on local-host in ower default browse when we run command –# npm start

Create a table with Ant Design

The Ant Design system is an open-source code for enterprise-level UI design languages and the React UI library. An Ant table is one of the major components in the Ant Design system. In ReactJS UI Ant Design Table Component is used to display rows of data.

Let’s Create a table,

To create a table first we have to start with creating a React App by using commands

$ npx create-react-app app-name

Now we have to install an and-table. We can install and-table with some commands also. Once, we have installed the and-table, we need to import the react-table into the react component. To do this, open the App.js file from the src/ folder and add the commands,

$ npm install antd 
Src/App.js
import antd Table from "antd-table";

Explore the table capability

A basic Ant table is <Table dataSource={data} columns={columns} />.Which Means

Data Source is an array of rows to be displayed on the table.
A column is an array of columns.
The following are definitions of columns and data that are copied to src/dataSource.js.

Example

import React from 'react'
import "antd/dist/antd.css";
import { Table } from 'and';
  
export default function App() {
  
    // Sample Data for the table
    const dataSource = [
        { key: '1', username: 'Raw', age: 20 },
        { key: '2', username: 'John', age: 25 },
        { key: '3', username: 'Caan', age: 30 },
    ];
  
    // Sample Columns data
    const columns = [
        {
            title: 'Username',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        },
    ];
  
    return (
        <div style={{
            display: 'block', width: 600, padding: 30
        }}>
            <h4>ReactJS Ant-Design Table Component</h4>
            <Table dataSource={dataSource} columns={columns} />
        </div>
    );
}

Run command – npm start to view the output

Conclusion

By using some hooks and set state function we can easily make an editable table with ant table. One of the best ways includes pro features. We learned Ant tables do not provide global filtering, but it can be accomplished by filtering data.

And, as a component library serving the design system for enterprise-class products, it has provided a powerful Table, but the differences in business still require some customization, with many different data formats, amounts, dates, numbers, etc., including some commonly used operations, page number switching, and re-requests, Refreshing data, etc., these are easy duplications, but they are inevitable.
Portable is designed to address these issues by providing presets at the Table level that you can support valueType of data, such as amounts, dates, serial numbers, progress bars, etc., and can greatly simplify the code with the hashtags value num.

Portable takes over page-turning, page code changes, and in theory, you can generate a full-featured table with configuration columns and request properties, complete paginated queries, refreshes, column property modifications, and more.

In many projects Table's action buttons and title and positions are inconsistent, even in a project it can be somewhat different. ProTable provides the corresponding specifications, toolBar Render and header Title implementation specification, and toolbar Render Render Supports the return of a React Node array, automatic additions, and other styles, and toolBar Render provides data such as actions and columns currently selected for some quick action.

A complete page requires a query form in addition to a Table, which is largely generated from columns, some of which correspond almost to the column. To reduce this amount of work, ProTable automatically generates query forms through the configuration of columns.

So, for an editable table, we can use any of the mentioned formates with the pro feature of ant design which is suitable to add filtration easily.