diff --git a/docs/examples/subTable.tsx b/docs/examples/subTable.tsx index b570a4c3c..a0bdcd89b 100644 --- a/docs/examples/subTable.tsx +++ b/docs/examples/subTable.tsx @@ -45,7 +45,15 @@ class Demo extends React.Component { render() { const columns = [ - { title: 'title1', dataIndex: 'a', key: 'a', width: 100 }, + { + title: 'title1', + dataIndex: 'a', + key: 'a', + width: 100, + render(text, record, index) { + return index; + }, + }, { title: 'title2', dataIndex: 'b', key: 'b', width: 100 }, { title: 'title3', dataIndex: 'c', key: 'c', width: 200 }, { diff --git a/src/Body/index.tsx b/src/Body/index.tsx index 8aad33189..b8049690e 100644 --- a/src/Body/index.tsx +++ b/src/Body/index.tsx @@ -37,12 +37,8 @@ function Body({ const { prefixCls, getComponent } = React.useContext(TableContext); const { flattenColumns } = React.useContext(BodyContext); - const flattenData: { record: RecordType; indent: number }[] = useFlattenRecords( - data, - childrenColumnName, - expandedKeys, - getRowKey, - ); + const flattenData: { record: RecordType; indent: number; index: number }[] = + useFlattenRecords(data, childrenColumnName, expandedKeys, getRowKey); const onHover = React.useCallback((start: number, end: number) => { setStartRow(start); @@ -61,10 +57,10 @@ function Body({ let rows: React.ReactNode; if (data.length) { - rows = flattenData.map((item, index) => { - const { record, indent } = item; + rows = flattenData.map((item, idx) => { + const { record, indent, index: renderIndex } = item; - const key = getRowKey(record, index); + const key = getRowKey(record, idx); return ( ({ rowKey={key} record={record} recordKey={key} - index={index} + index={renderIndex} rowComponent={trComponent} cellComponent={tdComponent} expandedKeys={expandedKeys} diff --git a/src/hooks/useFlattenRecords.ts b/src/hooks/useFlattenRecords.ts index ddb5c9e79..11e165f7b 100644 --- a/src/hooks/useFlattenRecords.ts +++ b/src/hooks/useFlattenRecords.ts @@ -8,12 +8,14 @@ function flatRecord( childrenColumnName: string, expandedKeys: Set, getRowKey: GetRowKey, + index: number, ) { const arr = []; arr.push({ record, indent, + index, }); const key = getRowKey(record); @@ -29,6 +31,7 @@ function flatRecord( childrenColumnName, expandedKeys, getRowKey, + i, ); arr.push(...tempArr); @@ -55,24 +58,25 @@ export default function useFlattenRecords( expandedKeys: Set, getRowKey: GetRowKey, ) { - const arr: { record: T; indent: number }[] = React.useMemo(() => { + const arr: { record: T; indent: number; index: number }[] = React.useMemo(() => { if (expandedKeys?.size) { - const temp: { record: T; indent: number }[] = []; + const temp: { record: T; indent: number; index: number }[] = []; // collect flattened record for (let i = 0; i < data?.length; i += 1) { const record = data[i]; - temp.push(...flatRecord(record, 0, childrenColumnName, expandedKeys, getRowKey)); + temp.push(...flatRecord(record, 0, childrenColumnName, expandedKeys, getRowKey, i)); } return temp; } - return data?.map(item => { + return data?.map((item, index) => { return { record: item, indent: 0, + index, }; }); }, [data, childrenColumnName, expandedKeys, getRowKey]); diff --git a/tests/Table.spec.js b/tests/Table.spec.js index a5347e4ad..d1e989cea 100644 --- a/tests/Table.spec.js +++ b/tests/Table.spec.js @@ -982,4 +982,35 @@ describe('Table.Basic', () => { expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy(); }); }); + + it('render index in tree table', () => { + const tColumns = [ + { + title: 'Key', + dataIndex: 'key', + }, + { + title: '行索引', + key: 'xxx', + render: (value, record, index) => index, + }, + ]; + + const tData = [ + { key: 'row0', children: [{ key: 'row0-0' }, { key: 'row0-1' }] }, + { key: 'row1', children: [{ key: 'row1-0' }, { key: 'row1-1' }] }, + ]; + const wrapper = mount( + , + ); + + const trs = wrapper.find('BodyRow'); + + expect(trs.at(0).find('Cell').at(1).text()).toEqual('0'); + expect(trs.at(1).find('Cell').at(1).text()).toEqual('0'); + expect(trs.at(2).find('Cell').at(1).text()).toEqual('1'); + expect(trs.at(3).find('Cell').at(1).text()).toEqual('1'); + expect(trs.at(4).find('Cell').at(1).text()).toEqual('0'); + expect(trs.at(5).find('Cell').at(1).text()).toEqual('1'); + }); });