React-таблица, как сделать отступ в столбце - PullRequest
Новая
       20

React-таблица, как сделать отступ в столбце

1 голос
/ 21 октября 2019

У меня есть служба отдыха, которая возвращает строку 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, но не могу "переопределить" описание столбца. 

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

Спасибо

1 Ответ

2 голосов
/ 21 октября 2019

Использовать свойство ячейки: 

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