Expand All

  Getting Started



  Row Models





Github stars make projects look great. Please help, donate a star, it's free.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Date Component

You can create your own date components, and ag-Grid will use them every time it needs to ask user for a date value. The date components so far are used in ag-Grid in:

  1. On the rich date filter
  2. On the floating date filter

By default the grid will use the browser provided date picker for Chrome (as we think it's nice), but for all other browser it will just provide a simple text field. You can provide your chosen date picker to ag-Grid. This is done by providing a custom Date Component via the grid property dateComponent as follows:

gridOptions: {
    // Here is where we specify the component to be used as the date picket widget
    dateComponent: MyDateEditor

The interface for dateComponent is similar to that of a cellRenderer and is as follows:

interface IFilterComp {

    // mandatory methods

    // The init(params) method is called on the filter once. See below for details on the parameters.
    init(params: IFilterParams): void;

    // Returns the GUI for this filter. The GUI can be a) a string of html or b) a DOM element or node.
    getGui(): any;

    // This is used to show the filter icon in the header. If true, the filter icon will be shown.
    isFilterActive(): boolean;

    // The grid will ask each active filter, in turn, whether each row in the grid passes. If any
    // filter fails, then the row will be excluded from the final set. The method is provided a
    // params object with attributes node (the rodNode the grid creates that wraps the data) and data
    // (the data object that you provided to the grid for that row).
    doesFilterPass(params: IDoesFilterPassParams): boolean;

    // Gets the filter state for storing
    getModel(): any;

    // Restores the filter state.
    setModel(model: any): void;

    // optional methods

    // Gets called every time the popup is shown, after the gui returned in getGui is attached to the DOM.
    // If the filter popup is closed and reopened, this method is called each time the filter is shown.
    // This is useful for any logic that requires attachment before executing, such as putting focus on a particular DOM
    // element. The params has one callback method 'hidePopup', which you can call at any later
    // point to hide the popup - good if you have an 'Apply' button and you want to hide the popup
    // after it is pressed.
    afterGuiAttached?(params?: {hidePopup?: Function}): void;

    // Gets called when new rows are inserted into the grid. If the filter needs to change it's state
    // after rows are loaded, it can do it here.
    onNewRowsLoaded?(): void;

    // Gets called when the component is destroyed.
    destroy?(): void;


The method init(params) takes a params object with the items listed below. If the user provides params via the colDef.filterParams attribute, these will be additionally added to the params object, overriding items of the same name if a name clash exists.

interface IFilterParams {

    // The column this filter is for
    column: Column;

    // The column definition for the column
    colDef: ColDef;

    // The row model, helpful for looking up data values if needed.
    // If the filter needs to know which rows are a) in the table b) currently
    // visible (ie not already filtered), c) what groups d) what order - all of this
    // can be read from the rowModel.
    rowModel: IRowModel;

    // A function callback, to be called, when the filter changes,
    // to inform the grid to filter the data. The grid will respond by filtering the data.
    filterChangedCallback: ()=> void;

    // A function callback, to be optionally called, when the filter changes,
    // but before 'Apply' is pressed. The grid does nothing except call
    // gridOptions.filterModified(). This is useful if you are making use of
    // an 'Apply' button and want to inform the user the filters are not
    // longer in sync with the data (until you press 'Apply').
    filterModifiedCallback: ()=> void;

    // A function callback, call with a node to be given the value for that
    // filters column for that node. The callback takes care of selecting the right colDef
    // and deciding whether to use valueGetter or field etc. This is useful in, for example,
    // creating an Excel style filer, where the filter needs to lookup available values to
    // allow the user to select from.
    valueGetter: (rowNode: RowNode) => any;

    // A function callback, call with a node to be told whether
    // the node passes all filters except the current filter. This is useful if you want
    // to only present to the user values that this filter can filter given the status
    // of the other filters. The set filter uses this to remove from the list, items that
    // are no longer available due to the state of other filters (like Excel type filtering). 
    doesRowPassOtherFilter: (rowNode: RowNode) => boolean;

    // The context for this grid. See section on Context
    context: any;

    // If the grid options angularCompileFilters is set to true, then a new child
    // scope is created for each column filter and provided here. Just ignore this if
    // you are not using Angular 1
    $scope: any;


The method doesFilterPass(params) takes the following as a parameter:

interface IDoesFilterPassParams {

    // The row node in question
    node: RowNode;

    // The data part of the row node in question
    data: any

Custom Date Example

The example below shows how to register a custom date component, and then how that component is automatically used in the date column for both the rich filter and the floating filter.