Title	tabular
Selector	<sb-grid>
Use Case	To represent data in tabular format to read data easily. To make it more effective it is important to have filters for them that will help them filter out the data that they want to focus on.
Description	See filters at the table level. These are grid-level filters but are also shown as columns in the table.If no filters are applied, then the whole data will be shown, it should support sorting and pagination.

To support the filters on the grid, enhancing the existing reportConfig with the filters and gridFilters has added.

gridFilters : Using this we can achieve column level filters and sorting for the grid.

filters : Using this we can apply table level filters

{
  "reportconfig": {
    "label": "Tabluar report",
    "table": [
      {
        "id": "",
        "name": "",
        "valuesExpr": "",
        "columnsExpr": "",
        "downloadUrl": "",
        "gridFilters": [
          {
            "reference": "User District",
            "controlType": "agSetColumnFilter",
            "sort": "asc",
            "displayName": "Select User District"
          }
        ]
        "filters": [
          {
            "reference": "User District",
            "controlType": "multi-select",
            "displayName": "Select User District"
          }
        ]
      }
    ]
  }
}

Ag grid Support the following filters options:

“agNumberColumnFilter | agSetColumnFilter | agDateColumnFilter “ by default it supports text filter

Filters Config

Additional sort option has been added filter config to support sort the grid based on the order, possible options are asc or desc


interface IFilterConfig {
    reference: string;
    label: string;
    placeholder: string;
    controlType: "single-select" | "multi-select" | "date";
    searchable?: boolean;
    filters: IFilterConfig[];
    default?: string;
    sort:string; 
}

Implemenation Approach

Tabular Component Structure

Selector - sb-grid

Description - This is the main component will exposes certain Input properties to enable table view with filter options

Attributes -

Property	Description

Property	Description
config	config JSON as per the above report config mentioned
data	passes JSON data
id <optional>	unique id. If not passed a uuid is assigned by the component

<sb-grid [config]="config" [data]="data" id="id" >

</sb-grid>

sample grid reference

Sunbird Design

Tabular Design Doc

Filters Config

Implemenation Approach

Tabular Component Structure