Open In App

ReactJS UI Ant Design List Component

Last Updated : 02 Jun, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

Ant Design Library has this component pre-built, and it is very easy to integrate as well. List Component is used to display a simple list to the user, and it can be used to display content related to a single subject. We can use the following approach in ReactJS to use the Ant Design List Component.

List Props:

  • bordered: It is used to toggle the rendering of the border around the list.  
  • dataSource: It is used to denote the DataSource array for the list.  
  • footer: It is used for the List footer renderer.  
  • grid: It is used to denote the grid type of list.  
  • header: It is used for the List header renderer.  
  • itemLayout: It is used to denote the layout of the list.
  • loading: It is used to show a loading indicator while the contents of the list are being fetched.
  • loadMore: It is used to show a load more content.  
  • locale: It is the i18n text including empty text.  
  • pagination: It is used to define the Pagination config.
  • renderItem: It is used to customize list items when using the dataSource.  
  • rowKey: It is used to denote the Item’s unique key.
  • size: It is used to denote the size of the list.
  • split: It is used to toggle the rendering of the split under the list item.

Pagination Props:

  • position: It is used to specify the position of Pagination.

List grid Props:

  • column: It is used to denote the column of the grid. 
  • gutter: It is used to denote the spacing between the grid.
  • xs: It is used for <576px column of the grid.
  • sm: It is used for ≥576px column of the grid.
  • md: It is used for ≥768px column of the grid.
  • lg: It is used for ≥992px column of the grid.
  • xl: It is used for ≥1200px column of the grid.
  • xxl: It is used for ≥1600px column of the grid.

 

List.Item Props:

  • actions: It is used to denote the action content of the list items.  
  • extra: It is used to denote the extra content of the list item. 

List.Item.Meta Props:

  • avatar: It is used to denote the avatar of the list item
  • description: It is used to denote the description of the list item.
  • title: It is used to denote the title of the list item.

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 { List } from 'antd';
  
export default function App() {
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design List Component</h4>
      <List
        header={<div>Sample HEADER</div>}
        footer={<div>Sample FOOTER</div>}
        bordered
        dataSource={[
          'Sample Line 1',
          'Sample Line 2',
          'Sample Line 3',
          'Sample Line 4',
        ]}
        renderItem={item => (
          <List.Item>
            {item}
          </List.Item>
        )}
      />
    </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/list/



Previous Article
Next Article

Similar Reads

ReactJS UI Ant Design Result Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Result Component is used to feedback the results of a series of operational tasks. We can use the following approach in ReactJS to use the Ant Design Affix Component. Result Props: extra: It is used to define the operating area.icon: It is used to pass the cu
2 min read
ReactJS UI Ant Design Typography Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Typography component is useful for basic text writing, body text, including headings, lists, and many more. We can use the following approach in ReactJS to use the Ant Design Typography Component. Typography.Text Props: code: It is used for the code style.cop
5 min read
ReactJS UI Ant Design Statistic Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Statistic Component is used when we want to display statistic numbers. It can be used in applications that have to display statistic data like games applications for scores, cricket scores website, etc. We can use the following approach in ReactJS to use the
3 min read
ReactJS UI Ant Design Tooltip Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Tooltip Component is used to display the information in the form of text when users focus on, hover over, or tap an element. We can use the following approach in ReactJS to use the Ant Design Tooltip Component. Tooltip Props: title: It is used to describe the
3 min read
ReactJS UI Ant Design Divider Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Divider Component provides a way to separate the different content using a divider line. We can use the following approach in ReactJS to use the Ant Design Divider Component. Divider Props: className: It is used to denote the class name for the container.dash
2 min read
ReactJS UI Ant Design Timeline Component
Timeline is used to display a series of information that needs to be ordered by time (ascending or descending). Ant Design Library has this component pre-built, and it is very easy to integrate as well. We can use this Timeline component using the following approach easily. Syntax: &lt;Timeline&gt; &lt;Timeline.Item&gt; Content of the timeline &lt;
2 min read
ReactJS UI Ant Design Popconfirm Component
Popconfirm is a simple and compact confirmation dialog of an action. It is basically used to ask for user confirmation. Ant Design Library has this component pre-built, and it is very easy to integrate as well. We can use this Popconfirm component using the following process easily. Syntax: &lt;Popconfirm title="Open Popconfirm?" onConfirm={confirm
2 min read
ReactJS UI Ant Design Spin Component
A spinner is used for displaying the loading state of a page or a section in our projects. It is basically used when the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively mitigate users' uneasiness. Ant Design Library has this component pre-built, and it is very easy to integrate a
2 min read
ReactJS UI Ant Design Steps Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Steps Component is a kind of navigation bar that is helpful in a way that it guides users through the steps of a task. We can use the following approach in ReactJS to use the Ant Design Steps Component. Syntax: &lt;Steps current={ }&gt; &lt;Step title=" " des
3 min read
ReactJS UI Ant Design Pagination Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Pagination Component allows the user to show the page number and switch between pages easily with the next and previous button. We can use the following approach in ReactJS to use the Ant Design Pagination Component. Syntax: &lt;Pagination defaultCurrent={ }
3 min read