@linzjs/step-ag-grid
Version:
[](https://github.com/semantic-release/semantic-release) > Reusable [ag-grid](https://www.ag-grid.com/) component for LINZ / Toitū te whenua.
86 lines (85 loc) • 3.52 kB
TypeScript
import { ColDef, GridOptions } from 'ag-grid-community';
import { ReactElement } from 'react';
import { GridContextMenuComponent } from './gridHook';
export interface GridBaseRow {
id: string | number;
}
export interface GridOnRowDragEndProps<TData extends GridBaseRow> {
movedRow: TData;
targetRow: TData;
direction: -1 | 1;
}
export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
readOnly?: boolean;
defaultPostSort?: boolean;
selectable?: boolean;
enableClickSelection?: boolean;
enableSelectionWithoutKeys?: boolean;
hideSelectColumn?: boolean;
theme?: string;
['data-testid']?: string;
domLayout?: GridOptions['domLayout'];
externalSelectedItems?: any[];
setExternalSelectedItems?: (items: any[]) => void;
defaultColDef?: GridOptions['defaultColDef'];
columnDefs: ColDef<TData>[];
rowData: GridOptions['rowData'];
selectColumnPinned?: ColDef['pinned'];
noRowsOverlayText?: string;
noRowsMatchingOverlayText?: string;
animateRows?: boolean;
rowHeight?: number;
rowClassRules?: GridOptions['rowClassRules'];
rowSelection?: 'single' | 'multiple';
autoSelectFirstRow?: boolean;
onColumnMoved?: GridOptions['onColumnMoved'];
rowDragText?: GridOptions['rowDragText'];
onRowDragEnd?: (props: GridOnRowDragEndProps<TData>) => Promise<void> | void;
alwaysShowVerticalScroll?: boolean;
suppressColumnVirtualization?: GridOptions['suppressColumnVirtualisation'];
/**
* When the grid is rendered using sizeColumns=="auto" this is called initially with the required container size to fit all content.
* This allows you set the size of the panel to fit perfectly.
*/
onContentSize?: (props: {
width: number;
}) => void;
/**
* <ul>
* <li>"none" to use aggrid defaults.</li>
* <li>"fit" will adjust columns to fit within panel via min/max/initial sizing.
* <b>Note:</b> This is only really needed if you have auto-height columns which prevents "auto" from working.
* </li>
* <li>"auto" will size columns based on their content but still obeying min/max sizing.</li>
* <li>"auto-skip-headers" (default) same as auto but does not take headers into account.</li>
* </ul>
*
* If you want to stretch to container width if width is greater than the container add a flex column.
*/
sizeColumns?: 'fit' | 'auto' | 'auto-skip-headers' | 'none';
/**
* When pressing tab whilst editing the grid will select and edit the next cell if available.
* Once the last cell to edit closes this callback is called.
*/
onCellEditingComplete?: () => void;
/**
* Context menu definition if required.
*/
contextMenu?: GridContextMenuComponent<any>;
/**
* Whether to select row on context menu.
*/
contextMenuSelectRow?: boolean;
/**
* Defaults to false.
*/
singleClickEdit?: boolean;
loading?: boolean;
suppressCellFocus?: boolean;
pinnedTopRowData?: GridOptions['pinnedTopRowData'];
pinnedBottomRowData?: GridOptions['pinnedBottomRowData'];
}
/**
* Wrapper for AgGrid to add commonly used functionality.
*/
export declare const Grid: <TData extends GridBaseRow = GridBaseRow>({ "data-testid": dataTestId, defaultPostSort, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, singleClickEdit, rowData, rowHeight, selectable, ...params }: GridProps<TData>) => ReactElement;