Работа с таблицами в React: часть вторая

Во второй части руководства мы продолжим изучение тонкостей работы с табличными данными в React. Мы используем библиотеку React Bootstrap Table для разработки сложных таблиц с профессиональным дизайном. В этой статье мы рассмотрим продвинутые настройки, разбиение таблицы на страницы и редактирование ячеек.

Краткое содержание статьи

Это вторая часть руководства по работе с библиотекой React Bootstrap Table2. В первой части мы создали простое React- приложение и добавили в него показанную ниже таблицу:

Краткое содержание статьи

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

Расширяющиеся строки

Одна из самых впечатляющих опций библиотеки React Bootstrap Table2 – расширяющиеся строки. При визуализации табличных данных часто возникает необходимость в дополнительных строках для полного отображения информации. Но если данные во всех строках сразу будут отображаться в полном виде, это может сильно затруднить просмотр информации.

Обычный способ решения этой проблемы – показ всплывающих подсказок, но для всплывающих подсказок требуется навести курсор мыши на целевую область, и вы сможете видеть только одну всплывающую подсказку одновременно. Расширение строк позволяет отображать дополнительные данные для каждой строки в виде выдвижного ящика, который остается развернутым столько, сколько вы хотите, и вы можете свернуть его обратно, когда закончите. Вы можете развернуть столько строк одновременно, сколько захотите.

Вот как это делается с помощью библиотеки React Bootstrap Table2. Наши данные выглядят следующим образом:

const product = [
  {id: 1, name: 'Headphone  Fusion', value: '100'},
  {id: 2, name: 'Headphone Beats', value: '80'},
  {id: 3, name: 'Headphone Modus', value: '70'},
  {id: 4, name: 'Headphone Jam', value: '100'}
 
];

Для определения расширения строки по клику мышкой мы воспользуемся свойством expandRow:

const expandRow = {
  renderer: (row, rowIndex) => (
    <div>
      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
      <p>You can render anything here, also you can add additional data on every row object</p>
      <p>expandRow.renderer callback will pass the origin row object to you</p>
    </div>
  )
};

Добавим свойство expandRow в нашу таблицу:

<BootstrapTable 
        // striped
        hover
        keyField='id'
         keyField='id'
          data={ product }
           columns={ columns } 
           // apply the expandRow property here
          expandRow={ expandRow }
/>

Вот так таблица будет выглядеть после клика по строке:

Расширяющиеся строки

Разбиение на страницы

Пока что мы выводили на экран таблицу, в которой всего четыре строки. В реальности таблицы могут включать в себя огромный объем информации, который обычно не помещается на экране. Для решения этой проблемы библиотека React Bootstrap Table2 предусматривает множество вариантов постраничного вывода таблицы.

Добавим в нашу таблицу несколько записей, как показано ниже:

 const product = [
  {id: 1, name: 'Headphone  Fusion', value: '100'},
  {id: 2, name: 'Headphone Beats', value: '80'},
  {id: 3, name: 'Headphone Modus', value: '70'},
  {id: 4, name: 'Headphone Jam', value: '100'},
  {id: 5, name: 'Headphone Auto', value: '50'},
  {id: 6, name: 'Headphone Byte', value: '70'},
  {id: 7, name: 'Headphone Duo', value: '150'},
  {id: 8, name: 'Headphone Modular', value: '80'},
  {id: 9, name: 'Headphone Pivot', value: '150'},
  {id: 10, name: 'Headphone Optimizer', value: '70'},
  {id: 11, name: 'Headphone Rave', value: '50'},
  {id: 12, name: 'Headphone Mach', value: '40'}
];

Теперь таблица готова к постраничному выводу. Сначала установим компонент react-bootstrap-table2-paginator с помощью менеджера пакетов npm:

npm install react-bootstrap-table2-paginator --save

После этого откроем файл App.js и пропишем импорт paginationFactory:

import paginationFactory from 'react-bootstrap-table2-paginator';

Настроим разбиение на страницы с помощью приведенных ниже параметров:

const options = {
    page: 1,
    sizePerPage: 5,
    nextPageText: '>',
    prePageText: '<',
    showTotal: true
  };

Теперь применим созданное свойство к нашей таблице, как показано ниже:

<BootstrapTable 
        // striped
        hover
        keyField='id'
         keyField='id'
          data={ person }
           columns={ columns } 
          expandRow={ expandRow }
          //apply the pagination function here
          pagination={ paginationFactory(options) }
                 />

После внесения этих изменений таблица будет выводиться на трех страницах. На каждой странице будет отображаться по пять записей:

Разбиение на страницы

Редактирование ячеек

Один из типичных вариантов управления данными – локальное редактирование ячеек. Редактирование обычно активируется одиночным или двойным кликом. Для реализации такой функции потребуется установить компонент react-bootstrap-table2-editor:

npm install react-bootstrap-table2-editor –save

Внесите импорт компонента в файл App.js:

//App.js
import cellEditFactory from 'react-bootstrap-table2-editor';

Редактирование ячеек таблицы активируют следующим образом:

<BootstrapTable 
 hover
 keyField='id'
 data={ product }
 columns={ columns } 
 expandRow={ expandRow }
 pagination={ paginationFactory(options) }
 cellEdit={ cellEditFactory({ mode: 'click' }) }
 
    />

У вас также есть возможность запретить редактирование определенных ячеек и задать хуки для функций. Например, приведенный ниже код запрещает редактирование ячеек третьей строки:

<BootstrapTable 
 hover
 keyField='id'
 data={ product }
 columns={ columns } 
 expandRow={ expandRow }
 pagination={ paginationFactory(options) }
 cellEdit={ cellEditFactory({
                     mode: 'click',
                     blurToSave: true,
                     nonEditableRows: () => [0, 3] }) }
  
  
 }) }
 
    />
Редактирование ячеек

Экспорт данных

Иногда изучения данных в браузере недостаточно – возникает необходимость экспорта информации для последующего анализа с помощью специализированного программного обеспечения. Достаточно импортировать модуль exportCSV – и ваша таблица получит функцию сохранения данных в CSV-файле с определенным (по желанию) названием. Экспорт данных выполняется после нажатия кнопки. Для реализации подобной функции следует установить компонент react-bootstrap-table2-toolkit:

npm install react-bootstrap-table2-toolkit --save

Функция экспорта данных доступна через свойство exportCSV в модуле ToolkitProvider. Для активации экспорта следует обернуть BootstrapTable в ToolkitProvider:

import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
 
const { ExportCSVButton } = CSVExport;
 
//  the rest of the code here
 
<ToolkitProvider
  keyField="id"
  data={ product }
  columns={ columns }
  exportCSV
>
  {
    props => (
      <div>
        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
        <hr />
        <BootstrapTable { ...props.baseProps } />
      </div>
    )
  }
</ToolkitProvider
Экспорт данных

Поиск в таблице

Это свойство работает так же, как и функция экспорта. Прежде всего, импортируйте свойство Search, активируйте его в ToolKitProvider, а затем оберните SearchBar в ToolkitProvider:

import ToolkitProvider, { CSVExport} from 'react-bootstrap-table2-toolkit';
import { Search } from 'react-bootstrap-table2-toolkit';
 
const { ExportCSVButton } = CSVExport;
const { SearchBar } = Search;
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">REXO</p>
       <ToolkitProvider
        keyField="id"
        data={ product }
        columns={ columns }
        exportCSV
        search
 >
     {
    props => (
      <div>
        <ExportCSVButton  { ...props.csvProps }>Export CSV!!</ExportCSVButton>
        <h3>Search anything below:</h3>
        <SearchBar { ...props.searchProps } />
        <hr />
 
        <hr />
        <BootstrapTable
                 
                pagination={paginationFactory()}
                {...props.baseProps}
              />
      </div>
    )
     }
</ToolkitProvider>
Поиск в таблице

Подведем итоги

Мы рассмотрели множество опций библиотеки React Bootstrap Table2, однако возможностей у нее намного больше. Она позволяет настраивать практически любые параметры таблиц. Для получения дополнительных сведений по работе с этим пакетом обратитесь к официальной документации.

Вот некоторые из основных возможностей библиотеки React Bootstrap Table2:

  • полная кастомизация строк и столбцов;
  • сортировка данных;
  • поиск в таблице;
  • выбор строк;
  • фильтры для данных в столбцах;
  • редактирование ячеек;
  • постраничный вывод записей;
  • расширяющиеся ячейки;
  • наложение;
  • импорт данных из удаленных таблиц.

Заключение

React Bootstrap Table2 – мощная библиотека. Она предоставляет удобный интерфейс для работы с табличными данными – вывода, поиска и управления. Работать с API этой библиотеки очень просто: основные функции можно активировать указанием атрибутов. При необходимости функциональность расширяется подключением дополнительных атрибутов, которые также могут быть динамическими функциями. Настроек по умолчанию будет достаточно для решения большинства задач. Кроме того, в официальной документации есть множество примеров по кастомизации и работе с продвинутыми настройками библиотеки.

Пожалуйста, оставьте ваши мнения по текущей теме статьи. За комментарии, подписки, лайки, дизлайки, отклики огромное вам спасибо!

Пожалуйста, опубликуйте свои мнения по текущей теме материала. За комментарии, подписки, лайки, дизлайки, отклики низкий вам поклон!

Дайте знать, что вы думаете по данной теме статьи в комментариях. За комментарии, отклики, лайки, подписки, дизлайки огромное вам спасибо!

Наталья Кайдаавтор-переводчик статьи «Working With Tables in React: Part Two»