Drip Table

Английский | Китайский язык | Документация | Обсуждение | Gitter | Официальная группа в WeChat

Введение

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

Drip Table состоит из нескольких подпроектов: drip-table, drip-table-generator.

Введение каждого из подпроектов представлено ниже:

• drip-table: Это основной пакет, который предоставляет компоненты для создания динамических таблиц.

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

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

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

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

⬆️ Начало работыТаблица Drip разделена на два сценария использования: конфигурационный конец и приложение. Конфигурационная сторона в основном отвечает за генерацию стандартных данных JSON Schema через визуализацию и низкокодовое программирование. Функция приложения состоит в том, чтобы преобразовывать стандартные данные конфигурации JSON Schema в динамическую таблицу.### Конфигурационная сторона

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

   Конфигурационная сторона зависит от приложения, поэтому убедитесь, что drip-table установлен перед установкой зависимостей.

   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";
   // импортировать CSS 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={[]}
     />
   );

   После этого приложение может быть нормально отображено, как показано на следующем скриншоте:

   ## 🤝 Вклад

Если вас интересует этот проект, вы можете создать ✨issue. Мы ценим ваш ❤️star.

Разработка

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