IpGrid

Super easy to use interface:

  <ip-grid (interface)="setGridInterface($event)" 
           (columnStateChange)="colStateChange($event)"></ip-grid>

The event passed during the interface event is a structure containing the interface to the grid:

  export interface IPGInterface{

    // add the columns that define the data, one column at a time or all at once
    addColumns(col: IPColumn | IPColumn[]): void; 
    // set styles on each column, columns identified by field name
    setColumnStyle(col: IPColumnStyle | IPColumnStyle[]): void;

    // Turn columns on and off using a built in columns dialog.
    showColumnsDlg(): void;         

    // Set the data for the grid. Columns defined by field 
    setData(data: any[]): void; 
    // After filtering, call resetData to ensure all rows reappear
    resetData(): void;
     // Add a single row of data 
    append( row: any): void;
    // Delete a row based on it's field's value
    delete( field: string, value: string): void;    

    // Set data temporarily to a subset 
    setSearchData(data: any[]): void;
    // Set data to a filtered state naming a field and value of the data i that field.
    searchRows( field: string, value: string): any[];
   
    // retrieve all selected rows
    getSelected(): any[];
    // set rows selected that have the value in the given field
    setSelected( field: string, value: string): void;
    // delete all selected rows
    deleteSelected(): void;

    // refresh display after changing styles
    refresh(): void;

    // Grouping - based on field
    // 1. Set a single group
    // 2. Add a sub group
    // 3. Remove a grouping
    // 4. End grouping all together
    group( field: string, action: "set" | "add" | "remove" | "end"): void;

    // Styling - set header height and font-size
    setHdrHeight(sz: string): void;
    setHdrFontsize(sz: string): void;

    // Set row height
    setRowHeight(sz:string): void;
    // Set font-size for rows
    setCellFontsize(sz: string): void;    

    // Set outside grid border. Standard css border syntax
    setRowBorderStyle(s:string):void;
    // Set column borders
    setColBorderStyle(s:string):void;

    // When grouping, set groups background color
    setGrpBG(s:string):void;
    // When grouping, set groups text color
    setGrpColor(s:string):void;

    // Set the column state based on a state received by the column state changed event.
    setColumnState(cs:IPColumnState): void;
}

Column definition for parsing, sorting and displaying data

export interface IPColumn {
    // text displayed in header
    text: string;
    // field mapped to data
    field: string;
    // 0 == no sort, 1 == ascending, 2 == descending
    sort: number; 
    sortType?: "string" | "number" | "custom" | "image";  
    
    // initial width of column
    width: number;
    // java script compare function for custom sorting
    comparator?: any;
    // hide this column
    hide?: boolean;
    // allow the moving of this column
    move?: boolean;
    // lock column position, only works on column one
    locked?: boolean;
    // allow the sizing of this column
    size?: boolean;
    // align data horizontally in column
    align?: "left" | "center" | "right";
  }

Ability to style individual columns

  export interface IPColumnStyle{
    field: string;
    wrap?: boolean;    
    padLeft?: string;
    padRight?: string;
    background?: string;
    color?: string;
    selBG?: string;
    selColor?: string;
    hdrBG?: string;
    hdrColor?: string;
    fontSize?: string;
    cellFontsize?: string;
  }

Event sent during the columnStateChanged event.

  export interface IPColumnState {
    grouping: boolean;
    columns: {
      field: string;
      width: number;
      sort: number;
      sortIndex: number;
      groupIndex: number;
    }[];
  }