DataGrid

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

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

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

Свойства

Имя	Описание	Тип	Значение по умолчанию
CSS	Массив строк-классов CSS-стилей компонента	array
ColumnWidth	Ширина столбца (px)	number	116
Columns	Массив столбцов таблицы	array
Hidden	Признак состояния компонента Скрыт	boolean
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
InputSelectedItems	Идентификаторы выделенных строк (входное значение)	array
KeyField	Идентификатор строки	string	id
MinColumnWidth	Минимальная ширина столбца (px)	number	15
OnClick	Обработчик события Click	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnRowClick	Cобытие выделения строк	undefined
OnUnmount	Обработчик события Unmount	undefined
OutputSelectedItems	Идентификаторы выделенных строк (выходное значение)	array
RowHeight	Высота строки (px)	number	16
SelectedItems	Алиас для InputSelectedItems, OutputSelectedItems	array
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Value	Массив объектов — источник данных, отображаемых в таблице	array
Visible	Признак инверсии состояния компонента Скрыт	boolean	True

Примеры

JSX:

<DataGrid
  Columns-var="COLUMNS"
  Value-var="DATA"
  RowHeight={36}
  ColumnWidth={100}
  SelectedItems-var="SelectedItems"
  OnRowClick={() => { console.log(getEvent()); }}
>
  <Pagination
    ItemsCount-var="initialData.length"
    Value-var="pagination"
    OnChange={(initialData, pagination) => { 
      const DATA = usePagination(initialData, pagination);
      setState({ DATA }); 
    }}
  />
</DataGrid>

Свойства​

Примеры​

Свойства

Примеры