Читая заголовок, вы, вероятно, думаете: почему бы не использовать стороннюю библиотеку для создания таблицы и выполнения работы? Разве не будет удобнее просто использовать библиотеку со встроенными нумерацией страниц и фильтрами.
Это зависит от того, чего вы пытаетесь достичь.
Если вашей целью было просто создать простую таблицу со встроенной разбивкой на страницы, вы можете смело использовать библиотеку. Если вы такой же разработчик, как я, который продолжает оттачивать навыки css и javascript, я думаю, что стоит попробовать реализовать это с нуля и понять, как таблицы на самом деле форматируются и реализуются за сценой.
Чтобы понять, как работает таблица, давайте посмотрим, какие у нас есть варианты:
- html5
- таблица реакции
- реагировать-данные-таблица-компонент
- реагировать на бутстрап
- материал-интерфейс
- семантический интерфейс
- кендо пользовательский интерфейс
И так далее! У нас есть множество вариантов, но чтобы понять, как это работает в полной мере, давайте взглянем на реализацию html5.
В html 5 мы можем создать таблицу с помощью тега ‹table›, с ‹tr› в качестве тега строки таблицы и ‹th› в качестве тега заголовка таблицы. Если вы создаете таблицу с заголовком, она будет выглядеть так:
и если мы создаем таблицу с заголовком и некоторым содержимым строки, она будет выглядеть так:
Чего ждать? Разве создание таблицы html5 не должно помогать нам автоматически генерировать формат таблицы?
Давайте посмотрим на мою версию компонента таблицы в React:
Здесь у меня есть несколько частей этого компонента таблицы:
- панель поиска / фильтра
- заголовок таблицы
- строки / записи таблицы
- разбивка на страницы
С помощью панели поиска мы устанавливаем значение фильтра, который мы использовали для применения к записям данных, которые мы получаем.
После этого мы генерируем заголовок, который будет предоставлен как опора.
Могут спросить: почему мы не генерируем заголовок в компоненте таблицы?
Это потому, что мы хотим дать пользователям возможность создавать собственные заголовки. Для простой таблицы нам, вероятно, не нужно об этом беспокоиться. В реальном сценарии заголовок можно настроить разными способами в соответствии с требованиями клиента и так далее.
После заголовка мы берем массив данных (известный как записи), который был передан, и вызываем renderRow, чтобы сгенерировать данные строки для таблицы.
Опять же, мы хотим сделать формат строки настраиваемым, и вместо того, чтобы диктовать, как строки будут отображаться сами, мы позволяем вызывающему компоненту таблицы определять это.
Вот как это может выглядеть:
Когда мы инициализируем компонент таблицы, мы добавляем реквизит с именем renderRow, который принимает параметр строки и вызывает функцию generateRow. Эта функция определяет, как выглядит каждая строка в таблице.
Мы также передаем заголовок в таблицу, в которой мы отображаем заголовки здесь, а затем передаем в таблицу.
С записями мы просто переходим в таблицу, в которой компонент таблицы сопоставляет записи и вызывает renderRow для генерации форматов строк в таблице.
Теперь вернемся к реализации таблицы:
Обратите внимание, что у нас также есть компонент нумерации страниц. Прежде чем мы углубимся в то, как была построена разбивка на страницы, давайте сначала разберемся, что это такое.
Что ж ... что такое разбиение на страницы?
Разбивка на страницы - это процесс разделения коллекции данных на различные подмножества, часто деленные на смещение (например, отображение 10 записей на странице).
Вот как это будет выглядеть:
В приведенном выше примере мы передаем свойство pagelimit props, которое определяет, сколько записей мы показываем на странице. Мы также передаем длину страницы, которая необходима для правильного расчета нумерации страниц.
Мы также передаем текущую страницу и набор свойств страницы, где мы используем текущую страницу для выделения страницы, на которой мы находимся, и вызываем setPage, когда пользователь переходит на другие страницы.
Вот как будет выглядеть реализация разбивки на страницы:
У нас есть renderPrevPageblocks, который позволяет пользователю переходить к предыдущим страницам или к первой странице. И наоборот, у нас также есть renderNextPageBlocks, который позволяет пользователям переходить к следующим страницам или к последней странице.
И последнее, но не менее важное: мы также визуализируем блоки страниц посередине, что позволяет нам свободно переходить на любые страницы, которые мы хотим.
Помните, когда мы изначально создавали таблицу с нуля, формат таблицы выглядел не так? Давайте взглянем на страницу, которая генерирует таблицу, заголовок таблицы и строки таблицы, и посмотрим, как CSS придает таблице респектабельный вид:
Если вы перейдете к строке 7 и заметите, что есть contentSection и headerSection css. У них обоих есть правило: сплошная граница 1 пиксель и значение заполнения 8. Значение заполнения задает интервал между каждым содержимым и заголовком.
Я знаю, что сейчас все вы, вероятно, задаетесь вопросом, как, вероятно, вызываются таблицы с другими существующими библиотеками. Давайте посмотрим, как это будет выглядеть с таблицей реакции:
Это очень похоже на то, что есть у нас. Фактически, вы можете погрузиться глубже и понять, что доступны варианты нумерации страниц.
Вот один вывод: использование настраиваемой библиотеки сэкономит больше времени, но всегда есть вероятность, что определенные настраиваемые поведения не поддерживаются этими библиотеками.
У каждой стороны есть свои плюсы и минусы, но именно вы, как разработчик, принимаете решение о том, создавать ли с нуля или использовать стороннюю библиотеку.
Вы можете проверить эту ссылку на github для моей реализации таблицы реакции:
