Angular 7 Fix/Freeze Header Grid

It is a simple grid with all basic feature. It's header is fixed and body is scrollable. For hierarchical data (where there is a Parent-Child relationship), check out this Angular Tree Grid Package. If data needs to be grouped by fields then check out this ngtreegrid Package.

Demo

Click here for demo.

Donate :hearts:

Please consider a donation if it is useful to you.

Version

Choose the correct version for your application.

| Angular | angular-fix-header-grid | | ------------- | ----------------------- | | <= 8 | 1.0.4 | | >= 9 and < 12 | 1.1.1 | | >= 12 | 2.0.0 |

Installation

    npm i angular-fix-header-grid

Usage

Import

Import AngularFixHeaderGridModule Module in your application module.

import { AngularFixHeaderGridModule } from "angular-fix-header-grid";

Add it to your imports array.

    @NgModule({
        imports: [
        AngularFixHeaderGridModule
        ]
    })

Data

Format of the data should be like below.

  students: any[] = [
    {name: 'debabrata', age: 60, weight: 60, height: 5},
    {name: 'Omm', age: 60, weight: 60, height: 5},
    {name: 'mama', age: 60, weight: 60, height: 5},
    {name: 'tiki', age: 60, weight: 60, height: 5},
    {name: 'lipi', age: 60, weight: 60, height: 5},
    {name: 'sneha', age: 60, weight: 60, height: 5},
    {name: 'shriya', age: 60, weight: 60, height: 5}
  ];

Configs

Grid Configurations

| Field | Type | Default | Description | | ------------------- | -------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | data_loading_text | string | 'Loading...' | Loading place holder. This will be displayed when data is empty. | | filter | boolean | false | It enables filter toolbar. Filter is customizable at column level. | | multi_select | boolean | false | It enables checkbox selection. | | multi_select_width | string | 'auto' | Width of multi-select column. | | row_select_function | Function | n/a | Callback function for row Selection. Based on the return type(Boolean) of this function, Selection can be enabled/disabled for a specific row. | | row_class_function | Function | n/a | Callback function for row class. A custom class can be returned which will be added to the row. | | row_edit_function | Function | n/a | Callback function for edit feature. Based on the return type(Boolean) of this function, edit can be enabled/disabled for a specific row. See example for more information. | | row_delete_function | Function | n/a | Callback function for delete feature. Based on the return type(Boolean) of this function, delete can be enabled/disabled for a specific row. See example for more information. | | actions | Object | n/a | Settings for Action column. See Below | | css | Object | n/a | Css class for icons. See Below | | columns | Object | n/a | It is an Array. If not provided all keys of the data Array will be used as Column Headers. Please find the description below |

actions

| Field | Type | Default | Description | | -------------- | ------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | add | boolean | false | It enables add feature. | | edit | boolean | false | It enables edit feature. | | delete | boolean | false | It enables delete feature. | | resolve_add | boolean | false | Manually resolve add(after making call to server). It defaults to false. See example for more information. | | resolve_edit | boolean | false | Manually resolve edit. | | resolve_delete | boolean | false | Manually resolve delete feature. |

css

| Field | Type | Default | Description | | ------------------- | ------ | ------- | -------------------------------------------------------------- | | expand_class | string | plus | Icon class for Expand icon. Font Awesome class can be given. | | collapse_class | string | minus | Icon class for Collapse icon. Font Awesome class can be given. | | add_class | string | plus | Icon class for Add icon. Font Awesome class can be given. | | edit_class | string | edit | Icon class for Edit icon. Font Awesome class can be given. | | delete_class | string | delete | Icon class for Delete icon. Font Awesome class can be given. | | save_class | string | save | Icon class for Save icon. Font Awesome class can be given. | | cancel_class | string | cancel | Icon class for Cancel icon. Font Awesome class can be given. | | row_selection_class | string | n/a | CSS Class for selected row. | | header_class | string | n/a | CSS Class for header. |

columns

| Field | Type | Default | Description | | ----------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | name | string | n/a | key of the column. | | header | string | n/a | Header of the column that will be displayed in the table. | | width | string | n/a | Width of the column with unit(px/rem). | | hidden | boolean | false | Show/Hide column. | | filter | boolean | true | Enable/Disable filter. | | editable | boolean | false | To make a specific column editable. By default columns are not editable. edit option needs to be true at grid level. | | sortable | boolean | false | To make a specific column sortable. | | renderer | Function | n/a | It is a method to render customized value for the column. See this Example. | | type | string | '' | Set to 'custom' to have custom component for the column. Otherwise leave blank. | | component | Object | n/a | Custom View Component. Mandatory if type is custom.See this Example. | | editor | Object | n/a | Custom Editor Component. If given custom editor component will be used instead of default editor. See this Example. | | on_component_init | Function | n/a | Callback function for the column on component init. |

Basic Example

    configs: any = {
        height: '300px',
        filter: true,
        columns: [
        {
            name: 'name',
            header: 'Name',
            width: '100px'
        },
        {
            name: 'age',
            header: 'Age',
            renderer: function(value) {
            return value + ' years';
            }
        }]
    };

HTML

Add below node to your html.

  <db-angular-fix-header-grid [source]="source" [configs]="configs"></db-angular-fix-header-grid>

Events

| Event | Arguments | Description | | -------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------- | | expand | row_data: Expanded Row | Event fires when parent is expanded. | | collapse | row_data: Collapsed Row | Event fires when parent is collapsed. | | cellclick | event Consist of: row: Selected Row column: Selected Column | Event fires when a child cell is clicked. | | rowselect | event Consist of: data: Selected Row event: Event Object | Event fires when a row is selected. | | rowdeselect | event Consist of: data: Selected Row event: Event Object | Event fires when a row is deselected. | | rowselectall | event: Event Object | Event fires when select-all checkbox is checked. | | rowdeselectall | event: Event Object | Event fires when select-all checkbox is unchecked. | | rowsave | event Consist of: data: Selected Row event: Event Object | Event fires when a row is saved. | | rowdelete | event Consist of: data: Selected Row event: Event Object | Event fires when a row is deleted. | | rowadd | event Consist of: data: Selected Row event: Event Object | Event fires when a row is added. |

Can I hire you guys?

Yes. Please contact us at [email protected]. We will be happy to work with you!

License

This project is licensed under the MIT license.