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

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

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

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

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

Работа с таблицами в 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: часть вторая

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

Пока что мы выводили на экран таблицу, в которой всего четыре строки. В реальности таблицы могут включать в себя огромный объем информации, который обычно не помещается на экране. Для решения этой проблемы библиотека 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: часть первая

Теперь таблица готова к постраничному выводу. Сначала установим компонент 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: часть вторая

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

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

npm install react-bootstrap-table2-editor –save

Создание собственной библиотеки валидации для React: основы (часть 1)

Внесите импорт компонента в файл 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] }) }
  
  
 }) }
 
    />

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

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

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

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

Создание собственной библиотеки валидации на React: дополнительные функции (часть 2)

Функция экспорта данных доступна через свойство 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

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

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

Это свойство работает так же, как и функция экспорта. Прежде всего, импортируйте свойство 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: часть вторая

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

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

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

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

Заключение

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

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

Источник: www.internet-technologies.ru

НЕТ КОММЕНТАРИЕВ

Оставить комментарий