Angular Data Grid: Grid Properties

statusBar: { statusPanels: StatusPanelDef[]; };

interface StatusPanelDef {
  statusPanel?: any;
  align?: string;
  key?: string;
  statusPanelParams?: any;
}

sideBar: SideBarDef | string | boolean | null;

interface SideBarDef {
  // A list of all the panels to place in the side bar. The panels will be displayed in the provided order from top to bottom. 
  toolPanels?: (ToolPanelDef | string)[];
  // The panel (identified by ID) to open by default. If none specified, the side bar is initially displayed closed. 
  defaultToolPanel?: string;
  // To hide the side bar by default, set this to `true`. If left undefined the side bar will be shown. 
  hiddenByDefault?: boolean;
  // Sets the side bar position relative to the grid. 
  position?: 'left' | 'right';
}

interface ToolPanelDef {
  // The unique ID for this panel. Used in the API and elsewhere to refer to the panel. 
  id: string;
  // The key used for localisation for displaying the label. The label is displayed in the tab button. 
  labelKey: string;
  // The default label if `labelKey` is missing or does not map to valid text through localisation. 
  labelDefault: string;
  // The min width of the tool panel. Default: `100` 
  minWidth?: number;
  // The max width of the tool panel. Default: `undefined` 
  maxWidth?: number;
  // The initial width of the tool panel. Default: `$side-bar-panel-width (theme variable)` 
  width?: number;
  // The key of the icon to be used as a graphical aid beside the label in the side bar. 
  iconKey: string;
  // The tool panel component to use as the panel.
  // The provided panels use components `agColumnsToolPanel` and `agFiltersToolPanel`.
  // To provide your own custom panel component, you reference it here. 
  toolPanel?: any;
  // Customise the parameters provided to the `toolPanel` component. 
  toolPanelParams?: any;
}

excelStyles: ExcelStyle[];

interface ExcelStyle {
  id: string;
  alignment?: ExcelAlignment;
  borders?: ExcelBorders;
  dataType?: ExcelDataType;
  font?: ExcelFont;
  interior?: ExcelInterior;
  numberFormat?: ExcelNumberFormat;
  protection?: ExcelProtection;
}

customChartThemes: { [name: string]: AgChartTheme };

interface AgChartTheme {
  // The name of the theme to base your theme on. Your custom theme will inherit all of the configuration from 
  // the base theme, allowing you to override just the settings you wish to change using the `overrides` config (see 
  // below). 
  baseTheme?: AgChartThemeName;
  // The palette to use. If specified, this replaces the palette from the base theme. 
  palette?: AgChartThemePalette;
  // Configuration from this object is merged over the defaults specified in the base theme. 
  overrides?: AgChartThemeOverrides;
}

interface AgChartThemePalette {
  // The array of fills to be used. 
  fills: string[];
  // The array of strokes to be used. 
  strokes: string[];
}

loadingCellRendererSelector = (
    params: ILoadingCellRendererParams
) => LoadingCellRendererSelectorResult | undefined;

interface ILoadingCellRendererParams {
  // Value to be rendered. 
  value: any;
  // Formatted value to be rendered. 
  valueFormatted: any;
  // True if this is a full width row. 
  fullWidth?: boolean;
  // Pinned state of the cell. 
  pinned?: string | null;
  // The row's data. 
  data: any;
  // The row node. 
  node: RowNode;
  // The current index of the row (this changes after filter and sort). 
  rowIndex: number;
  // The cell's column definition. 
  colDef?: ColDef;
  // The cell's column. 
  column?: Column;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context`. 
  context: any;
  // The grid's cell, a DOM div element. 
  eGridCell: HTMLElement;
  // The parent DOM item for the cell renderer, same as eGridCell unless using checkbox selection. 
  eParentOfValue: HTMLElement;
  // Convenience function to get most recent up to date value. 
  getValue?: () => any;
  // Convenience function to set the value. 
  setValue?: (value: any) => void;
  // Convenience function to format a value using the column's formatter. 
  formatValue?: (value: any) => any;
  // Convenience function to refresh the cell. 
  refreshCell?: () => void;
  // registerRowDragger:
  // @param rowDraggerElement The HTMLElement to be used as Row Dragger
  // @param dragStartPixels The amount of pixels required to start the drag (Default: 4)
  // @param value The value to be displayed while dragging. Note: Only relevant with Full Width Rows.
  // @param suppressVisibilityChange Set to `true` to prevent the Grid from hiding the Row Dragger when it is disabled.
  registerRowDragger: (rowDraggerElement: HTMLElement, dragStartPixels?: number, value?: string, suppressVisibilityChange?: boolean) => void;
  // AngularJS scope - null if not using AngularJS, this is legacy and not used if not 
  $scope: any;
}

interface LoadingCellRendererSelectorResult {
  // Equivalent of setting `loadingCellRenderer` 
  component?: any;
  // Equivalent of setting `loadingCellRendererParams` 
  params?: any;
}

localeTextFunc = (
    key: string,
    defaultValue: string,
    variableValues?: string[]
) => string;

aggFuncs: { [key: string]: IAggFunc; };

interface IAggFunc {
    (params: IAggFuncParams) : any
}

interface IAggFuncParams {
  // Values to aggregate 
  values: any[];
  // Column the aggregation function is working on 
  column: Column;
  // ColDef of the aggregation column 
  colDef: ColDef;
  // The parent RowNode, where the aggregation result will be shown 
  rowNode: RowNode;
  // data (if any) of the parent RowNode 
  data: any;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}

groupDisplayType: RowGroupingDisplayType;

type RowGroupingDisplayType = 
      'singleColumn' 
    | 'multipleColumns' 
    | 'groupRows' 
    | 'custom'

datasource: IDatasource;

interface IDatasource {
  // If you know up front how many rows are in the dataset, set it here. Otherwise leave blank. 
  rowCount?: number;
  // Callback the grid calls that you implement to fetch rows from the server. 
  getRows(params: IGetRowsParams): void;
  // Optional destroy method, if your datasource has state it needs to clean up. 
  destroy?(): void;
}

interface IGetRowsParams {
  // The first row index to get. 
  startRow: number;
  // The first row index to NOT get. 
  endRow: number;
  // Callback to call for the result when successful. 
  successCallback(rowsThisBlock: any[], lastRow?: number): void;
  // Callback to call when the request fails. 
  failCallback(): void;
  // If doing server side sorting, contains the sort model 
  sortModel: SortModelItem[];
  // If doing server side filtering, contains the filter model 
  filterModel: any;
  // The context as provided on `gridOptions.context` 
  context: any;
}

interface SortModelItem {
  // Column Id to apply the sort to. 
  colId: string;
  // Sort direction 
  sort: 'asc' | 'desc';
}

serverSideStoreType: ServerSideStoreType;

type ServerSideStoreType = 'full' | 'partial'

serverSideDatasource: IServerSideDatasource;

interface IServerSideDatasource {
  // Grid calls `getRows` when it requires more rows as specified in the params.
  // Params object contains callbacks for responding to the request. 
  getRows(params: IServerSideGetRowsParams): void;
  // Optional method, if your datasource has state it needs to clean up. 
  destroy?(): void;
}

interface IServerSideGetRowsParams {
  // Details for the request. A simple object that can be converted to JSON. 
  request: IServerSideGetRowsRequest;
  // The parent row node. The RootNode (level -1) if request is top level.
  // This is NOT part fo the request as it cannot be serialised to JSON (a rowNode has methods). 
  parentNode: RowNode;
  // Success callback, pass the rows back to the grid that were requested. 
  success(params: LoadSuccessParams): void;
  // Fail callback, tell the grid the call failed so it can adjust it's state. 
  fail(): void;
  api: GridApi;
  columnApi: ColumnApi;
}

interface IServerSideGetRowsRequest {
  // First row requested or undefined for all rows. 
  startRow: number | undefined;
  // Last row requested or undefined for all rows. 
  endRow: number | undefined;
  // Columns that are currently row grouped. 
  rowGroupCols: ColumnVO[];
  // Columns that have aggregations on them. 
  valueCols: ColumnVO[];
  // Columns that have pivot on them. 
  pivotCols: ColumnVO[];
  // Defines if pivot mode is on or off. 
  pivotMode: boolean;
  // What groups the user is viewing. 
  groupKeys: string[];
  // If filtering, what the filter model is. 
  filterModel: any;
  // If sorting, what the sort model is. 
  sortModel: SortModelItem[];
}

interface ColumnVO {
  id: string;
  displayName: string;
  field?: string;
  aggFunc?: string;
}

interface SortModelItem {
  // Column Id to apply the sort to. 
  colId: string;
  // Sort direction 
  sort: 'asc' | 'desc';
}

interface LoadSuccessParams {
  // Data retrieved from the server as requested by the grid. 
  rowData: any[];
  // The last row, if known, to help Infinite Scroll (i.e Partial Store) and Pagination. 
  rowCount?: number;
  // Any extra information for the grid to associate with this load. 
  storeInfo?: any;
}

viewportDatasource: IViewportDatasource;

interface IViewportDatasource {
  // Gets called exactly once before viewPort is used. Passes methods to be used to tell viewPort of data loads / changes. 
  init(params: IViewportDatasourceParams): void;
  // Tell the viewport what the scroll position of the grid is, so it knows what rows it has to get. 
  setViewportRange(firstRow: number, lastRow: number): void;
  // Gets called once when viewPort is no longer used. If you need to do any cleanup, do it here. 
  destroy?(): void;
}

interface IViewportDatasourceParams {
  // Datasource calls this method when the total row count changes. This in turn sets the height of the grids vertical scroll. 
  setRowCount: (count: number, keepRenderedRows?: boolean) => void;
  // Datasource calls this when new data arrives. The grid then updates the provided rows. The rows are mapped [rowIndex]=>rowData]. 
  setRowData: (rowData: { [key: number]: any; }) => void;
  // Datasource calls this when it wants a row node - typically used when it wants to update the row node. 
  getRow: (rowIndex: number) => RowNode;
}

rowStyle: RowStyle;

interface RowStyle {
  [cssProperty: string]: string | number;
}

rowClassRules: RowClassRules;

interface RowClassRules {
  [cssClassName: string]: (((params: RowClassParams) => boolean) | string);
}

interface RowClassParams {
  // The data associated with this row from rowData 
  data: any;
  // The RowNode associated with this row 
  node: RowNode;
  // The index of the row 
  rowIndex: number;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If using AngularJs, is the row's child scope, otherwise null 
  $scope: any;
}