Drip Table

English | русский | Официальная документация | Обсуждение | Группа Gitter | Официальная WeChat группа

📖 Введение

DripTable — это решение для динамических списков, выпущенное JD Retail для корпоративных средних и задних офисов. Проект основан на React и JSON Schema, с целью быстрого создания страниц с помощью простой конфигурации, что снижает сложность разработки списков и повышает производительность.

DripTable включает следующие подпроекты: drip-table, drip-table-generator.

Подробное описание каждого подпроекта:

• drip-table: основной библиотека решения для динамических списков, которая поддерживает автоматическое отображение данных, соответствующих стандарту JSON Schema.- drip-table-generator: визуальное приложение для генерации конфигурационных данных согласно стандарту JSON Schema.

Основные возможности

• Базовая таблица
• Сложная таблица
• Инструментальная панель
• Renderer
• Текстовый компонент
• Числовой компонент
• Изображение компонента
• Компонент ссылки
• Компонент метки
• Компонент кнопки
• Компонент выпадающего списка
• Компонент даты
• Компонент всплывающей страницы
• Компонент богатого текста
• Компонент комбинированного использования
• Кастомизируемый компонент
• Шапка слота
• Подвал слота
• Пагинация
• Виртуальный список
• Замороженная шапка таблицы
• Дочерняя таблица
• Выбор строки
• Перетаскивание строк
• Зафиксированные столбцы
• Отображение/скрытие столбцов
• Редактирование данных
• Полоска зебры
• Разные виды границ
• Адаптивная высота и ширина
• Размер таблицы
• Глобальные стили
• Уведомление об отсутствии данных
• Загрузка...
• Карточная верстка
• Фильтрация

⌛ Начало использования

DripTable имеет две области применения: конфигурационная сторона и прикладная сторона. Конфигурационная сторона отвечает за создание данных в соответствии со стандартом JSON Schema с помощью визуализации и низкого уровня программирования (low-code). Прикладная сторона отвечает за отображение данных в виде динамического списка.### Конфигурационная сторона

1. Установка зависимостей

   Для работы конфигурационной стороны необходима установка пакета drip-table. Убедитесь, что он установлен перед тем как установить drip-table-generator.

   yarn

   yarn add drip-table-generator

   npm

   npm install --save drip-table-generator

2. Включение зависимости в начале файла

   import DripTableGenerator from "drip-table-generator";
   import "drip-table-generator/dist/index.min.css";

3. Привязка компонента в странице

   return <DripTableGenerator />;

   Конфигурационная сторона должна отображаться следующим образом:

   

Прикладная сторона

1. Установка зависимостей

   Установите drip-table:

   yarn

   yarn add drip-table

   npm

   npm install --save drip-table

2. Включение зависимости в начале файла

   // Подключаем drip-table
   import DripTable from "drip-table";
   // Подключаем стиль drip-table
   import "drip-table/dist/index.min.css";

3. Пример использования

   const schema = {
     size: "middle",
     columns: [
       {
         key: "columnKey",
         title: "Заголовок колонки",
         dataIndex: "dataIndexName",
         component: "text",
         options: {
           mode: "single",
         },
       },
     ],
   };
   return (
     <DripTable
       schema={schema}
       dataSource={[]}
     />
   );

   Прикладная сторона должна отображаться следующим образом:

   ## 🤝 Разработочный справочник

Если вас интересует этот проект, вы можете поддержать его, звездами на GitHub, либо отправив запрос на исправление.

Локальное выполнение

1. Клонирование проекта

   git clone https://github.com/JDFED/drip-table.git

2. Установка зависимостей

   lerna bootstrap

3. Сборка зависимых пакетов

   yarn

   yarn run build

   npm

   npm run build

4. Запуск проекта

   yarn start

• Проект доступен по адресу http://localhost:8000
• Пример маршрута для drip-table: /drip-table/guide/basic-demo
• Пример маршрута для drip-table-generator: /drip-table-generator/demo

Дополнительные команды см. в разделе DEVELOP. Официальный сайт доступен по адресу drip-table.

Разработка и общение

официальная группа общения в WeChat

Лицензия

Лицензия MIT