DataGrid

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

Используется для отображения данных в табличном виде. Поддерживает шаблонизацию. Чтобы определить шаблон ячейки, необходимо передать дочерние компоненты Thead, Tbody, Tr, Td. Передача Thead и Tbody необязательна, но если они переданы, обязательна передача Tr и Td. Для определения, к какому столбцу относится шаблон ячейки, у компонента Td должно быть указано свойство Slot, значение которого начинается с "id_<columnAlias>", где columnAlias - псевдоним столбца в свойстве Columns. В шаблоне доступ к данным текущей строки осуществляется через переменную, имя которой определяется свойством ItemAlias. Если значение ItemAlias не передано, по умолчанию используется переменная item.

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

Свойства

Badge

Количественная информация в компонентах Menu, Accordion, Link, Text.

В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)

Тип: any

CSS

Массив строк-классов CSS-стилей, описанных в файле CSS.css DevTools-проекта или встроенных CSS-стилей Платформы. Пример: // CSS-стиль, определяющий внешние (m) и внутренние (p) отступы для компонента. Число после символа "-" (в этом примере - 4) должно быть кратно величине, указанной в параметре, определяющем кратность отступов, в файле Style.mdtheme DevTools-проекта CSS={["m-4", "p-4"]}

Тип: array

ColumnWidth

Ширина столбца (px)

Тип: number

Значение по умолчанию: 116

Columns

Массив столбцов таблицы, каждый элемент которого описывается полями title (заголовок столбца), dataType (тип данных в столбце), alias (уникальный идентификатор столбца), width (ширина в пикселях, процентах или значение auto), sortEnabled (признак возможности сортировки в столбце)

Тип: array

ColumnsWidths

Псевдоним свойств InputColumnsWidths и OutputColumnsWidths

Тип: object

CombineConfig

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых фрагментов кода. Запрещено изменять значение

Тип: object

Hidden

Признак состояния компонента Скрыт

Тип: boolean

Hint

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на белом фоне

Тип: any

Id

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

InputColumnsWidths

Входной параметр компонента: словарь с ключами - псевдонимами столбцов и значениями - их ширинами в пикселях

Тип: object

InputSelectedItems

Идентификаторы выделенных строк (входное значение)

Тип: array

InputSortSettings

Входной параметр компонента: массив настроек сортировки

Тип: array

ItemAlias

Идентификатор повторяющегося набора данных

Тип: string

Значение по умолчанию: item

ItemIndexVariable

Имя переменной для доступа к набору данных текущей итерации

Тип: string

Значение по умолчанию: i

KeyField

Идентификатор строки

Тип: string

Значение по умолчанию: id

MinColumnWidth

Минимальная ширина столбца (px)

Тип: number

Значение по умолчанию: 15

MultipleSort

Режим сортировки по нескольким столбцам

Тип: boolean

OnClick

Обработчик события нажатия левой кнопки мыши, когда указатель мыши находится на компоненте.

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример:

OnClick={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnColumnsWidthsChanged

Обработчик события изменения ширины столбцов; в качестве параметра принимает словарь с ключами - псевдонимами столбцов и значениями - их ширинами в пикселях

Тип: undefined

OnKeyDown

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyUp

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseDown

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseEnter

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseEnter={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseLeave

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseLeave={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseMove

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseMove={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOut

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOut={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOver

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOver={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseUp

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnRowClick

Cобытие выделения строк

Тип: undefined

OnSort

Обработчик события сортировки; в качестве параметра принимает массив настроек сортировки в формате, используемом в сервисе доступа к хранилищу данных

Тип: undefined

OnUnmount

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров. Пример:

OnUnmount={() => { // Отмена выполнения периодического действия при размонтировании экранной формы return clearInterval(getValue("pleerInterval")) } }

Тип: undefined

OutputColumnsWidths

Выходной параметр компонента: словарь с ключами - псевдонимами столбцов и значениями - их ширинами в пикселях

Тип: object

OutputSelectedItems

Идентификаторы выделенных строк (выходное значение)

Тип: array

OutputSortSettings

Выходной параметр компонента: массив настроек сортировки

Тип: array

RowHeight

Высота строки (px)

Тип: number

Значение по умолчанию: 16

SelectedItems

Псевдоним для InputSelectedItems, OutputSelectedItems

Тип: array

Slot

Именованное пространство во фрагменте экранной формы.

Тип: string

SortSettings

Псевдоним свойств InputSortSettings и OutputSortSettings

Тип: array

ToolsVisibility

Режим отображения элементов управления столбцами (например, сортировкой)

Тип: enum

Значение по умолчанию: Always

Возможные значения:

Always - Отображать всегда OnHover - Отображать по наведению указателя мыши

Tooltip

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне

Тип: any

TraceId

Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода по изменению состояния компонента

Тип: string

Value

Массив объектов — источник данных, отображаемых в таблице

Тип: array

Visible

Признак инверсии состояния компонента Скрыт

Тип: boolean

Значение по умолчанию: True

WidthChangeEnabled

Признак разрешения пользователю изменять ширину столбцов

Тип: boolean

Значение по умолчанию: True

Примеры

Скрипты:

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,
  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 CSS={['px-12 py-4']} Height="24px" VerticalAlign="Center">
          <Status
            Mode="Full"
            Text-var="item.permission"
            Color={(item) => {
              return item.permission === 'Allowed' ? 'GREEN' : 'RED'
            }}
          />
        </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>