--- order: 16 title: en-US: Tree data zh-CN: 树形数据展示 --- ## zh-CN 表格支持树形数据的展示,可以通过设置 `indentSize` 以控制每一层的缩进宽度。 > 注:暂不支持父子数据递归关联选择。 ## en-US Display tree structure data in Table, control the indent width by setting `indentSize`. > Note, no support for recursive selection of tree structure data table yet. ````__react import { Table } from 'antd'; const columns = [{ title: 'Name', dataIndex: 'name', key: 'name', width: '40%', }, { title: 'Age', dataIndex: 'age', key: 'age', width: '30%', }, { title: 'Address', dataIndex: 'address', 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', }]; // rowSelection objects indicates the need for row selection 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); }, }; ReactDOM.render(