React-table，如何缩进列

Question

我有一个 rest 服务，它返回一个 json 字符串，如下所示：

[
{"id":1,"position":100,"parent":null,"description":"Row 1"}, 
{"id":2,"position":110,"parent":100,"description":"Row 1.1"},
{"id":3,"position":200,"parent":null,"description":"Row 2"},
{"id":4,"position":210,"parent":200,"description":"Row 2.1"},
{"id":4,"position":211,"parent":210,"description":"Row 2.1.1"},
// Etc...
]

我想在react-table中显示这些数据，缩进描述，如 position 列中的 treeview。

我已经显示了按position排序的数据，但我不能“覆盖”列描述。

const columns = [{
        Header: 'id',
        accessor: 'id',
        show: false
    }, {
        Header: 'Description',
        accessor: 'description'  //<-- HERE I'D LIKE TO ADD A KIND OF FORMULA
    }];

<ReactTable
    data={this.state.skills}
    columns={columns}
    defaultPageSize={25}
    showPagination={true}
    defaultSorted={[
        {
            id: "position"
        }
    ]}
/>

如何转换反应表中的列？

我的目标是（在“伪代码”中）：

const columns = [{
        Header: 'id',
        accessor: 'id',
        show: false
    }, {
        Header: 'Description',
        accessor: {
            let spaces = row["description"].indexOf("0");
            if(spaces>-1){
               return " ".repeat(spaces) + row["description"];
            } else {
               return row["description"];
            }
        }
    }];

谢谢

Answer 1

使用单元格属性：

const columns = [{
    Header: 'id',
    accessor: 'id',
    show: false
}, {
    Header: 'Description',
    Cell: props => {
        let spaces = props.original.description.indexOf("0");
        if(spaces>-1){
           return <span>{" ".repeat(spaces) + props.original.description}</span>
        } else {
           return <span>{props.original.description}</span>
        }
    }
}];