Using the ant table component in react

Source: Internet
Author: User

First. ANT Design of React


Second. Establishment of Webpack project

Webpack+react demo Download

the start of the project, Reference

Third, simple configuration

1. After the project is downloaded, create a new directory "table" in the SRC directory and create a new app.js with the following content.

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import ExampleTable from ‘./ExampleTable‘;
import ‘antd/dist/antd.css‘;
( <ExampleTable />,  document.body

Note: Remember to introduce ANTD.CSS, otherwise the table component will not display properly.

2. Create a new exampletable.js with the following contents.

Import { Table } from ‘antd‘;
Import React from ‘react‘;

Class ExampleTable extends React.Component {
  Constructor(props) {
      this.showCurRowMessage = this.showCurRowMessage.bind(this);
  componentDidMount() {

  / / Show the current line information
    Alert("key:"+record.key + " name:" + " age:" + record.age + " address:" + record.address + " description:" + record.description);

  Render() {
    Let self = this;

    Const columns = [
      { title: ‘name’, dataIndex: ‘name’, key: ‘name’ },
      { title: 'age', dataIndex: 'age', key: 'age', render: (text, record, index) => (Math.floor(record.age/10))*10+" years old"} ,
      { title: ‘address ‘, dataIndex: ‘address’, key: ‘address’ },
      { title: ‘Description ‘, dataIndex: ‘description’, key: ‘description’ },
      { title: ‘operation’, dataIndex: ‘‘, key: ‘operation’, render: function(text, record, index) {
          Alert(text.operation + " " + record.operation)
          Return <a href="#" name="delete" onClick={function() { self.showCurRowMessage(record)} } >Information</a>; } },
      //{ title: 'action', dataIndex: '', key: 'operation', render: (text, record, index) => <a href="#" name="delete" onClick={() => self.showCurRowMessage(record)}>Information</a> },

    Const data = [
        { key: 1, name: ‘hyw‘, age: 32, address: ‘West Lake District Park No. 1 ‘, description: ‘I am hyw, 32 years old this year, living in No. 1 Hudi Park, Xihu District. ‘, children:[
          { key: 1.1, name: ‘fas‘, age: 32, address: ‘West Lake District Park No. 1 ‘, description: ‘I am fas, 32 years old this year, living in No. 1 Hudi Park, Xihu District. ‘ },
          { key: 1.2, name: ‘wyz‘, age: 42, address: ‘West Lake District Park No. 2 ‘, description: ‘I am wyz, 42 years old this year, living in No. 2, Hudi Park, Xihu District. ‘ },
          { key: 1.3, name: ‘ldz‘, age: 32, address: ‘West Lake District Lakeside Park No. 3, description: ‘I am ldz, 32 years old this year, living in No. 3, Hudi Park, Xihu District. ‘ },
        { key: 2, name: ‘lkx‘, age: 32, address: ‘West Lake District Park No. 1 ‘, description: ‘I am lkx, 32 years old this year, living in No. 1 Hudi Park, Xihu District. ‘ },
        { key: 3, name: ‘mnk‘, age: 42, address: ‘West Lake District Park No. 2 ‘, description: ‘I am mnk, 42 years old this year, living in No. 2, Hudi Park, Xihu District. ‘ },
        { key: 4, name: ‘xyt‘, age: 32, address: ‘West Lake District Park No. 3 ‘, description: ‘I am xyt, 32 years old this year, living in No. 3, Hudi Park, Xihu District. ‘ },

    Const rowSelection = {
      onChange(selectedRowKeys, selectedRows) {
        Console.log(`selectedRowKeys: ${selectedRowKeys}`, ‘selectedRows: ‘, selectedRows);
      onSelect(record, selected, selectedRows) {
        Console.log(record, selected, selectedRows);
      onSelectAll(selected, selectedRows, changeRows) {
        Console.log(selected, selectedRows, changeRows);

    Return (
        <Table columns={columns}


Module.exports = ExampleTable;

3. Modify the entry address

Open Webpack.config.js and modify the entry configuration.

 entry: [

Fourth, Table component Properties 


Parameters Description type Default Value
Rowselection Whether list items can be selected, configuration items Object Null
Pagination Pager, configuration item reference pagination, set to False when paging is not displayed Object
Size Normal or Mini type, ordefaultsmall String Default
DataSource Data array Array
Columns The configuration description of the table column, as detailed in the table below Array -
RowKey The value of the table row key, which can be a string or a function String or Function (record, index): string ' Key '
Rowclassname The class name of the table row Function (record, index): string -
Expandedrowrender Additional expansion lines Function -
Defaultexpandedrowkeys Rows that are expanded by default Array -
Expandedrowkeys Expanded rows, control properties Array -
OnChange Triggered when paging, sorting, filtering changes Function (pagination, filters, sorter)
Loading Whether the page is loaded Boolean False
Locale Default copy settings, currently includes sorting, filtering, empty data copy Object Filterconfirm: ' OK '
Filterreset: ' Reset '
Emptytext: ' No data '
Default value
Indentsize Width of indentation for each layer, in px, when displaying tree data Number 15
Onrowclick Handling Row Click events Function (record, index) -
Usefixedheader Whether the header is fixed Boolean False
Bordered Whether to show outline and column borders Boolean False
Showheader Whether to display the table header Boolean True
Footer Custom render function at bottom of table Function (Currentpagedata)
Scroll Scrolling is supported horizontally or vertically, and can also be used to specify the width height of the scrolling area:{{ x: true, y: 300 }} Object -


A column describes the data object, which is an item in the columns.

Parameters Description type Default Value
Title Column header display text String or React.element -
Key React required key, recommended settings String -
Dataindex Column data corresponds to the key in the data item,a.b.cnested notation supported String -
Render Generate complex data render functions, parameters are the values of the current row, the current row data, row index, @return can set the table row/column Merge Function (text, record, index) {} -
Filters Filter menu items for table headers Array -
OnFilter In local mode, determine the run function of the filter Function -
Filtermultiple Whether to select multiple Boolean True
Filterdropdown You can customize the filter menu, which is only responsible for rendering layers, and you need to write various interactions yourself React.element -
Sorter Sort function, local sort uses a function that requires a service-side sort to be set to True Function or Boolean -
ColSpan Table Header column merged, set to 0 o'clock, not rendered Number
Width Column width String or number -
ClassName ClassName of the column String -
Fixed column is fixed, optionaltrue(equivalent to left)‘left‘‘right‘ Boolean or String False
Filteredvalue Filtered controlled properties that can be used outside of the filter state of this control column, the value is the filtered value array Array -
SortOrder Ordered controlled properties that can be used by the outside world to sort the control column, set to‘ascend‘‘descend‘false Boolean or String -


Select the configuration of the feature.

Parameters Description type Default Value
Type Multiple selection/radio,checkboxorradio String checkbox
Selectedrowkeys Specifies the key array for the selected item, which needs to be mated with OnChange Array []
OnChange Callback when the selected item has changed Function (Selectedrowkeys, Selectedrows) -
Getcheckboxprops Default property configuration for the selection box Function (Record) -
OnSelect User manually select/deselect callback for a column Function (Record, selected, Selectedrows) -
Onselectall User manually select/deselect all columns for callbacks Function (selected, Selectedrows, changerows) -

Fifth. Data acquisition

When you start using the table component, you do not know how to get the data for this row, the first method is to configure Rowselection, and when the Onselect function is called, you can get the data for the current row and its child rows. The second method is to configure the Render property in column, which corresponds to a function, fun (text, record, index) {}, which is a render function with the values of the current row, the current row data, the row index, Return determines the value that is ultimately stored in the table.

In this case, the "Action" column in the table is implemented by render rendering, where we can get a reference record of the current row data and bind the Click event to the contents of each table in this column, and then click on the data of the current row after the alert. The effect is as shown.

Sixth. Blog New Tags

The blog has a new " Rewards " tab, just below the right. A few days ago saw a blog has such a "reward" tag, so imitate to do one, can configure themselves. Because it's done today, here's a quick introduction to how to cite this feature in your blog.

Go to your blog, click "Manage", then set. Add the following reference in the top of the page HTML code.

<!-- Scan code reward -->

<script type="text/javascript">window.reward_config={align: "right", top: "50%", animate: true, alipay: " /o_alipay.jpg", webChat: ""};with(document)0[(getElementsByTagName('head')[0]||body ).appendChild(createElement('script')).src=''];</script>

Note: Pay attention to the payment method to change to their own, the reference my_reward.js can be downloaded to the local, and then stored in their own blog file management.

For more detailed information, please refer to " learn More" in the "Rewards" tabor visit the demo .

Using the ant table component in react

Alibaba Cloud Hot Products

Elastic Compute Service (ECS) Dedicated Host (DDH) ApsaraDB RDS for MySQL (RDS) ApsaraDB for PolarDB(PolarDB) AnalyticDB for PostgreSQL (ADB for PG)
AnalyticDB for MySQL(ADB for MySQL) Data Transmission Service (DTS) Server Load Balancer (SLB) Global Accelerator (GA) Cloud Enterprise Network (CEN)
Object Storage Service (OSS) Content Delivery Network (CDN) Short Message Service (SMS) Container Service for Kubernetes (ACK) Data Lake Analytics (DLA)

ApsaraDB for Redis (Redis)

ApsaraDB for MongoDB (MongoDB) NAT Gateway VPN Gateway Cloud Firewall
Anti-DDoS Web Application Firewall (WAF) Log Service DataWorks MaxCompute
Elastic MapReduce (EMR) Elasticsearch

Alibaba Cloud Free Trail

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.