React-table，如何缩进列

Question

我有一个休息服务 returns 一个 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 排序的数据，但我不能 "override" 列描述。

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"
        }
    ]}
/>

如何在反应中转换列-table？

我的目标是（在 "pseudo-code"）：

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>
        }
    }
}];

React-table，如何缩进列

React-table, how to indenting column

reactjs

react-table