Hertz AngularJS Table

This is a dynamic table that can be used for various purposes.

Note about bower.json

The file only exist because NPM 5.x.x have some kind of race-condition when trying to extract .tgz-files... >:(

When this is fixed, the packages in bower.json should be added into the package.json-file!

When the packages have moved into package.json then remove the bower.json-file!

Feature-list

• On/off-options for everything
  • Read about the options below
• Automatic frontend-pagination
  • Can be customized by your applications preferences!
• Custom statuses
• Uses Kendo's Grid to display, filter and sorting data
• Learn Markdown

Tips and trix

Optimization

If anything is slow when rendering, filtering, sorting, etc, etc, then you need to look in Kendo UI's API documentation to find out what you can do to make it snappier.

Options

Title

Default: Default title

Option: title

Type: string

Set the title you want.

Example

<hz-table hz-table-options="demo.tableOptions"></hz-table>

const demo = {};
demo.tableOptions = {
    title: 'My custom title'
};

Amount of results per page

Default: 10

Option: maxResultsPerPage

Type: number

Set how many rows you want to show per page.

Example

<hz-table hz-table-options="demo.tableOptions"></hz-table>

const demo = {};
demo.tableOptions = {
    maxResultsPerPage: 150
};

Selection(s)

There are both single-selection and multi-selection built-in.

Single-selection option

Default: false

Option: allowSelect

Type: boolean

Requirement: hzTableSelectFn as callback

Allow the user to select one row. The callback returns the data that exist on that row.

<hz-table hz-table-options="demo.tableOptions"
          hz-table-select-fn="selectFn"></hz-table>

const demo = {};
demo.tableOptions = {
    allowSelect: true
};
function selectFn(array, latestSelection) {
    // The controller need to handle the data returned by itself
    console.log('This is all of the selected data in the table:', array);
    console.log('This is the data from the latest selected row in the table:', latestSelection);
}

Multi-selection option

Default: false

Option: multiSelect

Type: boolean

Requirement: hzTableSelectFn as callback

Allow the user to select multiple rows. The callback returns the data that exist on the selected row. Important to know that the callback only sends back the current row, and not an array. You need to take care of that yourself!

<hz-table hz-table-options="demo.tableOptions"
          hz-table-select-fn="selectFn"></hz-table>

const demo = {};
demo.tableOptions = {
    allowSelect: true,  // Important to activate the selection-support!
    multiSelect: true
};
function selectFn(array, latestSelection) {
    // The controller need to handle the data returned by itself
    console.log('This is all of the selected data in the table:', array);
    console.log('This is the data from the latest selected row in the table:', latestSelection);
}

Headers

Default: {}

Requirement: Each header MUST follow Header-type, and the key MUST be named EXACTLY the same as the data that should be shown!

Set the headers that should be shown and toggle-able. The headers control exactly what is shown and not of the data that is sent to the directive.

Be aware that if the title of a header is an empty string (""), or null/undefined, then it won't be shown in the column-toggler menu.

If you have nested data then you'll need to tell the table about this with double underscores. See example below.

Header-type

title: The text that will be shown as the column's title. Defaults to uppercase from CSS. Accepts a string.

visible: Initial visibility-state. Accepts a boolean.

type: What kind the data is that will be shown in the column. Accepts a hzTableType (See more here)

order: Specifies which sort-order the header should be positioned in. If the same sort-order is used multiple times then the affected headers will be shown in the order that they have in the headers-object. Accepts an integer.

Example

<hz-table hz-table-options="demo.tableOptions"
          hz-table-data="demo.exampleData"></hz-table>

const headers = {
    key1: {title: 'Title 1', visible: true, type: hzTableTypes.string, order: 0},
    key2: {title: 'Title 2', visible: true, type: hzTableTypes.string, order: 11},
    key3: {title: 'Title 3', visible: false, type: hzTableTypes.string, order: 0}
};

const demo = {};
demo.tableOptions = {
    headers: headers
};
demo.exampleData = [
    {
        key1: 'This will be shown below the header with title "Title 1"',
        key2: 'This will be shown below the header with title "Title 2"',
        key3: 'This will be shown below the header with title "Title 3", however, it won\'t be visible at first since the header isn\'t visible from the start'
    }
];

Example with nested columns

<hz-table hz-table-options="demo.tableOptions"
          hz-table-data="demo.exampleData"></hz-table>

const headers = {
    key1: {title: 'Title 1', visible: true, type: hzTableTypes.string, order: 0},
    key2: {title: 'Title 2', visible: true, type: hzTableTypes.string, order: 11},
    sub__key3: {title: 'Title 3', visible: false, type: hzTableTypes.string, order: 0}
};

const demo = {};
demo.tableOptions = {
    headers: headers
};
demo.exampleData = [
    {
        key1: 'This will be shown below the header with title "Title 1"',
        key2: 'This will be shown below the header with title "Title 2"',
        sub: {
            key3: 'This will be shown below the header with title "Title 3", however, it won\'t be visible at first since the header isn\'t visible from the start'
        }
    }
];

Single column filtering

Default: false

Option: allowSingleColumnFilter

Type: boolean

Add the ability to filter per column.

Example

<hz-table hz-table-options="demo.tableOptions"></hz-table>

const demo = {};
demo.tableOptions = {
    allowSingleColumnFilter: true
};

Column sorting

Default: false

Option: sortable

Type: boolean

Add the ability to sort per column.

Example

<hz-table hz-table-options="demo.tableOptions"></hz-table>

const demo = {};
demo.tableOptions = {
    sortable: true
};

Export to Excel

You can choose to export to Excel with a default or customer filename on the Excel-file.

Export to Excel with default filename

Default: false

Option: excelExport

Type: boolean

Add the ability to export the visible data to Excel.

Example

<hz-table hz-table-options="demo.tableOptions"></hz-table>

const demo = {};
demo.tableOptions = {
    excelExport: true
};

Export to Excel with custom filename

Default: excel-export

Option: excelFilename

Type: string

Add the ability to export the visible data to Excel with a custom filename.

Example

<hz-table hz-table-options="demo.tableOptions"></hz-table>

const demo = {};
demo.tableOptions = {
    excelExport: true,  // Important to activate the Excel-export support!
    excelFilename: 'Custom filename'
};