data-table

import { DataTable } from "woly";

Example

ID ДебетID Кредит
Название банка
Платежная система
Диапазон
798172----ВТБVisa/Mastercardfrom 1 to 4
798173----Альфа-банкVisa/Mastercardfrom 4 to 6
798174----ВТБМИРfrom 4 to 6
798175----ТинькоффVisa/Mastercardfrom 3 to 6
798176----ОткрытиеМИРfrom 4 to 6
798177----Альфа-банкМИРfrom 4 to 9
import { DataTable, DataTableHeadProps } from 'woly'
import { createStore, createEvent, forward, combine } from 'effector'
import { useStore } from 'effector-react'
import { Filter } from './filter'
import { RangeCell } from './range-cell'

const bankNames = [
  {
    value: 'ВТБ',
    name: 'ВТБ',
  },
  {
    value: 'Тинькофф',
    name: 'Тинькофф',
  },
  {
    value: 'Альфа-банк',
    name: 'Альфа',
  },
  {
    value: 'Открытие',
    name: 'Открытие',
  },
];

const paymentSystems = [
  {
    value: 'Visa/Mastercard',
    name: 'Visa/Mastercard',
  },
  {
    value: 'МИР',
    name: 'МИР',
  },
];

const $bankFilter = createStore([])
const bankFilterUpdated = createEvent()
forward({ from: bankFilterUpdated, to: $bankFilter })

const $paymentSystemFilter = createStore([])
const paymentSystemFilterUpdated = createEvent()
forward({ from: paymentSystemFilterUpdated, to: $paymentSystemFilter })

const columns = [
  {
    title: 'ID Дебет',
    property: 'id-debet',
  },
  {
    title: 'ID Кредит',
    property: 'id-credit',
  },
  {
    title: 'Название банка',
    property: 'bank-name',
    head: ({ title }: DataTableHeadProps) => (
      <Filter value={useStore($bankFilter)} onChange={bankFilterUpdated} options={bankNames} title={title} />
    ),
  },
  {
    title: 'Платежная система',
    property: 'payment-system',
    head: ({ title }: DataTableHeadProps) => (
      <Filter value={useStore($paymentSystemFilter)} onChange={paymentSystemFilterUpdated} options={paymentSystems} title={title} />
    ),
  },
  {
    title: 'Диапазон',
    property: 'range',
    cell: RangeCell,
  },
];

const values = [
  {
    id: 1,
    'id-debet': 798172,
    'id-credit': null,
    'bank-name': 'ВТБ',
    'payment-system': 'Visa/Mastercard',
    range: {
      from: 1,
      to: 4,
    },
  },
  {
    id: 2,
    'id-debet': 798173,
    'id-credit': null,
    'bank-name': 'Альфа-банк',
    'payment-system': 'Visa/Mastercard',
    range: {
      from: 4,
      to: 6,
    },
  },
  {
    id: 3,
    'id-debet': 798174,
    'id-credit': null,
    'bank-name': 'ВТБ',
    'payment-system': 'МИР',
    range: {
      from: 4,
      to: 6,
    },
  },
  {
    id: 4,
    'id-debet': 798175,
    'id-credit': null,
    'bank-name': 'Тинькофф',
    'payment-system': 'Visa/Mastercard',
    range: {
      from: 3,
      to: 6,
    },
  },
  {
    id: 5,
    'id-debet': 798176,
    'id-credit': null,
    'bank-name': 'Открытие',
    'payment-system': 'МИР',
    range: {
      from: 4,
      to: 6,
    },
  },
  {
    id: 6,
    'id-debet': 798177,
    'id-credit': null,
    'bank-name': 'Альфа-банк',
    'payment-system': 'МИР',
    range: {
      from: 4,
      to: 9,
    },
  },
];

const $filteredValues = combine(
  $bankFilter,
  $paymentSystemFilter,
  (banks, paymentSystems) => {
    return values.filter(value => {
      const bankMatches = banks.length === 0 || banks.includes(value['bank-name'])
      const paymentSystemMatches = paymentSystems.length === 0 || paymentSystems.includes(value['payment-system'])
      return bankMatches && paymentSystemMatches
    })
  }
)

export function Example() {
  const values = useStore($filteredValues)

  return <Playground>
    <block.L style={{ minHeight: 300, background: '#f5f5f5', padding: '20px' }}>
      <DataTable rowKey="id" columns={columns} values={values} priority="primary" />
    </block.L>
  </Playground>
}

Components

NameDescription
DataTableDataTable component

DataTable Props

NameTypeDefaultDescription
columnsArray<ColumnProps>Table head
placeholderReact.ReactNode ӏ string'----'String that is displayed when value is empty
valuesArray<Record<string, CellProps>>Table content
prioritystring'secondary'Priority prop to style DataTable component

HeadProps

NameTypeDefaultDescription
titleReact.ReactNode ӏ stringA column name passed via title of ColumnProps

ColumnProps

NameTypeDefaultDescription
titleReact.ReactNode ӏ stringA column name. Can be a simple string or a react node
propertystringUnique property of column to connect head with value in a row
headReact.FC<HeadProps>FC to render head
cellReact.FC<CellProps>FC to render cell
placeholderReact.ReactNode ӏ stringA column-specific placeholder