News EngineNews Engine
  • Business
    • News
    • Finance
    • Automobile
  • Technology
    • Gaming
    • Tips & Tricks
  • Digital Marketing
    • Social Media
    • Digital Currency
  • Education
  • Fashion
    • Lifestyle
  • Health And Fitness
    • Food
    • Travel
  • Entertainment
    • Sports
    • Movies
    • Music
  • General
    • Real Estate
    • Home Improvement
    • Featured
    • Hotel And Resort
    • Pet And Wildlife

Subscribe to Updates

Get the Latest Creative News from News Engine about Business, Technology and World Trends.

Don't Miss

Instagram Story Viewer: Everything you need to know

June 7, 2023

Why do we Call Math as the Cornerstone to a Good Education?

June 6, 2023

Tips to Find Out the Best CV Creator

April 5, 2023

Quizz zz: The Fun and Interactive Way to Learn and Test Your Knowledge!

March 9, 2023

Liquid Waste Tanker Cleaning Services: A Comprehensive Guide

February 3, 2023
Load More
Facebook Twitter Instagram Pinterest LinkedIn RSS
  • About Us
  • Contact Us
  • Write For Us
  • Guest Post
  • Privacy Policy
  • Terms And Conditions
Facebook Twitter LinkedIn Instagram Pinterest RSS
News EngineNews Engine
Write For Us
  • Business
    1. News
    2. Finance
    3. Automobile
    Featured
    Business

    Remembering George Floyd: How DEI Has Changed

    By David FisherOctober 31, 20223 Mins Read
    Recent

    Remembering George Floyd: How DEI Has Changed

    October 31, 2022

    Differences between Sublimation and Heat Press

    October 31, 2022

    Ways To Maximize Profit On Your BigCommerce Store

    October 25, 2022
  • Technology
    1. Gaming
    2. Tips & Tricks
    Featured
    Technology

    Instagram Story Viewer: Everything you need to know

    By Amelia BreeJune 7, 20235 Mins Read
    Recent

    Instagram Story Viewer: Everything you need to know

    June 7, 2023

    What is the Difference Between React And React Native?

    November 18, 2022

    Is A Tower Server A Good Fit For My Business?

    November 13, 2022
  • Digital Marketing
    1. Social Media
    2. Digital Currency
    Featured
    Digital Marketing

    How to Price PPC Services: Step-by-Step Guide

    By News EngineNovember 18, 20226 Mins Read
    Recent

    How to Price PPC Services: Step-by-Step Guide

    November 18, 2022

    eCommerce PPC: A Beginner’s Guide To Start

    November 8, 2022

    How Digital Marketing Helps Businesses to Grow?

    October 24, 2022
  • Education
    Featured
    Education

    Why do we Call Math as the Cornerstone to a Good Education?

    By Amelia BreeJune 6, 20234 Mins Read
    Recent

    Why do we Call Math as the Cornerstone to a Good Education?

    June 6, 2023

    Quizz zz: The Fun and Interactive Way to Learn and Test Your Knowledge!

    March 9, 2023

    Common ECommerce Mistakes To Avoid

    September 19, 2022
  • Fashion
    1. Lifestyle
    Featured
    Fashion

    How Do You Edit a Picture of Jewelry?

    By News EngineOctober 21, 20226 Mins Read
    Recent

    How Do You Edit a Picture of Jewelry?

    October 21, 2022

    Summer Fashion: All You Need to Know About Leopard Prints for Summer 2022

    September 26, 2022

    12 Best Shopping Sites For Plus Size Women’s Clothing

    September 26, 2022
  • Health And Fitness
    1. Food
    2. Travel
    Featured
    Health And Fitness

    Say Goodbye to All the Gynecology Conditions

    By News EngineAugust 22, 20223 Mins Read
    Recent

    Say Goodbye to All the Gynecology Conditions

    August 22, 2022

    Everything You Need to Know About Vitamin K2

    August 22, 2022

    Reasons Why Tiger Balm is the Best Pain Relief Balm in the Market

    August 4, 2022
  • Entertainment
    1. Sports
    2. Movies
    3. Music
    Featured
    Entertainment

    How to Get Tickets For Your Favorite Team: Things You Need to Know

    By News EngineAugust 10, 20223 Mins Read
    Recent

    How to Get Tickets For Your Favorite Team: Things You Need to Know

    August 10, 2022

    IFVOD TV: Complete Details With Features, Reviews & Uses

    August 2, 2022

    College Dorm Party: Everything You Need To Know in Detail

    July 17, 2022
  • General
    1. Real Estate
    2. Home Improvement
    3. Featured
    4. Hotel And Resort
    5. Pet And Wildlife
    Featured
    General

    Tips to Find Out the Best CV Creator

    By News EngineApril 5, 20234 Mins Read
    Recent

    Tips to Find Out the Best CV Creator

    April 5, 2023

    Eureka Typhon Chair: Is it The Right Fit For You as a Gamer?

    December 7, 2022

    How Drones, FSM Apps & Other Tech Help with Hurricane Ian Disaster Recovery Efforts?

    October 19, 2022
News EngineNews Engine
Home»Technology»What is Ant Design Table Component in ReactJS?
Technology

What is Ant Design Table Component in ReactJS?

By News EngineDecember 23, 2021No Comments5 Mins Read
Facebook Twitter Pinterest LinkedIn Tumblr Email Reddit WhatsApp
Share
Facebook Twitter LinkedIn Pinterest Tumblr Reddit

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.

Table of Content

  • Ant Design Table Component in ReactJS
    • Table Props:
      • Column Props:
      • Creating React Application:
      • Example:
      • Output:
      • Conclusion:

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:

ReactJS Ant-Design Table Component

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.

Ant Design Table Component Ant Design Table Component in ReactJS ReactJS Ant Design Table Component ReactJS UI Ant Design Table Component
Share. Facebook Twitter Pinterest LinkedIn Tumblr Email Reddit
Previous ArticleWhat Are The Direct Benefits Of The Internet Of Things? 
Next Article 6 Main Advantages Why Students Prefer To Use Pre-Written Essays

Related Posts

Instagram Story Viewer: Everything you need to know

Technology

What is the Difference Between React And React Native?

Technology

Is A Tower Server A Good Fit For My Business?

Technology

Leave A Reply Cancel Reply

Advertise With Us

advertise here

Featured Posts

Instagram Story Viewer: Everything you need to know

June 7, 2023

Why do we Call Math as the Cornerstone to a Good Education?

June 6, 2023

Tips to Find Out the Best CV Creator

April 5, 2023

Quizz zz: The Fun and Interactive Way to Learn and Test Your Knowledge!

March 9, 2023

Liquid Waste Tanker Cleaning Services: A Comprehensive Guide

February 3, 2023
Follow Us
  • Facebook
  • Twitter
  • Pinterest
  • Instagram
  • LinkedIn
On Trending
Technology

Instagram Story Viewer: Everything you need to know

By Amelia BreeJune 7, 20235 Mins Read

Introduction As a result of its aesthetically attractive content and interesting features, Instagram has grown…

Why do we Call Math as the Cornerstone to a Good Education?

June 6, 2023

Tips to Find Out the Best CV Creator

April 5, 2023

Quizz zz: The Fun and Interactive Way to Learn and Test Your Knowledge!

March 9, 2023

Liquid Waste Tanker Cleaning Services: A Comprehensive Guide

February 3, 2023

Subscribe to Updates

Get the Latest Creative News from News Engine about Business, Technology and World Trends.

About Us:
About Us:

Our information services are about updates and include everything from all thoughts about daily life to beginning global findings. We are accepting new partners right now.

Email Us: newsenginenet@gmail.com

Facebook Twitter Instagram Pinterest LinkedIn
Subscribe to Updates

Get the Latest Creative News from News Engine about Business, Technology and Latest Trends Around The World.

Important Links
  • Homepage
  • About Us
  • Contact Us
  • Write For Us
  • Privacy Policy
  • Terms And Conditions
  • Guest Post
Copyright © 2021-23. Designed by News Engine.
  • About Us
  • Contact Us
  • Write For Us
  • Guest Post
  • Privacy Policy
  • Terms And Conditions

Type above and press Enter to search. Press Esc to cancel.

Go to mobile version