datatable-adapter.interface.md

Title	Added	Status
DataTableAdapter interface	v2.0.0	Active

DataTableAdapter interface

Defines how table data is supplied to DataTable and Tasklist components.

Properties

Name	Type	Description
selectedRow	DataRow	The data for the currently selected row.

Events

Name	Type	Description
rowsChanged	Subject<Array<DataRow>>	Raised when data adapter gets new rows.

Methods

getRows(): Array<DataRow>;
setRows(rows: Array<DataRow>): void;
Get/set the values for display in the table using an array of rows.

getColumns(): Array<DataColumn>;
setColumns(columns: Array<DataColumn>): void;
Get/set an array of column specifications.

getValue(row:DataRow,col: DataColumn): any;
Get the data value from a specific table cell.

getSorting():DataSorting;
setSorting(sorting: DataSorting): void;
Get/set the sorting key, direction (ascending or descending) and options (eg. numeric).

sort(key?: string, direction?: string, options?: Intl.CollatorOptions): void;
Sort the table with a specified key, direction (ascending or descending) and options (eg. numeric).

Details

You can implement DataTableAdapter in your own class to display your data with the DataTable and Tasklist components. This interface (along with other interfaces for column and row data) hides the details of your class from the caller, so you can store your data internally however you like. The DataTable library implements the interface in the ObjectDataTableAdapter class which is the standard adapter for the Datatable component.

The basic idea of DataTableAdapter is that the caller can request your class to return an array of column definition objects. Each of these objects specifies the unique key, name, type and other properties of a single column.

The caller can also request the data values for the table as an array of row objects. The caller accesses the data from a row using a getValue method that returns the data from a specified column. This column is identified by the unique key that was set during the column definition.

The data-hiding works the other way around when the caller needs to set data in the DataTableAdapter class - the internal details of the caller's storage are hidden by the column and row interfaces. When the setColumns and setRows methods are called on the adapter, it can simply query the column/row objects it receives and then store the data in its own format.

Columns and rows

Columns are defined by the DataColumn interface:

interface DataColumn {
    key: string;
    type: string;
    format?: string;
    sortable?: boolean;
    title?: string;
    srTitle?: string;
    cssClass?: string;
    template?: TemplateRef<any>;
    formatTooltip?: Function;
    focus?: boolean;
}

An array of these objects is passed to your object when the setColumns method is called. The key property is used to identify columns and so each column's key should be unique. The type string can have a value of 'text', 'image' or 'date'.

An array of DataRow objects is passed to your object when the setRows method is called:

interface DataRow {
    isSelected: boolean;
    isDropTarget?: boolean;
    cssClass?: string;
    hasValue(key: string): boolean;
    getValue(key: string): any;
}

Each row contains a set of values. An item in the set is retrieved by passing its key (specified in the column description) to the getValue method. As a result, the row does not need to store its data items in any particular order or format as long as it can retrieve the right item using its key.

ObjectDataTableAdapter

The DataTable library provides a implementation of DataTableAdapter, called ObjectDataTableAdapter. This is a simple adapter that binds to object arrays and turns object fields into columns:

let data = new ObjectDataTableAdapter(
    // Row data
    [
        { id: 1, name: 'Name 1' },
        { id: 2, name: 'Name 2' }
    ],
    // Column schema
    [
        { 
            type: 'text', 
            key: 'id', 
            title: 'Id', 
            sortable: true 
        },
        {
            type: 'text', 
            key: 'name', 
            title: 'Name', 
            sortable: true
        }
    ]
);

If you don't specify the column array then the constructor will infer the layout of the columns from the structure of the row objects. The field names ('id' and 'name' in the example below) will be used for both the key and title properties of the columns:

let data =  [
    { id: 2, name: 'abs' },
    { id: 1, name: 'xyz' }
];

let schema = ObjectDataTableAdapter.generateSchema(data);

/*Auto generated column schema:
[
    { 
        type: 'text', 
        key: 'id', 
        title: 'Id', 
        sortable: false 
    },
    {
        type: 'text', 
        key: 'name', 
        title: 'Name', 
        sortable: false
    }
] 
*/

See also

• Datatable component
• Task list component