Using the ant table component in react

First. ANT Design of React

Http://ant.design/docs/react/introduce

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‘;
ReactDOM.render
( <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) {
      Super(props);
      this.showCurRowMessage = this.showCurRowMessage.bind(this);
  }
  componentDidMount() {
    
  }

  / / Show the current line information
  showCurRowMessage(record){
    Alert("key:"+record.key + " name:"+record.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>; } },
      //simplified
      //{ 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 (
      <div>
        <Table columns={columns}
          rowSelection={rowSelection}
          dataSource={data}
          className="table"
        />
      </div>
    );

  }
}

Module.exports = ExampleTable;

3. Modify the entry address

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

 
 
 entry: [
      ‘webpack/hot/only-dev-server‘,
      "./src/table/app.js"
    ],

Fourth, Table component Properties 

1.Table

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	-

2.Column

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	-

3.rowSelection

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: "http://images.cnblogs.com/cnblogs_com/hujunzheng/855447 /o_alipay.jpg", webChat: "http://images.cnblogs.com/cnblogs_com/hujunzheng/855447/o_webChat.png"};with(document)0[(getElementsByTagName('head')[0]||body ).appendChild(createElement('script')).src='http://files.cnblogs.com/files/hujunzheng/my_reward.js'];</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