Introduction
An enterprise-class UI design language and React UI library with high-quality React components, one of the best React UI libraries for enterprises.
A table displays rows of data.
The table is used to display a collection of structured data, to sort, search, paginate, and filter data.
Preconditions
- Javascript
- Basic knowledge of React JS
- Node.js
- V.S. Code,Visual Studio
- typescript
We cover the below things in this article:
- Create React application
- Installation of Ant Design UI
- How to create a table of Ant Design UI in React js.
Here we will follow the steps for creating a tree with nodes.
Step 1. Run the below command to create a React.js project.
npx create-react-app my-app --template typescript
Step 2. Run the below command to install Ant Design UI.
npm i @ant-design/icons
npm i antd
Create the files according to the below image.
![Ant Design UI In ReactJS]()
Step 3. Add the below code in the App.tsx.
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
interface DataType {
key: string;
name: string;
age: number;
address: string;
tags: string[];
}
const columns: ColumnsType<DataType> = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: (text) => <a>{text}</a>,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
render: (_, { tags }) => (
<>
{tags.map((tag) => {
let color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (
<Tag color={color} key={tag}>
{tag.toUpperCase()}
</Tag>
);
})}
</>
),
},
{
title: 'Action',
key: 'action',
render: (_, record) => (
<Space size="middle">
<a>Invite {record.name}</a>
<a>Delete</a>
</Space>
),
},
];
const data: DataType[] = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sydney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
function App() {
return (
<div className="App">
<Table columns={columns} dataSource={data} />
</div>
);
}
export default App;
Step 4. Add the below code in package.json
{
"name": "tableappant",
"version": "0.1.0",
"private": true,
"dependencies": {
"@ant-design/icons": "^5.1.4",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.34",
"@types/react": "^18.2.8",
"@types/react-dom": "^18.2.4",
"antd": "^5.5.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Step 5. Run the below command to run the application.
npm start
After running this command, we will get this Table.
![Ant Design UI In ReactJS]()
Summary
In this article, we learned how to create a Table using Ant Design UI with React JS and Typescript.