Дизайн-система Consta | ag-grid-adapter

Этот адаптер стилизует таблицу ag-grid-react для дизайн-системы Consta.

Как использовать

Установите пакет

# NPM
$ npm install @consta/ag-grid-adapter
# Yarn
$ yarn add @consta/ag-grid-adapter

Подключите зависимости

Чтобы начать работу, установите библиотеку @consta/uikit и настройте тему.

Можно использовать компоненты

Например, так:

import React from 'react'
import { agGridAdapter } from '@consta/ag-grid-adapter/agGridAdapter'
import { AgGridReact } from 'ag-grid-react'
const columnDefs = [
  { field: 'athlete', filter: 'agTextColumnFilter', minWidth: 200 },
  { field: 'age' },
  { field: 'country', minWidth: 180 },
  { field: 'year' },
  { field: 'date', minWidth: 150 },
  { field: 'gold' },
  { field: 'silver' },
  { field: 'bronze' },
  { field: 'total' },
]
const defaultColDef = {
  flex: 1,
  minWidth: 100,
  enableValue: true,
  enableRowGroup: true,
  enablePivot: true,
  sortable: true,
  filter: true,
  resizable: true,
}
const App = () => {
   const styleOptions = agGridAdapter({
    size: 'm',
    borderBetweenColumns: true,
    borderBetweenRows: true,
    headerVerticalAlign: 'center',
    headerView: 'default',
    verticalAlign: 'center',
  })
  return  (
    <AgGridReact
      {...styleOptions}
      rowData={[...]}
      columnDefs={columnDefs}
      defaultColDef={defaultColDef}
    />
  )
}

Документация

Посмотреть документацию и примеры

Разработка

Подготовка окружения

Рабочее окружение должно содержать NodeJS и Yarn.

Чтобы установить зависимости, выполните команду:

$ yarn install

Основные команды

# Запуск локального сервера для разработки
$ yarn start

# Сборка пакета
$ yarn build

# Сборка стенда
$ yarn stand:build

# Запуск тестов
$ yarn test

Контрибьюторам

Будем рады, если вы захотите принять участие в разработке дизайн-системы =) Но сначала прочитайте инструкцию для контрибьюторов.

Лицензия

Дизайн-систему можно использовать бесплатно, она распространяется на условиях открытой лицензии MIT.