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

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 разрабатываемого проекта или встроенных CSS-стилей Платформы.

Пример:

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

Тип: array

ColumnWidth​

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

Тип: number

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

Columns​

Массив столбцов таблицы, каждый элемент которого описывается объектом со следующими полями:

  • title - заголовок столбца;
  • 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​

Обработчик события изменения ширины столбцов.

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

Пример:

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

Тип: 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​

Обработчик события выбора строки.

В качестве параметра принимает массив идентификаторов выбранных строк.

Пример:

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

Тип: undefined

OnSort​

Обработчик события включения/выключения сортировки в столбце.

В качестве параметра принимает массив настроек сортировки в формате, используемом в сервисе доступа к хранилищу данных: массив словарей с ключами - псевдонимами столбцов и значениями - направлениями сортировки с возможными значениями "ASC" и "DESC".

Пример:

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

Тип: undefined

OnUnmount​

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

Пример:

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

Тип: undefined

OutputColumnsWidths​

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

Тип: object

OutputSelectedItems​

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

Тип: array

OutputSortSettings​

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

Тип: array

RowHeight​

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

Тип: number

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

SelectedItems​

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

Тип: array

Slot​

Именованное пространство во фрагменте экранной формы или именованное пространство в шаблоне компонента с возможностью шаблонизации, например, Select, DataGrid.

Тип: string

SortSettings​

Псевдоним свойств InputSortSettings и OutputSortSettings. Массив словарей с ключами - псевдонимами столбцов и значениями - направлениями сортировки с возможными значениями "ASC" и "DESC."

Тип: 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>