Interface DataGridProps<DataType>

Type Parameters

Hierarchy

  • DataGridProps

Properties

autoAdjustColWidthOnInitialRender? borderedCell? className? columnVisibilityOptions? columns data dataGridApiRef? dimensions? draggableColumns? expandableRows? filterFnsMenu? groupedColumns? headerActionsMenu? icons? isHoverable? loading? localization? onRowClick? pagination? pinnedColumns? resizableColumns? rowActionsMenu? rowSelection? serverSide? settingsMenu? sorting? striped? style? styling? theme? tooltipOptions? uniqueRowKey virtualization?

Properties

Optional autoAdjustColWidthOnInitialRender

autoAdjustColWidthOnInitialRender?: boolean

Adjusts column width automatically on initial render.

Optional borderedCell

borderedCell?: boolean

Adds border around data cells.

Optional className

className?: string

Element class to pass.

Optional columnVisibilityOptions

columnVisibilityOptions?: ColumnVisibilityProps<DataType>

Allows the ability to alter column visibility.

columns

columns: ColumnDefinition<DataType>[]

Columns that will be used in the data-grid.

data

data: undefined | DataType[]

Data to output. Object keys must match column keys if default rendering is used.

Optional dataGridApiRef

dataGridApiRef?: MutableRefObject<null | DataGridReference<DataType>>

Reference to data-grid element to provide data and column access gridTools.

Optional dimensions

dimensions?: Partial<DataGridDimensionsDefinition>

Allows the ability to customize data-grid dimensions.

Optional draggableColumns

draggableColumns?: ColumnDraggingProps<DataType>

Allows the ability to drag columns and change their order.

Optional expandableRows

expandableRows?: RowExpandabilityProps<DataType>

Allows the ability for a row to expand.

Optional filterFnsMenu

filterFnsMenu?: FilterFnsMenuProps

Displays filter functions menu next to inputs.

Optional groupedColumns

groupedColumns?: GroupedColumnProps<DataType>

Allows the ability to group the columns under single header.

Optional headerActionsMenu

headerActionsMenu?: HeaderActionsMenuProps

Displays three-dot context menu at the end of head cell.

Optional icons

icons?: Partial<{
    ArrowDown: ((props: SVGProps<SVGSVGElement>) => Element);
    ArrowLeft: ((props: SVGProps<SVGSVGElement>) => Element);
    ArrowRight: ((props: SVGProps<SVGSVGElement>) => Element);
    ArrowUp: ((props: SVGProps<SVGSVGElement>) => Element);
    CheckMark: ((props: SVGProps<SVGSVGElement>) => Element);
    ChevronDown: ((props: SVGProps<SVGSVGElement>) => Element);
    ChevronUp: ((props: SVGProps<SVGSVGElement>) => Element);
    ClearFilters: ((props: SVGProps<SVGSVGElement>) => Element);
    ClearSorting: ((props: SVGProps<SVGSVGElement>) => Element);
    Close: ((props: SVGProps<SVGSVGElement>) => Element);
    ColumnGroup: ((props: SVGProps<SVGSVGElement>) => Element);
    Columns: ((props: SVGProps<SVGSVGElement>) => Element);
    DarkMode: ((props: SVGProps<SVGSVGElement>) => Element);
    Date: ((props: SVGProps<SVGSVGElement>) => Element);
    Drag: ((props: SVGProps<SVGSVGElement>) => Element);
    Empty: ((props: SVGProps<SVGSVGElement>) => Element);
    FastForward: ((props: SVGProps<SVGSVGElement>) => Element);
    FilterMenu: ((props: SVGProps<SVGSVGElement>) => Element);
    FilterVisibility: ((props: SVGProps<SVGSVGElement>) => Element);
    FullScreen: ((props: SVGProps<SVGSVGElement>) => Element);
    Hidden: ((props: SVGProps<SVGSVGElement>) => Element);
    Info: ((props: SVGProps<SVGSVGElement>) => Element);
    Menu: ((props: SVGProps<SVGSVGElement>) => Element);
    Minus: ((props: SVGProps<SVGSVGElement>) => Element);
    MultiDot: ((props: SVGProps<SVGSVGElement>) => Element);
    NoResult: ((props: SVGProps<SVGSVGElement>) => Element);
    PinLeft: ((props: SVGProps<SVGSVGElement>) => Element);
    PinRight: ((props: SVGProps<SVGSVGElement>) => Element);
    Plus: ((props: SVGProps<SVGSVGElement>) => Element);
    Search: ((props: SVGProps<SVGSVGElement>) => Element);
    Settings: ((props: SVGProps<SVGSVGElement>) => Element);
    ThreeDots: ((props: SVGProps<SVGSVGElement>) => Element);
    Unpin: ((props: SVGProps<SVGSVGElement>) => Element);
}>

Allows the ability to customize icons.

Optional isHoverable

isHoverable?: boolean

Allows the user to hover over the rows.

Optional loading

loading?: boolean

Displays loading-skeleton if activated.

Optional localization

localization?: LocalizationProps

Allows the ability to customize localization.

Optional onRowClick

onRowClick?: ((e: MouseEvent<HTMLDivElement, MouseEvent>, data: DataType) => void)

Type declaration

    • (e: MouseEvent<HTMLDivElement, MouseEvent>, data: DataType): void

    • Callback function to execute on row click.

      Parameters

      • e: MouseEvent<HTMLDivElement, MouseEvent>
      • data: DataType

        Data of the data-grid row.

      Returns void

Optional pagination

pagination?: ClientPaginationProps

Default pagination props to partition data.

Optional pinnedColumns

pinnedColumns?: ColumnPinProps<DataType>

Allows the usage of pinning columns to either left or right.

Optional resizableColumns

resizableColumns?: ColumnResizingProps<DataType>

Allows the ability to resize the columns.

Optional rowActionsMenu

rowActionsMenu?: RowActionsMenuProps<DataType>

Displays three-dot context menu at the end of the row.

Optional rowSelection

rowSelection?: RowSelectionProps

Allows the usage of checkboxes and row selection.

Optional serverSide

serverSide?: ServerSideFetchingProps

Configurations to allow API based filtering and pagination.

Optional settingsMenu

settingsMenu?: SettingsMenuProps

Displays settings menu at the bottom start of the footer.

Optional sorting

sorting?: ClientSortingProps

Default sorting props, such as event handler when sorting operation occurs.

Optional striped

striped?: boolean

Allows the data-grid rows to contain striped background color.

Optional style

style?: CSSProperties

Element style to pass.

Optional styling

styling?: Partial<DataGridStylingDefinition>

Allows the ability to use custom data-grid styling.

Optional theme

theme?: string & {} | "dark" | "light"

Allows the ability to set custom theme.

Optional tooltipOptions

tooltipOptions?: DataGridTooltipProps

Allows the ability to display tooltip on cells.

uniqueRowKey

uniqueRowKey: KeyLiteralType<DataType>

Identifier key of the data object.

Optional virtualization

virtualization?: VirtualizationProps

Improves both rendering and overall performance of the list.

Settings

Member Visibility

Theme

Generated using TypeDoc