Перейти к основному содержимому

DataGrid

Отображает таблицу

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

  <DataGrid
    Columns-var="COLUMNS"
    Value-var="DATA"
  />

Свойства​

ИмяОписаниеТипЗначение по умолчаниюВозможные значения
BadgeКоличественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число),
position ("post" или "pre"), color (цвет)		any
CSSМассив строк-классов CSS-стилей компонентаarray
ColumnWidthШирина столбца (px)number116
ColumnsМассив столбцов таблицы, каждый элемент которого описывается полями title (заголовок столбца), dataType (тип данных в столбце),
alias (уникальный идентификатор столбца), width (ширина в пикселях, процентах или значение auto), sortEnabled (признак возможности сортировки в столбце)		array
ColumnsWidthsПсевдоним свойств InputColumnsWidths и OutputColumnsWidthsobject
CombineConfigКонфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм.
Не рекомендуется указывать значение вручную		object
HiddenПризнак состояния компонента СкрытbooleanFalse
HintВсплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текстаany
IdИдентификатор компонента для навигации к нему на HTML-страницеstring
InputColumnsWidthsВходной параметр компонента: словарь с ключами - псевдонимами столбцов и значениями - их ширинами в пикселяхobject
InputSelectedItemsИдентификаторы выделенных строк (входное значение)array
InputSortSettingsВходной параметр компонента: массив настроек сортировкиarray
ItemAliasИдентификатор повторяющегося набора данныхstringitem
ItemIndexVariableИмя переменной для доступа к набору данных текущей итерацииstringi
KeyFieldИдентификатор строкиstringid
MinColumnWidthМинимальная ширина столбца (px)number15
MultipleSortРежим сортировки по нескольким столбцамbooleanFalse
OnClickОбработчик события нажатия кнопки мышиundefined
OnColumnsWidthsChangedОбработчик события изменения ширины столбцов; в качестве параметра принимает словарь с ключами - псевдонимами столбцов и значениями - их ширинами в пикселяхundefined
OnKeyDownОбработчик события KeyDownundefined
OnKeyUpОбработчик события KeyUpundefined
OnMouseDownОбработчик события MouseDownundefined
OnMouseEnterОбработчик события MouseEnterundefined
OnMouseLeaveОбработчик события MouseLeaveundefined
OnMouseMoveОбработчик события MouseMoveundefined
OnMouseOutОбработчик события MouseOutundefined
OnMouseOverОбработчик события MouseOverundefined
OnMouseUpОбработчик события MouseUpundefined
OnRowClickCобытие выделения строкundefined
OnSortОбработчик события сортировки; в качестве параметра принимает массив настроек сортировки в формате, используемом в сервисе доступа к хранилищу данныхundefined
OnUnmountОбработчик события Unmountundefined
OutputColumnsWidthsВыходной параметр компонента: словарь с ключами - псевдонимами столбцов и значениями - их ширинами в пикселяхobject
OutputSelectedItemsИдентификаторы выделенных строк (выходное значение)array
OutputSortSettingsВыходной параметр компонента: массив настроек сортировкиarray
RowHeightВысота строки (px)number16
SelectedItemsПсевдоним для InputSelectedItems, OutputSelectedItemsarray
SlotМетка для динамического добавления другого компонента по его идентификаторуstring
SortSettingsПсевдоним свойств InputSortSettings и OutputSortSettingsarray
ToolsVisibilityРежим отображения элементов управления столбцами (например, сортировкой)enumAlwaysAlways - Отображать всегда
OnHover - Отображать по наведению указателя мыши
TooltipВсплывающая подсказка над компонентом, чаще используемая для пояснения назначения значкаany
TraceId
Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности:
создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента
string
ValueМассив объектов — источник данных, отображаемых в таблицеarray
VisibleПризнак инверсии состояния компонента СкрытbooleanTrue
WidthChangeEnabledПризнак разрешения пользователю изменять ширину столбцовbooleanTrue

Примеры​

Скрипты:

const PermissionColorBindings = {
  Allowed: 'Green',
  Denied: 'Red',
  Guest: 'Gray'
};
const palette = {
  full: [
    {
      color: 'Green',
      border: 'GREEN_3',
      background: 'GREEN_1',
      text: 'GREEN_9'
    },
    {
      color: 'Red',
      border: 'RED_3',
      background: 'RED_1',
      text: 'RED_8'
    },
    {
      color: 'Gray',
      border: 'GRAY_4',
      background: 'GRAY_2',
      text: 'GRAY_8'
    },
  ],
  text: [
    {
      color: 'Green',
      figure: 'GREEN_8',
      text: 'GREEN_6'
    },
    {
      color: 'Red',
      figure: 'RED_6',
      text: 'RED_7'
    },
    {
      color: 'Gray',
      figure: 'GRAY_7',
      text: 'GRAY_6'
    },
  ],
};
const COLUMNS = [
  { title: 'Subject', dataType: 'boolean', alias: 'subject', width: '100' },
  { title: 'Object', dataType: 'string', alias: 'object', width: '150' },
  { title: 'Operation Type', dataType: 'string', alias: 'operationType', width: '200' },
  { title: 'Permission', dataType: 'string', alias: 'permission', width: '200' },
  { title: '', dataType: 'string', alias: 'actions', width: '350' },
];
const initialData = [
  { id: '1', subject: true, object: 'series', operationType: 'drawer unit on caster', permission: 'Allowed', actions: ''},
  { id: '2', subject: false, object: 'coffee/tea maker', operationType: 'shelf', permission: 'Allowed', actions: ''},
  { id: '3', subject: false, object: 'rug/', operationType: 'window decoration', permission: 'Denied', actions: ''},
  { id: '4', subject: true, object: 'cushion cover', operationType: 'system', permission: 'Denied', actions: ''},
];
const pagination = { skip: 0, take: 10 };
const DATA = usePagination(initialData, pagination);
setState({
  COLUMNS,
  initialData,
  DATA,
  pagination,
  palette,
  permissionColor: PermissionColorBindings,
  columnsWidths: {}
});

JSX:

<Group CSS={['px-16']}>
  <DataGrid
    Columns-var="COLUMNS"
    Value-var="DATA"
    MinColumnWidth={100}
    ColumnWidth={100}
    RowHeight={48}
    SelectedItems-var="SelectedItems"
    ColumnsWidths-var="columnsWidths"
    OnRowClick={() => { console.log(getEvent());}}
    OnColumnsWidthsChanged={
      () => {
        console.log(getEvent()); 
      }
    }
    WidthChangeEnabled={true}
  >
    <Thead>
      <Tr>
        <Td Slot="id_subject">
          <Checkbox
            Model-var="columnAllChecked"
            Label=""
            NoWriteOnInit={true}
            OnChange={(columnAllChecked, DATA) => {
              const _DATA = [...DATA];
              _DATA.forEach(row => { row.subject = columnAllChecked });
              setState({ DATA: _DATA });
            }}
          />
        </Td>
        <Td Slot="id_object">
          <Text
            Mode="Medium_14"
            Value-Localizable="DataGridExample.Object"
          />
        </Td>
        <Td Slot="id_operationType">
          <Text 
            Mode="Medium_14"
            Value-Localizable="DataGridExample.OperationType"
          />
          </Td>
          <Td Slot="id_permission">
          <Text 
            Mode="Medium_14"
            Value-Localizable="DataGridExample.Permission"
          />
        </Td>
      </Tr>
    </Thead>
    <Tbody>
      <Tr
        CSS={(i) => i % 2 ? ['EVEN_TR']: ['ODD_TR']}
        OnClick={(item, i) => {
          console.log('item clicked:', i, item);
        }}
      >
        <Td Slot="id_subject">
          <Group
            VerticalAlign="Center"
          >
            <Checkbox
              Model-var="item.subject"
              Label=""
              NoWriteOnInit={true}
              OnChange={(DATA, i) => {
                const _DATA = [...DATA];
                _DATA[i].subject = !_DATA[i].subject;
                const columnAllChecked = DATA.every(row => row.subject);
                setState({ DATA: _DATA, columnAllChecked });
              }}
            />
            <Text
              Value-var="item.text"
              WhiteSpace='nowrap'
            />
          </Group>
        </Td>
      <Td Slot="id_permission">
        <Group
          VerticalAlign="Center"
          Background={(palette, permissionColor, item) => {
            return palette?.full.find(palette => palette.color === permissionColor[item.permission])?.background
          }}
          Border={(palette, permissionColor, item) => {
            return `1px solid ${palette?.full.find(palette => palette.color === permissionColor[item.permission])?.border}`
          }}
          CSS={['px-12 py-4']}
          BorderRadius="100px"
          Height="24px"
          Width="fit-content"
          HoveredBackground={(palette, permissionColor, item) => {
            return palette?.full.find(palette => palette.color === permissionColor[item.permission])?.background
          }}
        >
          <Text
            Mode="Medium_14"
            Value-var="item.permission"
            Color={(palette, permissionColor, item) => {
              return palette?.text.find(palette => palette.color === permissionColor[item.permission])?.text
            }}
            WhiteSpace="nowrap"
          />
        </Group>
      </Td>
      <Td Slot="id_actions">
        <Group
            VerticalAlign="Center"
            CSS={['pl-12 py-4']}
            Align="End"
          >
            <Link
              Tooltip-Localizable="FrontendProject.Edit"
            >
              <Icon
                Color="GRAY_6"
                Name="edit_action"
                Size="Small"
              />
            </Link>
    
            <Link
              Tooltip-Localizable="FrontendProject.Delete"
            >
              <Icon
                Color="GRAY_6"
                Name="delete_item"
                Size="Small"
              />
            </Link>
          </Group>
      </Td>
      </Tr>
    </Tbody>
    <Pagination
      ItemsCount-var="initialData.length"
      Value-var="pagination"
      OnChange={(initialData, pagination) => { 
        const DATA = usePagination(initialData, pagination);
        setState({ DATA }); 
      }}
    />
  </DataGrid>
</Group>