Динамически отображать / скрывать столбцы в зависимости от выбора пользователя относительно реагирующей таблицы: React + Typescript - PullRequest
0 голосов
/ 09 июня 2019

Я использую реагирующую таблицу для таблицы данных приложения.У меня есть этот сценарий, где мне нужно показать / скрыть столбцы, которые перечислены и на основе выбора пользователя мне нужно показать / скрыть их.Есть ли какой-нибудь способ, которым я могу достичь этого?

В основном нужно иметь значок какого-то типа настроек, при щелчке по нему мне нужно отобразить все доступные столбцы и на основе выбора флажка, который мне нужно показать /скрыть их.

Как я могу получить все значения столбцов из реагирующей таблицы, которые будут отображаться в этом раскрывающемся списке?

Как добавить этот значок настроек в качестве части заголовка столбца (я будуотображение идентификаторов под этим столбцом), но заголовком этого столбца будет значок настроек рядом с надписью «Изменить»


import * as React from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';

export default class App extends React.Component<{},{}>  

    constructor(props:any){
        super(props);
        this.state={
           data : [];
    }

    componentDidMount() {
      //using some fetch Call, I get the data and set it to state data property
      let data = fetch(); // fetch call which is not described here
      this.setState({data})
    }

    render(){
       <ReactTable
           data={this.state.data}
            columns = {[
                    {
                      Header: "Edit",// here i need to add an settings icon next to "Edit" header and on click of the same need to show all the column names, then show/hide them based on selection 
                      id: "row",
                      Cell: (row:any) => {
                        return <span>{row.index+1}</span>;
                      }
                    },
                    {
                      id: 'name,
                      Header: 'Name',
                      accessor: 'username',
                    },
                    {
                      id: 'dob,
                      Header: 'DOB',
                      accessor: 'userDOB',
                    },
                    {
                      id: 'status',
                      Header: 'Status',
                      accessor: 'userStatus',
                    }
              ]}  
        />

    }
}

1 Ответ

1 голос
/ 10 июня 2019

Первая проблема, которую я вижу, это то, что вы планируете хранить все имена столбцов в строке «Редактировать», но функция

'(строка: любая) => {return {row.index + 1}; } 'будет перебирать объект данных, а не объект столбцов. Это означает, что если строк данных больше, чем столбцов, вы без необходимости просматриваете все строки данных.

Вместо этого сохраняйте состояние объекта столбцов в React State. Обновите свойство 'show' столбцов, чтобы скрыть / показать столбцы.

Что-то вроде этого кода здесь - https://eim52.codesandbox.io/

...