Type Alias OverGridConfig

Type declaration

• OptionalaxiosConfigurator?: ((axios: any) => any)

  You can modify the axios instance before sending the request to the server. This function is called before the request is sent. You can modify the axios instance in order to your needs. If not set, the grid will use the default axios instance.

  • • (axios): any

    • Parameters

      • axios: any

        The default axios instance.

      Returns any

      The modified axios instance.

• OptionalbulkOperation?: {
      active: boolean;
      methods: {
          action: ((checkedRows: any[], clearRows: (() => void)) => void);
          key: string;
          title: string;
      }[];
  }

  • active: boolean

    If true, the column selector/bulk operation is active. If false, the column selector/bulk operation is disabled.

  • methods: {
        action: ((checkedRows: any[], clearRows: (() => void)) => void);
        key: string;
        title: string;
    }[]

    The bulk operation methods. You can define multiple methods here. Each method has a title, a key (must be unique) and an action function. The action function gets the checked rows and a function to clear the checked rows.

• OptionalcolumnSelector?: {
      active: boolean;
  }

  • active: boolean

    If true, the column selector is active. If false, the column selector is disabled.

• OptionaldefaultOrderDirection?: OrderDirection

  The default ordering direction. If not set, the grid will not be ordered by default.

• OptionaldefaultOrderKey?: string

  The default ordering key. If not set, the grid will not be ordered by default.

• endpoint: string

  The endpoint of the API

• Optionalevents?: {
      onBulkSelectChanges?: ((checkedRows: any[]) => void);
      onDataLoad?: ((data: any[]) => any[]);
      onDataLoadWithFullResponse?: ((response: AxiosResponse) => any[]);
      readyAfterRefresh?: (() => void);
  }

  • OptionalonBulkSelectChanges?: ((checkedRows: any[]) => void)

    The event is fired when the selected records on the current pages are changed. The function gets the selected rows.

    • • (checkedRows): void

      • Parameters

        • checkedRows: any[]

        Returns void

  • OptionalonDataLoad?: ((data: any[]) => any[])

    The event is fired when the grid is ready. The grid is ready when the first data load is finished.

    • • (data): any[]

      • Parameters

        • data: any[]

        Returns any[]

  • OptionalonDataLoadWithFullResponse?: ((response: AxiosResponse) => any[])

    • • (response): any[]

      • Parameters

        • response: AxiosResponse

        Returns any[]

  • OptionalreadyAfterRefresh?: (() => void)

    The event is fired when the grid is ready after a refresh. The grid is ready when the first data load is finished.

    • • (): void

      • Returns void

• OptionalextraRow?: {
      active: boolean;
      extraParams: object;
      multiOpen: boolean;
  }

  • active: boolean

    If true, the extra row is active. If false, the extra row is disabled.

  • extraParams: object

    Ths extraRow slot gets the full record object of the "parent". You can define extra fields here that you want to pass to the slot.

  • multiOpen: boolean

    Determines the user can open more than one extra row at the same time. If false, the user can open only one extra row at a time (close the other when open a new one).

• Optionalfiltering?: {
      active: boolean;
      allRecordsCountKey: string;
      local?: boolean;
      simple?: boolean;
      simpleFilterTemplate?: string;
      simpleHelpText?: string;
      simplePlaceholder?: string;
  }

  The filtering configuration object for the grid.

  • active: boolean

    If true, the filtering is active. If false, the filtering is disabled.

  • allRecordsCountKey: string

    Define the field that you use in the server's response to store the total number of records. This field is used for pagination. For example, if your server returns an object like this: { data: [{...}, {...}], count: 2 }, then the allRecordsCountKey is 'count'.

  • Optionallocal?: boolean

    If true, the filtering set to local mode. If false, the filtering is server-side. Please be aware that the local filtering is working only on the current page.

  • Optionalsimple?: boolean

    If true, the filtering is 'simple' mode. If false, the filtering is 'advanced' mode. In 'simple' mode, the grid will show an input field where the user can type the filter text. The server gets only this text as a filtering value. In 'advanced' mode, the grid will show a filter panel where the user can set multiple filters. The server gets all filters as an object and gets an operator between filters. The operator can be 'and' or 'or', and it is set in the filter panel.

  • OptionalsimpleFilterTemplate?: string

    If the filtering is 'simple' mode, you can set the filter template string. Use the {data} placeholder to insert the filter text. For example: 'name like "{data}", description like {data}'. This is useful when you have a filtering framework on server side, such as gridify (https://alirezanet.github.io/Gridify/guide/filtering.html#conditional-operators). If not set, the grid will send the filter text as is. FYI: You can modify the filtering parameters in the serverTransformation function as well.

  • OptionalsimpleHelpText?: string

    If the filtering is 'simple' mode, you can set a help text for the filtering. This text will be shown after the input field.

  • OptionalsimplePlaceholder?: string

    If the filtering is 'simple' mode, you can set the placeholder text for the input field.

• gridUniqueId: string

  The unique ID of the grid. This is used for the grid's internal operations. It should be unique for each grid in the same domain.

• OptionalhideAboutWindow?: boolean

  If true, the grid will show the about window. Otherwise the grid will not show the about window.

• idkey: string

  The field that you use as unique ID in records. This field is used internally for row selection, bulk operations and "extra row". For example, if your server returns an object like this: { data: [{ id: 1, name: 'Jane' }, { id: 2, name: 'Jack' }], count: 2 }, then the idKey is 'id'. Not set this field leads to unexpected behavior and bugs.

• Optionallocale?: PossibleLanguages | Record<string, string>

  The possible languages that the grid can use. If not set, the grid will use the default language, which is 'en'. Currently, the possible languages are 'en' and 'hu'. If you set the locale to an object, you can pass a custom locale to the grid. See the 'i18n' section for more information.

• mapping: Record<string, MappingRecordType>

  The columns configuration object for the grid. The key of the object is the field name in the server's response. The value is the configuration object for the column. See the MappingRecordType for more information.

• OptionalorderLocal?: boolean

  If true, the grid will order the records locally, in which case, the order will work only the current page. If false, the grid will pass order parameters to the server.

• pagination: {
      active: boolean;
      page: number;
      possiblePageSizes?: number[];
      size: number;
  }

  The pagination configuration object for the grid.

  • active: boolean

    If true, the pagination is active. If false, the pagination is disabled.

  • page: number

    The initial page number.

  • OptionalpossiblePageSizes?: number[]

    The possible page sizes that the user can select/change in settins menu. If not set, the grid will not show the page size selector.

  • size: number

    The initial page size.

• refreshable: {
      autoActive: boolean;
      autoCanBeDisabled: boolean;
      autoValues: {
          default?: boolean;
          key: string;
          refreshInterval: number;
          title: string;
      }[];
      manualActive: boolean;
  }

  • autoActive: boolean

    If true, the auto refresh is active in the grid's menu. If false, the auto refresh is disabled.

  • autoCanBeDisabled: boolean

    If true, the auto refresh can be disabled in the grid's menu by the user. If false, the auto refresh cannot be disabled.

  • autoValues: {
        default?: boolean;
        key: string;
        refreshInterval: number;
        title: string;
    }[]

    The auto refresh values. You can set multiple values here. Each value has a key (must be unique), a refresh interval in milliseconds and a title. The default value is the value that is selected by default in the grid's menu.

  • manualActive: boolean

    If true, the refresh button is active. If false, the refresh button is hidden.

• Optionalrootkey?: string

  The root key of the server's response object. For example, if your server returns an object like this: { data: [{...}, {...}], count: 2 }, then the root key is 'data'. If null, the root key is the root object itself.

• OptionalrowHighlighter?: {
      active: boolean;
      fn: ((record: any) => boolean);
  }

  • active: boolean

    Row highlighter: You can highlight any row in the grid (e.g. you can set a slightly darker background color). For example you can set background color based on a priority value in record. If true, the row highlighter is active. If false, the row highlighter is disabled.

  • fn: ((record: any) => boolean)

    Define the highlighter function. This function should return a boolean value. If the function returns true, the row will be highlighted.

    • • (record): boolean

      • Parameters

        • record: any

          The current record with all fields.

        Returns boolean

• OptionalserverTransformation?: ((ordering: Ordering, pagination: PaginationClass, filtering: FilteringClass) => URLSearchParams)

  You can modify the server request parameters before sending to the server. This function is called before the request is sent. You can modify the ordering, pagination and filtering parameters in order to your needs. If not set, the grid will send the parameters as is.

  • • (ordering, pagination, filtering): URLSearchParams

    • Parameters

      • ordering: Ordering

        The ordering object.
      • pagination: PaginationClass

        The pagination object.
      • filtering: FilteringClass

        The filtering object.

      Returns URLSearchParams

      The modified URLSearchParams object.

• Optionaltheme?: string

  Theme code for the OverGrid.

• OptionalxlsxExport?: {
      active: boolean;
      additionalExportFields?: {
          columnsFn?: Function;
      };
  }

  • active: boolean

    If true, the XLSX/CSV export is active. If false, the XLSX/CSV export is disabled.

  • OptionaladditionalExportFields?: {
        columnsFn?: Function;
    }

    TBD

    • OptionalcolumnsFn?: Function

      User-defined function to append additional fields for the export. The function gets the record object and should return an array.