ReactJS UI Ant Design Table Component is used to display rows of data. So, in this article, we will see what is the Ant Design Table Component in ReactJS.
Ant Design Table Component in ReactJS
Ant Design is a library that contains pre-built components. Also, it is very easy to integrate this library. Users can use this library to display data in the form of table format.
Most Important:- 7 Top ReactJs Features Which Make it Best For Development
Below we have listed the properties of the ReactJS Ant Design Table Component.
Table Props:
- Bordered: You can use this prop to indicate whether to show all table borders or not.
- Columns: You can use this prop to denote the columns of the table.
- Components: You can use this prop to override default table elements,
- DataSource: You can use this prop to denote the data record array to be displayed.
- Expandable: You can use this prop to configure expandable content.
- Footer: You can use this prop to denote the Table footer renderer.
- GetPopupContainer: It is the rendering container of dropdowns in the table.
- Loading: You can use this prop to denote the loading status of the table.
- Locale: It is the i18n text including filter, sort, empty text, etc.
- Pagination: You can use this prop for the configuration of pagination.
- RowClassName: You can use this prop to denote the row’s className.
- RowKey: You can use this prop to denote the row’s unique key.
- RowSelection: You can use this prop to denote the row selection config.
- Scroll: You can use this prop to indicate whether the table can be scrollable or not.
- ShowHeader: You can use this prop to indicate whether to show the table header or not.
- ShowSorterTooltip: You can use this prop for the header to show the next sorter direction tooltip.
- Size: You can use this prop to denote the size of the table.
- SortDirections: You can use this prop to denote the sort directions.
- Sticky: You can use this prop to set a sticky header and scroll bar.
- Summary: You can use this prop to denote the summary content.
- TableLayout: You can use this prop to denote the table-layout attribute of the table element.
- Title: You can use this prop to denote the table title renderer.
- OnChange: It is a callback function that is executed when pagination, filters, or sorter is changed.
Column Props:
- Align: You can use this prop to specify how that column is aligned.
- ClassName: You can use this prop to denote the className of this column.
- SolSpan: You can use this prop to denote this column’s title span.
- DataIndex: You can use this prop to display the data record field.
- DefaultFilteredValue: You can use this prop to denote the default filtered values.
- DefaultSortOrder: You can use this prop to denote the default order of sorted values.
- Editable: You can use this prop to indicate whether a column can be edited.
- Ellipsis: You can use this prop to denote the ellipsis cell content.
- FilterDropdown: You can use this prop to customize the filter overlay.
- FilterDropdownVisible: You can use this prop to indicate whether filterDropdown is visible or not.
- Filtered: You can use this prop to indicate whether the dataSource is filtered or not.
- FilteredValue: You can use this prop to denote the controlled, filtered value, filter icon will highlight.
- FilterIcon: You can use this prop for the customized filter icon.
- FilterMultiple: You can use this prop to indicate whether multiple filters can be selected or not.
- Filters: You can use this prop to denote the filter menu config.
- Fixed: You can use this prop to set columns to be fixed.
- Key: You can use this prop to denote the unique key of this column.
- Render: It is the renderer of the table cell.
- Responsive: You can use this prop to denote the list of breakpoints at which to display this column.
- ShouldCellUpdate: You can use this prop to denote the control cell render logic.
- ShowSorterTooltip: You can use this prop to override showSorterTooltip in the table if the header shows the next sorter direction tooltip.
Creating React Application:
1) As always, you will have to create a React application. Use the below command to create an app:
npx create-react-app foldername
2) After you create your project folder, i.e., folder name, you have to move to it using the following command:
cd foldername
3) You have created the folder. Now you have to install a few modules that are required. You can use the below command:
npm install antd
Example:
import React from ‘react’
import “antd/dist/antd.css”;
import { Table } from ‘antd’;
export default function App() {
// Sample Data for the table
constdataSource=[
{ key:’1′, username:’Nick’, age:22},
{ key:’2′, username:’Sam’, age:21},
{ key:’3′, username:’Tim’, age:20},
{ key:’4′, username:’Rose’, age:22},
{ key:’5′, username:’Natalie’, age:20},
];
// Sample Columns data
constcolumns=[
{
title: ‘Username’,
dataIndex: ‘username’,
key: ‘username’,
},
{
title: ‘Age’,
dataIndex: ‘age’,
key: ‘age’,
},
];
return(
<divstyle={{
display: ‘block’, width: 700, padding: 30
}}>
<h1>ReactJS Ant-Design Table Component</h1>
<Table dataSource={dataSource} columns={columns} />
</div>
);
}
Now you have to run the application. You can use the following command from the root directory of the project:
npm start
Output:
Conclusion:
So, in this article, we have been through what is the Ant Design Table Component in ReactJS. Also, feel free to comment with your suggestions and feedback on the post. Moreover, you can get the best mobile app developers from BOSC Tech Labs, who will help you in your project. They can assist you in developing your customized web app. So contact us to hire experienced ReactJS developers.