Учебное пособие по React Table (таблица TanStack)

• Создание сложной таблицы в React с изменяемыми столбцами и пользовательским вводом данных.  

• Поддержка разбиения на страницы, сортировки и фильтрации данных.  

• Использование библиотеки tstack table и пользовательского интерфейса chukker.  

• Запуск npm install и npm run dev для запуска сервера.  

• Использование провайдера chalker для оформления таблицы.  

• Библиотека tstack table предоставляет вспомогательные функции для создания и управления таблицами.  

• Вызов хука use react table для создания таблицы.  

• Передача данных и столбцов в таблицу.  

• Использование массива данных для отображения в таблице.  

• Создание массива определений столбцов.  

• Настройка заголовков и ячеек для каждого столбца.  

• Использование пользовательских компонентов для отображения данных.  

• Получение групп заголовков и отображение заголовков.  

• Отображение строк и ячеек с использованием функции flex render.  

• Обработка данных для отображения в ячейках.  

• Обработка данных для отображения в ячейках, таких как статус и дата выполнения.  

• Использование функции getvalue для отображения значений.  

• Проверка и отображение значений в зависимости от типа данных.  

• Исправление ошибок в таблице.  

• Добавление свойства width для table, header и cell.  

• Возможность изменения размера столбцов через свойство size.  

• Создание div для панели изменения размера.  

• Настройка непрозрачности и цвета фона.  

• Использование библиотеки таблиц tstack для управления изменением размера.  

• Преобразование строки в литерал шаблона.  

• Проверка изменения размера столбца.  

• Добавление реквизитов для обработки изменений размера.  

• Добавление режима изменения размера столбца.  

• Проверка работы изменения размера.  

• Переход к работе с редактируемой ячейкой.  

• Создание пользовательского компонента для редактируемой ячейки.  

• Привязка входных данных к локальному состоянию.  

• Инициализация входных данных значением из таблицы.  

• Использование функции useEffect для обновления локального состояния.  

• Обновление общего состояния таблицы при изменении входных данных.  

• Добавление свойства meta в конфигурацию таблицы.  

• Создание функции для обновления данных.  

• Вызов функции update data из редактируемой ячейки.  

• Создание нового файла для ячейки статуса.  

• Удаление ненужных свойств из реквизита.  

• Импортируем компоненты и добавляем функцию "ленивый" для отображения элементов только при открытии меню.  

• Устанавливаем смещение и значения flip и auto-select false.  

• Изменяем реквизиты кнопки меню на "статус" и проверяем работу меню.  

• Заменяем статус на фактический статус строки, используя getvalue.  

• Устанавливаем цвет фона кнопки в соответствии с цветом статуса.  

• Добавляем пользовательские статусы из файла данных и обновляем состояние таблицы при выборе статуса.  

• Создаем цветной значок и добавляем его к пункту меню.  

• Добавляем опцию для очистки статуса, передавая null в функцию обновления данных.  

• Создаем новый файл для ячейки даты и используем пакет npm react-datepicker.  

• Импортируем необходимые данные и деструктурируем реквизиты.  

• Устанавливаем имя класса-оболочки, формат даты и выбранную дату.  

• Создаем пользовательский компонент для ввода даты и деструктурируем реквизиты.  

• Добавляем функцию onclick для открытия окна выбора даты и настройки стиля.  

• Добавляем значок крестика для очистки даты и функцию очистки даты.  

• Добавляем функцию очистки даты и вызываем её при нажатии на крестик.  

• Исправляем проблему с открытием окна выбора даты при нажатии на крестик, используя event.stopPropagation.  

• Обновляем колонку заметок и завершаем работу с выбором даты.  

• Создание состояния фильтра для таблицы.  

• Состояние фильтра должно содержать массив объектов column filter.  

• Каждый объект column filter имеет идентификатор и значение.  

• Добавление состояния фильтра в таблицу.  

• Создание компонента фильтра с входными данными.  

• Импорт фильтров в таблицу и настройка стилей.  

• Добавление свойства getfiltered row model.  

• Создание объекта filter с идентификатором и значением.  

• Подключение входных данных к состоянию фильтра.  

• Проверка наличия фильтра с идентификатором task.  

• Присвоение значения фильтру при вводе данных.  

• Создание функции onchange для добавления нового объекта фильтра.  

• Создание компонента filter popover.  

• Настройка всплывающего окна с фильтром статуса.  

• Импорт и настройка компонента статуса.  

• Добавление обработчика onclick для фильтра статуса.  

• Обновление состояния фильтра столбцов при нажатии на статус.  

• Обработка нескольких статусов и обновление состояния фильтра.  

• Распространяем старый фильтр и добавляем новый идентификатор в массив.  

• Если статус активен, удаляем его из массива.  

• Если статус не активен, добавляем его в массив.  

• Получаем массив всех активных статусов.  

• Проверяем, соответствует ли текущий статус этому массиву.  

• Если соответствует, статус активен.  

• Добавляем свойство bg для активного статуса.  

• Проверяем, активен ли статус, и изменяем цвет фона.  

• Отображаем статус в активном состоянии.  

• Обновляем определения столбцов для фильтрации.  

• Добавляем свойство включить фильтр столбцов и функцию фильтрации.  

• Функция фильтрации должна возвращать логическое значение.  

• Функция фильтрации получает строку, идентификатор столбца и значение фильтра.  

• Проверяем статус текущей строки и сравниваем его с массивом идентификаторов статуса.  

• Возвращаем логическое значение, чтобы определить, отображать ли строку.  

• Если массив статусов пуст, возвращаем true для сохранения строки.  

• Это позволяет отображать строки даже при отсутствии активных статусов.  

• Завершаем фильтрацию и переходим к функциональности сортировки.  

• Добавляем новое свойство getSortedRowModel в таблицу.  

• Используем функцию из библиотеки tstack для сортировки.  

• Добавляем значок сортировки в заголовок таблицы.  

• Добавляем отступы и обработчик onclick для значка сортировки.  

• Используем функцию getToggleSortingHandler для обработки логики сортировки.  

• Проверяем, что все столбцы доступны для сортировки по умолчанию.  

• Отключаем сортировку для столбца статуса.  

• Добавляем индикатор для отображения направления сортировки.  

• Используем служебную функцию getIsSorted для отображения значка.  

• Добавляем нумерацию страниц в таблицу.  

• Обновляем конфигурацию таблицы для работы с нумерацией.  

• Используем служебные функции для получения индекса страницы и количества страниц.  

• Добавляем кнопки для перехода на предыдущую и следующую страницы.  

• Проверяем, есть ли предыдущая страница, и отключаем кнопку при необходимости.  

• Аналогично для кнопки следующей страницы.  

• Добавляем состояние разбивки на страницы в таблицу.  

• Устанавливаем размер страницы и индекс страницы.  

• Обновляем состояние для корректной работы кнопок.  

• Подводим итоги и благодарим за просмотр.  

• Призываем поставить лайк и подписаться.  

• Просим оставить отзывы и предложения для будущих видео.