Есть ли способ переключать атрибуты из любых столбцов в таблице начальной загрузки реакции?

Я использую библиотеку реакции response-bootstrap-table в нашем проекте для создания таблиц и хотел бы теперь, если есть способ переключать атрибуты из "TableHeaderColumn"

Например, в примере кода ниже я хотел бы добавить или удалить атрибут фильтра, если логическое значение истинно или ложно.

    <BootstrapTable
        version="4"
        data={data}
        options={options}
        hover={true}
        pagination={true}
        search={true}
     >
         <TableHeaderColumn
             dataField="customerName"
             filter={{ type: "TextFilter", delay: 10 }}
             dataSort={true}
             caretRender={displaySortOrder}
         >
         Customer Name
         </TableHeaderColumn>

        <TableHeaderColumn
             dataField="Address"
             dataSort={true}
             caretRender={displaySortOrder}
         >
             Address                   
         </TableHeaderColumn>

    </BootstrapTable>

reactjs react-bootstrap react-bootstrap-table
person Phani    schedule 26.11.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

вы можете скрыть фильтр в таблице и управлять поведением с помощью тегов refs, чтобы применить или очистить фильтр.

Сначала вам нужно определить классы для фильтра:

const filterStyle = { display: 'none' };
const filterObj = { type: 'TextFilter', delay: 1000, style: filterStyle };

Затем вы можете определить тег refs и фильтр в столбце:

<TableHeaderColumn ref="workshiftFilter" dataField="workshift" filter={filterObj} > ColumnTitle </TableHeaderColumn>

Наконец, вы должны использовать ссылку в функции:

handleWorkshiftFilter = (selectedOption) => {
 switch (selectedOption.value) {
   case 'A':
     this.refs.workshiftFilter.applyFilter('A')
     break;
   case 'B':
     this.refs.workshiftFilter.applyFilter('B')
     break;
   case 'C':
     this.refs.workshiftFilter.applyFilter('C')
     break;
   default:
     this.refs.workshiftFilter.cleanFiltered();
     break;
 }
 return;

}

Таким образом вы можете активировать или деактивировать свой фильтр в столбце.

С Уважением

person Julian Salamanca    schedule 28.11.2019