fix: wrong index in tree table (#707)

* fix: wrong index in tree table

* add a test: render index in tree table

Author: crawler-django

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 },
       {

src/Body/index.tsx

@@ -37,12 +37,8 @@ function Body<RecordType>({
   const { prefixCls, getComponent } = React.useContext(TableContext);
   const { flattenColumns } = React.useContext(BodyContext);
 
-  const flattenData: { record: RecordType; indent: number }[] = useFlattenRecords<RecordType>(
-    data,
-    childrenColumnName,
-    expandedKeys,
-    getRowKey,
-  );
+  const flattenData: { record: RecordType; indent: number; index: number }[] =
+    useFlattenRecords<RecordType>(data, childrenColumnName, expandedKeys, getRowKey);
 
   const onHover = React.useCallback((start: number, end: number) => {
     setStartRow(start);
@@ -61,18 +57,18 @@ function Body<RecordType>({
 
     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 (
           <BodyRow
             key={key}
             rowKey={key}
             record={record}
             recordKey={key}
-            index={index}
+            index={renderIndex}
             rowComponent={trComponent}
             cellComponent={tdComponent}
             expandedKeys={expandedKeys}

src/hooks/useFlattenRecords.ts

@@ -8,12 +8,14 @@ function flatRecord<T>(
   childrenColumnName: string,
   expandedKeys: Set<Key>,
   getRowKey: GetRowKey<T>,
+  index: number,
 ) {
   const arr = [];
 
   arr.push({
     record,
     indent,
+    index,
   });
 
   const key = getRowKey(record);
@@ -29,6 +31,7 @@ function flatRecord<T>(
         childrenColumnName,
         expandedKeys,
         getRowKey,
+        i,
       );
 
       arr.push(...tempArr);
@@ -55,24 +58,25 @@ export default function useFlattenRecords<T>(
   expandedKeys: Set<Key>,
   getRowKey: GetRowKey<T>,
 ) {
-  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<T>(record, 0, childrenColumnName, expandedKeys, getRowKey));
+        temp.push(...flatRecord<T>(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]);

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(
+      <Table columns={tColumns} expandable={{ defaultExpandAllRows: true }} data={tData} />,
+    );
+
+    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');
+  });
 });