React table footer

Continue

React table footer

import { Table, Tag, Space } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', render: text => {text}, }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, { title: 'Tags', key: 'tags', dataIndex: 'tags', render: tags => ( {tags.map(tag => { let color = tag.length > 5 ? 'geekblue' : 'green'; if (tag === 'loser') { color = 'volcano'; } return ( {tag.toUpperCase()} ); })} ), }, { title: 'Action', key: 'action', render: (text, record) => ( Invite {record.name} Delete ), }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', tags: ['nice', 'developer'], }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', tags: ['loser'], }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', tags: ['cool', 'teacher'], }, ]; ReactDOM.render(, mountNode);import { Table, Tag, Space } from 'antd'; const { Column, ColumnGroup } = Table; const data = [ { key: '1', firstName: 'John', lastName: 'Brown', age: 32, address: 'New York No. 1 Lake Park', tags: ['nice', 'developer'], }, { key: '2', firstName: 'Jim', lastName: 'Green', age: 42, address: 'London No. 1 Lake Park', tags: ['loser'], }, { key: '3', firstName: 'Joe', lastName: 'Black', age: 32, address: 'Sidney No. 1 Lake Park', tags: ['cool', 'teacher'], }, ]; ReactDOM.render( ( {tags.map(tag => ( {tag} ))} )} /> ( Invite {record.lastName} Delete )} /> , mountNode, );import React, { useState } from 'react'; import { Table, Radio, Divider } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', render: (text: string) => {text}, }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }, ]; interface DataType { key: React.Key; name: string; age: number; address: string; } const data: DataType[] = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, { key: '4', name: 'Disabled User', age: 99, address: 'Sidney No. 1 Lake Park', }, ]; const rowSelection = { onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => { console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); }, getCheckboxProps: (record: DataType) => ({ disabled: record.name === 'Disabled User', name: record.name, }), }; const Demo = () => { const [selectionType, setSelectionType] = useState('checkbox'); return ( { setSelectionType(value); }} value={selectionType} > Checkbox radio ); }; ReactDOM.render(, mountNode);NameAgeAddressEdward King 032London, Park Lane no. 0Edward King 132London, Park Lane no. 1Edward King 232London, Park Lane no. 2Edward King 332London, Park Lane no. 3Edward King 432London, Park Lane no. 4Edward King 532London, Park Lane no. 5Edward King 632London, Park Lane no. 6Edward King 732London, Park Lane no. 7Edward King 832London, Park Lane no. 8Edward King 932London, Park Lane no. 9import { Table, Button } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }, ]; const data = []; for (let i = 0; i < 46; i++) { data.push({ key: i, name: `Edward King ${i}`, age: 32, address: `London, Park Lane no. ${i}`, }); } class App extends ponent { state = { selectedRowKeys: [], loading: false, }; start = () => { this.setState({ loading: true }); setTimeout(() => { this.setState({ selectedRowKeys: [], loading: false, }); }, 1000); }; onSelectChange = selectedRowKeys => { console.log('selectedRowKeys changed: ', selectedRowKeys); this.setState({ selectedRowKeys }); }; render() { const { loading, selectedRowKeys } = this.state; const rowSelection = { selectedRowKeys, onChange: this.onSelectChange, }; const hasSelected = selectedRowKeys.length > 0; return ( Reload {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''} ); } } ReactDOM.render(, mountNode);NameAgeAddressEdward King 032London, Park Lane no. 0Edward King 132London, Park Lane no. 1Edward King 232London, Park Lane no. 2Edward King 332London, Park Lane no. 3Edward King 432London, Park Lane no. 4Edward King 532London, Park Lane no. 5Edward King 632London, Park Lane no. 6Edward King 732London, Park Lane no. 7Edward King 832London, Park Lane no. 8Edward King 932London, Park Lane no. 9import { Table } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }, ]; const data = []; for (let i = 0; i < 46; i++) { data.push({ key: i, name: `Edward King ${i}`, age: 32, address: `London, Park Lane no. ${i}`, }); } class App extends ponent { state = { selectedRowKeys: [], }; onSelectChange = selectedRowKeys => { console.log('selectedRowKeys changed: ', selectedRowKeys); this.setState({ selectedRowKeys }); }; render() { const { selectedRowKeys } = this.state; const rowSelection = { selectedRowKeys, onChange: this.onSelectChange, selections: [ Table.SELECTION_ALL, Table.SELECTION_INVERT, Table.SELECTION_NONE, { key: 'odd', text: 'Select Odd Row', onSelect: changableRowKeys => { let newSelectedRowKeys = []; newSelectedRowKeys = changableRowKeys.filter((key, index) => { if (index % 2 !== 0) { return false; } return true; }); this.setState({ selectedRowKeys: newSelectedRowKeys }); }, }, { key: 'even', text: 'Select Even Row', onSelect: changableRowKeys => { let newSelectedRowKeys = []; newSelectedRowKeys = changableRowKeys.filter((key, index) => { if (index % 2 !== 0) { return true; } return false; }); this.setState({ selectedRowKeys: newSelectedRowKeys }); }, }, ], }; return ; } } ReactDOM.render(, mountNode);Jim Green42London No. 1 Lake ParkJohn Brown32New York No. 1 Lake ParkJoe Black32Sidney No. 1 Lake ParkJim Red32London No. 2 Lake Parkimport { Table } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', filters: [ { text: 'Joe', value: 'Joe', }, { text: 'Jim', value: 'Jim', }, { text: 'Submenu', value: 'Submenu', children: [ { text: 'Green', value: 'Green', }, { text: 'Black', value: 'Black', }, ], }, ], onFilter: (value, record) => record.name.indexOf(value) === 0, sorter: (a, b) => a.name.length - b.name.length, sortDirections: ['descend'], }, { title: 'Age', dataIndex: 'age', defaultSortOrder: 'descend', sorter: (a, b) => a.age - b.age, }, { title: 'Address', dataIndex: 'address', filters: [ { text: 'London', value: 'London', }, { text: 'New York', value: 'New York', }, ], onFilter: (value, record) => record.address.indexOf(value) === 0, }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park', }, ]; function onChange(pagination, filters, sorter, extra) { console.log('params', pagination, filters, sorter, extra); } ReactDOM.render(, mountNode);NameJohn Brown986070Jim Green986689Joe Black989070Jim Red889989import { Table } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Chinese Score', dataIndex: 'chinese', sorter: { compare: (a, b) => a.chinese - b.chinese, multiple: 3, }, }, { title: 'Math Score', dataIndex: 'math', sorter: { compare: (a, b) => a.math - b.math, multiple: 2, }, }, { title: 'English Score', dataIndex: 'english', sorter: { compare: (a, b) => a.english - b.english, multiple: 1, }, }, ]; const data = [ { key: '1', name: 'John Brown', chinese: 98, math: 60, english: 70, }, { key: '2', name: 'Jim Green', chinese: 98, math: 66, english: 89, }, { key: '3', name: 'Joe Black', chinese: 98, math: 90, english: 70, }, { key: '4', name: 'Jim Red', chinese: 88, math: 99, english: 89, }, ]; function onChange(pagination, filters, sorter, extra) { console.log('params', pagination, filters, sorter, extra); } ReactDOM.render(, mountNode);Clear filters and sortersJohn Brown32New York No. 1 Lake ParkJim Green42London No. 1 Lake ParkJoe Black32Sidney No. 1 Lake ParkJim Red32London No. 2 Lake Parkimport { Table, Button, Space } from 'antd'; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park', }, ]; class App extends ponent { state = { filteredInfo: null, sortedInfo: null, }; handleChange = (pagination, filters, sorter) => { console.log('Various parameters', pagination, filters, sorter); this.setState({ filteredInfo: filters, sortedInfo: sorter, }); }; clearFilters = () => { this.setState({ filteredInfo: null }); }; clearAll = () => { this.setState({ filteredInfo: null, sortedInfo: null, }); }; setAgeSort = () => { this.setState({ sortedInfo: { order: 'descend', columnKey: 'age', }, }); }; render() { let { sortedInfo, filteredInfo } = this.state; sortedInfo = sortedInfo || {}; filteredInfo = filteredInfo || {}; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', filters: [ { text: 'Joe', value: 'Joe' }, { text: 'Jim', value: 'Jim' }, ], filteredValue: filteredInfo.name || null, onFilter: (value, record) => record.name.includes(value), sorter: (a, b) => a.name.length - b.name.length, sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order, ellipsis: true, }, { title: 'Age', dataIndex: 'age', key: 'age', sorter: (a, b) => a.age - b.age, sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order, ellipsis: true, }, { title: 'Address', dataIndex: 'address', key: 'address', filters: [ { text: 'London', value: 'London' }, { text: 'New York', value: 'New York' }, ], filteredValue: filteredInfo.address || null, onFilter: (value, record) => record.address.includes(value), sorter: (a, b) => a.address.length - b.address.length, sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order, ellipsis: true, }, ]; return ( Sort age Clear filters Clear filters and sorters ); } } ReactDOM.render(, mountNode);John Brown32New York No. 1 Lake ParkJoe Black42London No. 1 Lake ParkJim Green32Sidney No. 1 Lake ParkJim Red32London No. 2 Lake Parkimport { Table, Input, Button, Space } from 'antd'; import Highlighter from 'react-highlight-words'; import { SearchOutlined } from '@ant-design/icons'; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Joe Black', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Jim Green', age: 32, address: 'Sidney No. 1 Lake Park', }, { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park', }, ]; class App extends ponent { state = { searchText: '', searchedColumn: '', }; getColumnSearchProps = dataIndex => ({ filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => ( { this.searchInput = node; }} placeholder={`Search ${dataIndex}`} value={selectedKeys[0]} onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])} onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)} style={{ marginBottom: 8, display: 'block' }} /> this.handleSearch(selectedKeys, confirm, dataIndex)} icon={} size="small" style={{ width: 90 }} > Search this.handleReset(clearFilters)} size="small" style={{ width: 90 }}> Reset { confirm({ closeDropdown: false }); this.setState({ searchText: selectedKeys[0], searchedColumn: dataIndex, }); }} > Filter ), filterIcon: filtered => , onFilter: (value, record) => record[dataIndex] ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) : '', onFilterDropdownVisibleChange: visible => { if (visible) { setTimeout(() => this.searchInput.select(), 100); } }, render: text => this.state.searchedColumn === dataIndex ? ( ) : ( text ), }); handleSearch = (selectedKeys, confirm, dataIndex) => { confirm(); this.setState({ searchText: selectedKeys[0], searchedColumn: dataIndex, }); }; handleReset = clearFilters => { clearFilters(); this.setState({ searchText: '' }); }; render() { const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', width: '30%', ...this.getColumnSearchProps('name'), }, { title: 'Age', dataIndex: 'age', key: 'age', width: '20%', ...this.getColumnSearchProps('age'), }, { title: 'Address', dataIndex: 'address', key: 'address', ...this.getColumnSearchProps('address'), sorter: (a, b) => a.address.length - b.address.length, sortDirections: ['descend', 'ascend'], }, ]; return ; } } ReactDOM.render(, mountNode);import { Table } from 'antd'; import reqwest from 'reqwest'; const columns = [ { title: 'Name', dataIndex: 'name', sorter: true, render: name => `${name.first} ${name.last}`, width: '20%', }, { title: 'Gender', dataIndex: 'gender', filters: [ { text: 'Male', value: 'male' }, { text: 'Female', value: 'female' }, ], width: '20%', }, { title: 'Email', dataIndex: 'email', }, ]; const getRandomuserParams = params => ({ results: params.pagination.pageSize, page: params.pagination.current, ...params, }); class App extends ponent { state = { data: [], pagination: { current: 1, pageSize: 10, }, loading: false, }; componentDidMount() { const { pagination } = this.state; this.fetch({ pagination }); } handleTableChange = (pagination, filters, sorter) => { this.fetch({ sortField: sorter.field, sortOrder: sorter.order, pagination, ...filters, }); }; fetch = (params = {}) => { this.setState({ loading: true }); reqwest({ url: ' , method: 'get', type: 'json', data: getRandomuserParams(params), }).then(data => { console.log(data); this.setState({ loading: false, data: data.results, pagination: { ...params.pagination, total: 200, }, }); }); }; render() { const { data, pagination, loading } = this.state; return ( record.login.uuid} dataSource={data} pagination={pagination} loading={loading} onChange={this.handleTableChange} /> ); } } ReactDOM.render(, mountNode);NameAgeAddressJohn Brown32New York No. 1 Lake ParkJim Green42London No. 1 Lake ParkJoe Black32Sidney No. 1 Lake ParkNameAgeAddressJohn Brown32New York No. 1 Lake ParkJim Green42London No. 1 Lake ParkJoe Black32Sidney No. 1 Lake Parkimport { Table } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ]; ReactDOM.render( Middle size table Small size table , mountNode, );NameCash AssetsAddressJohn Brown300,000.00New York No. 1 Lake ParkJim Green1,256,000.00London No. 1 Lake ParkJoe Black120,000.00Sidney No. 1 Lake Parkimport { Table } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', render: text => {text}, }, { title: 'Cash Assets', className: 'column-money', dataIndex: 'money', align: 'right', }, { title: 'Address', dataIndex: 'address', }, ]; const data = [ { key: '1', name: 'John Brown', money: '300,000.00', address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', money: '1,256,000.00', address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', money: '120,000.00', address: 'Sidney No. 1 Lake Park', }, ]; ReactDOM.render( 'Header'} footer={() => 'Footer'} />, mountNode, );NameAgeAddressActionJohn Brown32New York No. 1 Lake ParkDeleteJim Green42London No. 1 Lake ParkDeleteNot Expandable29Jiangsu No. 1 Lake ParkDeleteJoe Black32Sidney No. 1 Lake ParkDeleteimport { Table } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' }, { title: 'Address', dataIndex: 'address', key: 'address' }, { title: 'Action', dataIndex: '', key: 'x', render: () => Delete, }, ]; const data = [ { key: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.', }, { key: 2, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.', }, { key: 3, name: 'Not Expandable', age: 29, address: 'Jiangsu No. 1 Lake Park', description: 'This not expandable', }, { key: 4, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.', }, ]; ReactDOM.render( {record.description}, rowExpandable: record => record.name !== 'Not Expandable', }} dataSource={data} />, mountNode, );NameAgeHome phoneAddressJohn Brown320571-2209890918889898989New York No. 1 Lake ParkJim Green420571-2209833318889898888London No. 1 Lake ParkJoe Black320575-2209890918900010002Sidney No. 1 Lake ParkJim Red1818900010002London No. 2 Lake ParkJake Whiteimport { Table } from 'antd'; const renderContent = (value, row, index) => { const obj = { children: value, props: {}, }; if (index === 4) { obj.props.colSpan = 0; } return obj; }; const columns = [ { title: 'Name', dataIndex: 'name', render: (text, row, index) => { if (index < 4) { return {text}; } return { children: {text}, props: { colSpan: 5, }, }; }, }, { title: 'Age', dataIndex: 'age', render: renderContent, }, { title: 'Home phone', colSpan: 2, dataIndex: 'tel', render: (value, row, index) => { const obj = { children: value, props: {}, }; if (index === 2) { obj.props.rowSpan = 2; } if (index === 3) { obj.props.rowSpan = 0; } if (index === 4) { obj.props.colSpan = 0; } return obj; }, }, { title: 'Phone', colSpan: 0, dataIndex: 'phone', render: renderContent, }, { title: 'Address', dataIndex: 'address', render: renderContent, }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, tel: '0571-22098909', phone: 18889898989, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', tel: '0571-22098333', phone: 18889898888, age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, tel: '0575-22098909', phone: 18900010002, address: 'Sidney No. 1 Lake Park', }, { key: '4', name: 'Jim Red', age: 18, tel: '0575-22098909', phone: 18900010002, address: 'London No. 2 Lake Park', }, { key: '5', name: 'Jake White', age: 18, tel: '0575-22098909', phone: 18900010002, address: 'Dublin No. 2 Lake Park', }, ]; ReactDOM.render(, mountNode);import { Table, Switch, Space } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', width: '12%', }, { title: 'Address', dataIndex: 'address', width: '30%', key: 'address', }, ]; const data = [ { key: 1, name: 'John Brown sr.', age: 60, address: 'New York No. 1 Lake Park', children: [ { key: 11, name: 'John Brown', age: 42, address: 'New York No. 2 Lake Park', }, { key: 12, name: 'John Brown jr.', age: 30, address: 'New York No. 3 Lake Park', children: [ { key: 121, name: 'Jimmy Brown', age: 16, address: 'New York No. 3 Lake Park', }, ], }, { key: 13, name: 'Jim Green sr.', age: 72, address: 'London No. 1 Lake Park', children: [ { key: 131, name: 'Jim Green', age: 42, address: 'London No. 2 Lake Park', children: [ { key: 1311, name: 'Jim Green jr.', age: 25, address: 'London No. 3 Lake Park', }, { key: 1312, name: 'Jimmy Green sr.', age: 18, address: 'London No. 4 Lake Park', }, ], }, ], }, ], }, { key: 2, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ]; 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); }, }; function TreeData() { const [checkStrictly, setCheckStrictly] = React.useState(false); return ( CheckStrictly: ); } ReactDOM.render(, mountNode);import { Table } from 'antd'; const columns = [ { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left', }, { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left', }, { title: 'Column 1', dataIndex: 'address', key: '1' }, { title: 'Column 2', dataIndex: 'address', key: '2' }, { title: 'Column 3', dataIndex: 'address', key: '3' }, { title: 'Column 4', dataIndex: 'address', key: '4' }, { title: 'Column 5', dataIndex: 'address', key: '5' }, { title: 'Column 6', dataIndex: 'address', key: '6' }, { title: 'Column 7', dataIndex: 'address', key: '7' }, { title: 'Column 8', dataIndex: 'address', key: '8' }, { title: 'Action', key: 'operation', fixed: 'right', width: 100, render: () => action, }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York Park', }, { key: '2', name: 'Jim Green', age: 40, address: 'London Park', }, ]; ReactDOM.render(, mountNode);import { Table } from 'antd'; const columns = [ { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left', }, { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left', }, { title: 'Column 1', dataIndex: 'address', key: '1', width: 150, }, { title: 'Column 2', dataIndex: 'address', key: '2', width: 150, }, { title: 'Column 3', dataIndex: 'address', key: '3', width: 150, }, { title: 'Column 4', dataIndex: 'address', key: '4', width: 150, }, { title: 'Column 5', dataIndex: 'address', key: '5', width: 150, }, { title: 'Column 6', dataIndex: 'address', key: '6', width: 150, }, { title: 'Column 7', dataIndex: 'address', key: '7', width: 150, }, { title: 'Column 8', dataIndex: 'address', key: '8' }, { title: 'Action', key: 'operation', fixed: 'right', width: 100, render: () => action, }, ]; const data = []; for (let i = 0; i < 100; i++) { data.push({ key: i, name: `Edrward ${i}`, age: 32, address: `London Park no. ${i}`, }); } ReactDOM.render( , mountNode, );import { Table } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', width: 100, fixed: 'left', filters: [ { text: 'Joe', value: 'Joe', }, { text: 'John', value: 'John', }, ], onFilter: (value, record) => record.name.indexOf(value) === 0, }, { title: 'Other', children: [ { title: 'Age', dataIndex: 'age', key: 'age', width: 150, sorter: (a, b) => a.age - b.age, }, { title: 'Address', children: [ { title: 'Street', dataIndex: 'street', key: 'street', width: 150, }, { title: 'Block', children: [ { title: 'Building', dataIndex: 'building', key: 'building', width: 100, }, { title: 'Door No.', dataIndex: 'number', key: 'number', width: 100, }, ], }, ], }, ], }, { title: 'Company', children: [ { title: 'Company Address', dataIndex: 'companyAddress', key: 'companyAddress', width: 200, }, { title: 'Company Name', dataIndex: 'companyName', key: 'companyName', }, ], }, { title: 'Gender', dataIndex: 'gender', key: 'gender', width: 80, fixed: 'right', }, ]; const data = []; for (let i = 0; i < 100; i++) { data.push({ key: i, name: 'John Brown', age: i + 1, street: 'Lake Park', building: 'C', number: 2035, companyAddress: 'Lake Street 42', companyName: 'SoftLake Co', gender: 'M', }); } ReactDOM.render( , mountNode, );nameageaddressoperation32London, Park Lane no. 0Delete32London, Park Lane no. 1Deleteimport React, { useContext, useState, useEffect, useRef } from 'react'; import { Table, Input, Button, Popconfirm, Form } from 'antd'; import { FormInstance } from 'antd/lib/form'; const EditableContext = React.createContext(null); interface Item { key: string; name: string; age: string; address: string; } interface EditableRowProps { index: number; } const EditableRow: React.FC = ({ index, ...props }) => { const [form] = Form.useForm(); return ( ); }; interface EditableCellProps { title: React.ReactNode; editable: boolean; children: React.ReactNode; dataIndex: keyof Item; record: Item; handleSave: (record: Item) => void; } const EditableCell: React.FC = ({ title, editable, children, dataIndex, record, handleSave, ...restProps }) => { const [editing, setEditing] = useState(false); const inputRef = useRef(null); const form = useContext(EditableContext)!; useEffect(() => { if (editing) { inputRef.current!.focus(); } }, [editing]); const toggleEdit = () => { setEditing(!editing); form.setFieldsValue({ [dataIndex]: record[dataIndex] }); }; const save = async () => { try { const values = await form.validateFields(); toggleEdit(); handleSave({ ...record, ...values }); } catch (errInfo) { console.log('Save failed:', errInfo); } }; let childNode = children; if (editable) { childNode = editing ? ( ) : ( {children} ); } return {childNode}; }; type EditableTableProps = Parameters[0]; interface DataType { key: React.Key; name: string; age: string; address: string; } interface EditableTableState { dataSource: DataType[]; count: number; } type ColumnTypes = Exclude; class EditableTable extends ponent { columns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[]; constructor(props: EditableTableProps) { super(props); this.columns = [ { title: 'name', dataIndex: 'name', width: '30%', editable: true, }, { title: 'age', dataIndex: 'age', }, { title: 'address', dataIndex: 'address', }, { title: 'operation', dataIndex: 'operation', render: (_, record: { key: React.Key }) => this.state.dataSource.length >= 1 ? ( this.handleDelete(record.key)}> Delete ) : null, }, ]; this.state = { dataSource: [ { key: '0', name: 'Edward King 0', age: '32', address: 'London, Park Lane no. 0', }, { key: '1', name: 'Edward King 1', age: '32', address: 'London, Park Lane no. 1', }, ], count: 2, }; } handleDelete = (key: React.Key) => { const dataSource = [...this.state.dataSource]; this.setState({ dataSource: dataSource.filter(item => item.key !== key) }); }; handleAdd = () => { const { count, dataSource } = this.state; const newData: DataType = { key: count, name: `Edward King ${count}`, age: '32', address: `London, Park Lane no. ${count}`, }; this.setState({ dataSource: [...dataSource, newData], count: count + 1, }); }; handleSave = (row: DataType) => { const newData = [...this.state.dataSource]; const index = newData.findIndex(item => row.key === item.key); const item = newData[index]; newData.splice(index, 1, { ...item, ...row, }); this.setState({ dataSource: newData }); }; render() { const { dataSource } = this.state; const components = { body: { row: EditableRow, cell: EditableCell, }, }; const columns = this.columns.map(col => { if (!col.editable) { return col; } return { ...col, onCell: (record: DataType) => ({ record, editable: col.editable, dataIndex: col.dataIndex, title: col.title, handleSave: this.handleSave, }), }; }); return ( Add a row 'editable-row'} bordered dataSource={dataSource} columns={columns as ColumnTypes} /> ); } } ReactDOM.render(, mountNode);.editable-cell { position: relative; } .editable-cell-value-wrap { padding: 5px 12px; cursor: pointer; } .editable-row:hover .editable-cell-value-wrap { padding: 4px 11px; border: 1px solid #d9d9d9; border-radius: 2px; } [data-theme='dark'] .editable-row:hover .editable-cell-value-wrap { border: 1px solid #434343; }nameageaddressoperationEdrward 032London Park no. 0EditEdrward 132London Park no. 1EditEdrward 232London Park no. 2EditEdrward 332London Park no. 3EditEdrward 432London Park no. 4EditEdrward 532London Park no. 5EditEdrward 632London Park no. 6EditEdrward 732London Park no. 7EditEdrward 832London Park no. 8EditEdrward 932London Park no. 9Editimport React, { useState } from 'react'; import { Table, Input, InputNumber, Popconfirm, Form, Typography } from 'antd'; interface Item { key: string; name: string; age: number; address: string; } const originData: Item[] = []; for (let i = 0; i < 100; i++) { originData.push({ key: i.toString(), name: `Edrward ${i}`, age: 32, address: `London Park no. ${i}`, }); } interface EditableCellProps extends React.HTMLAttributes { editing: boolean; dataIndex: string; title: any; inputType: 'number' | 'text'; record: Item; index: number; children: React.ReactNode; } const EditableCell: React.FC = ({ editing, dataIndex, title, inputType, record, index, children, ...restProps }) => { const inputNode = inputType === 'number' ? : ; return ( {editing ? ( {inputNode} ) : ( children )} ); }; const EditableTable = () => { const [form] = Form.useForm(); const [data, setData] = useState(originData); const [editingKey, setEditingKey] = useState(''); const isEditing = (record: Item) => record.key === editingKey; const edit = (record: Partial & { key: React.Key }) => { form.setFieldsValue({ name: '', age: '', address: '', ...record }); setEditingKey(record.key); }; const cancel = () => { setEditingKey(''); }; const save = async (key: React.Key) => { try { const row = (await form.validateFields()) as Item; const newData = [...data]; const index = newData.findIndex(item => key === item.key); if (index > -1) { const item = newData[index]; newData.splice(index, 1, { ...item, ...row, }); setData(newData); setEditingKey(''); } else { newData.push(row); setData(newData); setEditingKey(''); } } catch (errInfo) { console.log('Validate Failed:', errInfo); } }; const columns = [ { title: 'name', dataIndex: 'name', width: '25%', editable: true, }, { title: 'age', dataIndex: 'age', width: '15%', editable: true, }, { title: 'address', dataIndex: 'address', width: '40%', editable: true, }, { title: 'operation', dataIndex: 'operation', render: (_: any, record: Item) => { const editable = isEditing(record); return editable ? ( save(record.key)} style={{ marginRight: 8 }}> Save Cancel ) : ( edit(record)}> Edit ); }, }, ]; const mergedColumns = columns.map(col => { if (!col.editable) { return col; } return { ...col, onCell: (record: Item) => ({ record, inputType: col.dataIndex === 'age' ? 'number' : 'text', dataIndex: col.dataIndex, title: col.title, editing: isEditing(record), }), }; }); return ( ); }; ReactDOM.render(, mountNode);.editable-row .ant-form-item-explain { position: absolute; top: 100%; font-size: 12px; }NamePlatformVersionUpgradedCreatorDateActionScreemiOS10.3.4.5654500Jack2014-12-24 23:12:00PublishScreemiOS10.3.4.5654500Jack2014-12-24 23:12:00PublishScreemiOS10.3.4.5654500Jack2014-12-24 23:12:00Publishimport { Table, Badge, Menu, Dropdown, Space } from 'antd'; import { DownOutlined } from '@ant-design/icons'; const menu = ( Action 1 Action 2 ); function NestedTable() { const expandedRowRender = () => { const columns = [ { title: 'Date', dataIndex: 'date', key: 'date' }, { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Status', key: 'state', render: () => ( Finished ), }, { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' }, { title: 'Action', dataIndex: 'operation', key: 'operation', render: () => ( Pause Stop More ), }, ]; const data = []; for (let i = 0; i < 3; ++i) { data.push({ key: i, date: '2014-12-24 23:12:00', name: 'This is production name', upgradeNum: 'Upgraded: 56', }); } return ; }; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Platform', dataIndex: 'platform', key: 'platform' }, { title: 'Version', dataIndex: 'version', key: 'version' }, { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' }, { title: 'Creator', dataIndex: 'creator', key: 'creator' }, { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' }, { title: 'Action', key: 'operation', render: () => Publish }, ]; const data = []; for (let i = 0; i < 3; ++i) { data.push({ key: i, name: 'Screem', platform: 'iOS', version: '10.3.4.5654', upgradeNum: 500, creator: 'Jack', createdAt: '2014-12-24 23:12:00', }); } return ( ); } ReactDOM.render(, mountNode);NameAgeAddressJohn Brown32New York No. 1 Lake ParkJim Green42London No. 1 Lake ParkJoe Black32Sidney No. 1 Lake Parkimport React, { useState, useCallback, useRef } from 'react'; import { Table } from 'antd'; import { DndProvider, useDrag, useDrop } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import update from 'immutability-helper'; const type = 'DraggableBodyRow'; const DraggableBodyRow = ({ index, moveRow, className, style, ...restProps }) => { const ref = useRef(); const [{ isOver, dropClassName }, drop] = useDrop({ accept: type, collect: monitor => { const { index: dragIndex } = monitor.getItem() || {}; if (dragIndex === index) { return {}; } return { isOver: monitor.isOver(), dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward', }; }, drop: item => { moveRow(item.index, index); }, }); const [, drag] = useDrag({ type, item: { index }, collect: monitor => ({ isDragging: monitor.isDragging(), }), }); drop(drag(ref)); return ( ); }; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ]; const DragSortingTable: React.FC = () => { const [data, setData] = useState([ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ]); const components = { body: { row: DraggableBodyRow, }, }; const moveRow = useCallback( (dragIndex, hoverIndex) => { const dragRow = data[dragIndex]; setData( update(data, { $splice: [ [dragIndex, 1], [hoverIndex, 0, dragRow], ], }), ); }, [data], ); return ( ({ index, moveRow, })} /> ); }; ReactDOM.render(, mountNode);#components-table-demo-drag-sorting tr.drop-over-downward td { border-bottom: 2px dashed #1890ff; } #components-table-demo-drag-sorting tr.drop-over-upward td { border-top: 2px dashed #1890ff; }SortNameAgeAddressJohn Brown32New York No. 1 Lake ParkJim Green42London No. 1 Lake ParkJoe Black32Sidney No. 1 Lake Parkimport { Table } from 'antd'; import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc'; import { MenuOutlined } from '@antdesign/icons'; import { arrayMoveImmutable } from 'array-move'; const DragHandle = sortableHandle(() => ); const columns = [ { title: 'Sort', dataIndex: 'sort', width: 30, className: 'drag-visible', render: () => , }, { title: 'Name', dataIndex: 'name', className: 'drag-visible', }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', index: 0, }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', index: 1, }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', index: 2, }, ]; const SortableItem = sortableElement(props => ); const SortableContainer = sortableContainer(props => ); class SortableTable extends ponent { state = { dataSource: data, }; onSortEnd = ({ oldIndex, newIndex }) => { const { dataSource } = this.state; if (oldIndex !== newIndex) { const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter(el => !!el); console.log('Sorted items: ', newData); this.setState({ dataSource: newData }); } }; DraggableContainer = props => ( ); DraggableBodyRow = ({ className, style, ...restProps }) => { const { dataSource } = this.state; const index = dataSource.findIndex(x => x.index === restProps['data-row-key']); return ; }; render() { const { dataSource } = this.state; return ( ); } } ReactDOM.render(, mountNode);.row-dragging { background: #fafafa; border: 1px solid #ccc; } .row-dragging td { padding: 16px; } .row-dragging .drag-visible { visibility: visible; }NameAgeAddressLong Column Long Column Long ColumnLong Column Long ColumnLong ColumnJohn Brown32New York No. 1 Lake Park, New York No. 1 Lake ParkNew York No. 1 Lake Park, New York No. 1 Lake ParkNew York No. 1 Lake Park, New York No. 1 Lake ParkNew York No. 1 Lake Park, New York No. 1 Lake ParkJim Green42London No. 2 Lake Park, London No. 2 Lake ParkLondon No. 2 Lake Park, London No. 2 Lake ParkLondon No. 2 Lake Park, London No. 2 Lake ParkLondon No. 2 Lake Park, London No. 2 Lake ParkJoe Black32Sidney No. 1 Lake Park, Sidney No. 1 Lake ParkSidney No. 1 Lake Park, Sidney No. 1 Lake ParkSidney No. 1 Lake Park, Sidney No. 1 Lake ParkSidney No. 1 Lake Park, Sidney No. 1 Lake Parkimport { Table } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', render: text => {text}, width: 150, }, { title: 'Age', dataIndex: 'age', key: 'age', width: 80, }, { title: 'Address', dataIndex: 'address', key: 'address 1', ellipsis: true, }, { title: 'Long Column Long Column Long Column', dataIndex: 'address', key: 'address 2', ellipsis: true, }, { title: 'Long Column Long Column', dataIndex: 'address', key: 'address 3', ellipsis: true, }, { title: 'Long Column', dataIndex: 'address', key: 'address 4', ellipsis: true, }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park, New York No. 1 Lake Park', tags: ['nice', 'developer'], }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 2 Lake Park, London No. 2 Lake Park', tags: ['loser'], }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park', tags: ['cool', 'teacher'], }, ]; ReactDOM.render(, mountNode);NameAgeAddressLong Column Long Column Long ColumnLong Column Long ColumnLong ColumnJohn Brown32New York No. 1 Lake Park, New York No. 1 Lake ParkNew York No. 1 Lake Park, New York No. 1 Lake ParkNew York No. 1 Lake Park, New York No. 1 Lake ParkNew York No. 1 Lake Park, New York No. 1 Lake ParkJim Green42London No. 2 Lake Park, London No. 2 Lake ParkLondon No. 2 Lake Park, London No. 2 Lake ParkLondon No. 2 Lake Park, London No. 2 Lake ParkLondon No. 2 Lake Park, London No. 2 Lake ParkJoe Black32Sidney No. 1 Lake Park, Sidney No. 1 Lake ParkSidney No. 1 Lake Park, Sidney No. 1 Lake ParkSidney No. 1 Lake Park, Sidney No. 1 Lake ParkSidney No. 1 Lake Park, Sidney No. 1 Lake Parkimport { Table, Tooltip } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', render: text => {text}, width: 150, }, { title: 'Age', dataIndex: 'age', key: 'age', width: 80, }, { title: 'Address', dataIndex: 'address', key: 'address 1', ellipsis: { showTitle: false, }, render: address => ( {address} ), }, { title: 'Long Column Long Column Long Column', dataIndex: 'address', key: 'address 2', ellipsis: { showTitle: false, }, render: address => ( {address} ), }, { title: 'Long Column Long Column', dataIndex: 'address', key: 'address 3', ellipsis: { showTitle: false, }, render: address => ( {address} ), }, { title: 'Long Column', dataIndex: 'address', key: 'address 4', ellipsis: { showTitle: false, }, render: address => ( {address} ), }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park, New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 2 Lake Park, London No. 2 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park', }, ]; ReactDOM.render(, mountNode);NameBorrowRepaymentJohn Brown1033Jim Green1000Joe Black1010Jim Red7545Total19588Balance107import { Table, Typography } from 'antd'; const { Text } = Typography; const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Borrow', dataIndex: 'borrow', }, { title: 'Repayment', dataIndex: 'repayment', }, ]; const data = [ { key: '1', name: 'John Brown', borrow: 10, repayment: 33, }, { key: '2', name: 'Jim Green', borrow: 100, repayment: 0, }, { key: '3', name: 'Joe Black', borrow: 10, repayment: 10, }, { key: '4', name: 'Jim Red', borrow: 75, repayment: 45, }, ]; const fixedColumns = [ { title: 'Name', dataIndex: 'name', fixed: true, width: 100, }, { title: 'Description', dataIndex: 'description', }, ]; const fixedData = []; for (let i = 0; i < 20; i += 1) { fixedData.push({ key: i, name: ['Light', 'Bamboo', 'Little'][i % 3], description: 'Everything that has a beginning, has an end.', }); } ReactDOM.render( { let totalBorrow = 0; let totalRepayment = 0; pageData.forEach(({ borrow, repayment }) => { totalBorrow += borrow; totalRepayment += repayment; }); return ( Total {totalBorrow} {totalRepayment} Balance {totalBorrow - totalRepayment} ); }} /> ( Summary This is a summary content )} /> , mountNode, );import React, { useState, useEffect, useRef } from 'react'; import { VariableSizeGrid as Grid } from 'react-window'; import ResizeObserver from 'rc-resize-observer'; import classNames from 'classnames'; import { Table } from 'antd'; function VirtualTable(props: Parameters[0]) { const { columns, scroll } = props; const [tableWidth, setTableWidth] = useState(0); const widthColumnCount = columns!.filter(({ width }) => !width).length; const mergedColumns = columns!.map(column => { if (column.width) { return column; } return { ...column, width: Math.floor(tableWidth / widthColumnCount), }; }); const gridRef = useRef(); const [connectObject] = useState(() => { const obj = {}; Object.defineProperty(obj, 'scrollLeft', { get: () => null, set: (scrollLeft: number) => { if (gridRef.current) { gridRef.current.scrollTo({ scrollLeft }); } }, }); return obj; }); const resetVirtualGrid = () => { gridRef.current.resetAfterIndices({ columnIndex: 0, shouldForceUpdate: true, }); }; useEffect(() => resetVirtualGrid, [tableWidth]); const renderVirtualList = (rawData: object[], { scrollbarSize, ref, onScroll }: any) => { ref.current = connectObject; const totalHeight = rawData.length * 54; return ( { const { width } = mergedColumns[index]; return totalHeight > scroll!.y! && index === mergedColumns.length - 1 ? (width as number) scrollbarSize - 1 : (width as number); }} height={scroll!.y as number} rowCount={rawData.length} rowHeight={() => 54} width={tableWidth} onScroll={({ scrollLeft }: { scrollLeft: number }) => { onScroll({ scrollLeft }); }} > {({ columnIndex, rowIndex, style, }: { columnIndex: number; rowIndex: number; style: React.CSSProperties; }) => ( {(rawData[rowIndex] as any)[(mergedColumns as any)[columnIndex].dataIndex]} )} ); }; return ( { setTableWidth(width); }} > ); } const columns = [ { title: 'A', dataIndex: 'key', width: 150 }, { title: 'B', dataIndex: 'key' }, { title: 'C', dataIndex: 'key' }, { title: 'D', dataIndex: 'key' }, { title: 'E', dataIndex: 'key', width: 200 }, { title: 'F', dataIndex: 'key', width: 100 }, ]; const data = Array.from({ length: 100000 }, (_, key) => ({ key })); ReactDOM.render( , mountNode, );Name (all screens)John Brownimport { Table } from 'antd'; const columns = [ { title: 'Name (all screens)', dataIndex: 'name', key: 'name', render: text => {text}, }, { title: 'Age (medium screen or bigger)', dataIndex: 'age', key: 'age', responsive: ['md'], }, { title: 'Address (large screen or bigger)', dataIndex: 'address', key: 'address', responsive: ['lg'], }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, ]; ReactDOM.render(, mountNode);import { Table } from 'antd'; const columns = [ { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left', }, { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left', }, { title: 'Column 1', dataIndex: 'address', key: '1', width: 150, }, { title: 'Column 2', dataIndex: 'address', key: '2', width: 150, }, { title: 'Column 3', dataIndex: 'address', key: '3', width: 150, }, { title: 'Column 4', dataIndex: 'address', key: '4', width: 150, }, { title: 'Column 5', dataIndex: 'address', key: '5', width: 150, }, { title: 'Column 6', dataIndex: 'address', key: '6', width: 150, }, { title: 'Column 7', dataIndex: 'address', key: '7', width: 150, }, { title: 'Column 8', dataIndex: 'address', key: '8' }, { title: 'Action', key: 'operation', fixed: 'right', width: 100, render: () => action, }, ]; const data = []; for (let i = 0; i < 100; i++) { data.push({ key: i, name: `Edrward ${i}`, age: 32, address: `London Park no. ${i}`, }); } ReactDOM.render( ( Fix Left Scroll Context Fix Right )} sticky />, mountNode, );import { Table, Switch, Radio, Form, Space } from 'antd'; import { DownOutlined } from '@ant-design/icons'; const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', sorter: (a, b) => a.age - b.age, }, { title: 'Address', dataIndex: 'address', filters: [ { text: 'London', value: 'London', }, { text: 'New York', value: 'New York', }, ], onFilter: (value, record) => record.address.indexOf(value) === 0, }, { title: 'Action', key: 'action', sorter: true, render: () => ( Delete More actions ), }, ]; const data = []; for (let i = 1; i {record.description} }; const title = () => 'Here is title'; const showHeader = true; const footer = () => 'Here is footer'; const pagination = { position: 'bottom' }; class Demo extends ponent { state = { bordered: false, loading: false, pagination, size: 'default', expandable, title: undefined, showHeader, footer, rowSelection: {}, scroll: undefined, hasData: true, tableLayout: undefined, top: 'none', bottom: 'bottomRight', }; handleToggle = prop => enable => { this.setState({ [prop]: enable }); }; handleSizeChange = e => { this.setState({ size: e.target.value }); }; handleTableLayoutChange = e => { this.setState({ tableLayout: e.target.value }); }; handleExpandChange = enable => { this.setState({ expandable: enable ? expandable : undefined }); }; handleEllipsisChange = enable => { this.setState({ ellipsis: enable }); }; handleTitleChange = enable => { this.setState({ title: enable ? title : undefined }); }; handleHeaderChange = enable => { this.setState({ showHeader: enable ? showHeader : false }); }; handleFooterChange = enable => { this.setState({ footer: enable ? footer : undefined }); }; handleRowSelectionChange = enable => { this.setState({ rowSelection: enable ? {} : undefined }); }; handleYScrollChange = enable => { this.setState({ yScroll: enable }); }; handleXScrollChange = e => { this.setState({ xScroll: e.target.value }); }; handleDataChange = hasData => { this.setState({ hasData }); }; render() { const { xScroll, yScroll, ...state } = this.state; const scroll = {}; if (yScroll) { scroll.y = 240; } if (xScroll) { scroll.x = '100vw'; } const tableColumns = columns.map(item => ({ ...item, ellipsis: state.ellipsis })); if (xScroll === 'fixed') { tableColumns[0].fixed = true; tableColumns[tableColumns.length - 1].fixed = 'right'; } return ( Default Middle Small Unset Scroll Fixed Columns Unset Fixed { this.setState({ top: e.target.value }); }} > TopLeft TopCenter TopRight None { this.setState({ bottom: e.target.value }); }} > BottomLeft BottomCenter BottomRight None ); } } ReactDOM.render(, mountNode); react table footer sum. react table footer example. react table footer style. react table footer row. semantic ui react table footer. react bootstrap table footer. react table hide footer. material-table footer react

95236528750.pdf 1607df238709a1---94560458119.pdf 90421042302.pdf how to get python to open a program bejopoditu.pdf python 3 for windows 10 rijilowebozagekifixew.pdf excel calculations pdf piezoelectric transducer datasheet pdf 2nd class general knowledge questions and answers comic book pdf files nofatowexawokutiduxu.pdf presto pizzazz plus rotating pizza oven instructions 98040533399.pdf bagepegugolaxelowojod.pdf clear screen in c programming xanathar's guide to everything spells warlock pedam.pdf t mobile prepaid online account xojiziwolosuv.pdf callback is not a function javascript 1609b27315457a---fufiwemokafizevekaxetu.pdf hp officejet pro 8620 ink tesco 6646351331.pdf

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download