### Install Dependencies for Development Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/introduction/installing.md Install project dependencies required for local development and running demos. This is typically done before starting the development server. ```bash npm i ``` -------------------------------- ### Development Server Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/README.md Run 'yarn start' to serve the demo application at http://localhost:4200/. The app will automatically reload upon changes to source files. ```bash yarn start ``` -------------------------------- ### Start Development Server Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/introduction/installing.md Start the local development server to run the ngx-datatable demos. Access the demos by browsing to the specified localhost URL. ```bash npm start ``` -------------------------------- ### Install ngx-datatable Source: https://github.com/swimlane/ngx-datatable/blob/master/README.md Install the ngx-datatable package using npm. This command saves the package as a dependency in your project. ```bash npm i @swimlane/ngx-datatable --save ``` -------------------------------- ### Row Detail Template Example Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/detail/inputs.md Defines the template to be used for displaying detailed information in a row. The `let-row="row"` syntax makes the row data available within the template. ```html
Address
{{row.address.city}}, {{row.address.state}}
 ``` -------------------------------- ### Custom Sort Comparator Example Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/column/inputs.md Implement a custom sort comparator function to define specific sorting logic for a column. The function receives values, rows, and sort direction, returning -1, 0, or 1. ```javascript (valueA, valueB, rowA, rowB, sortDirection) => -1|0|1 ``` -------------------------------- ### Publishing the Project Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/README.md Execute 'yarn publish' to publish the project. This command is typically used after building and packaging the project during a release. ```bash yarn publish ``` -------------------------------- ### Package ngx-datatable Source: https://github.com/swimlane/ngx-datatable/blob/master/README.md Build the package for release. This command is part of the release process to prepare the library for publishing. ```bash yarn package ``` -------------------------------- ### Build ngx-datatable Source: https://github.com/swimlane/ngx-datatable/blob/master/README.md Build the project artifacts, which will be stored in the dist/ directory. This command is used for development and deployment. ```bash yarn build ``` -------------------------------- ### Run Tests for ngx-datatable Source: https://github.com/swimlane/ngx-datatable/blob/master/README.md Execute the linter, prettier check, unit, and end-to-end tests. This command ensures code quality and functionality. ```bash yarn test ``` -------------------------------- ### Server-Side DimensionsHelper Implementation Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/universal/server-side-rendering.md Provides dimensions for the grid based on client hints from request cookies, falling back to default values if hints are not available. This service is essential for rendering grids correctly on the server. ```typescript import { ScrollbarHelper } from '@swimlane/ngx-datatable'; import { Injectable, Inject } from '@angular/core'; import { Request } from 'express'; import { REQUEST } from '@nguniversal/express-engine/tokens'; import { DimensionsHelper } from '@swimlane/ngx-datatable'; @Injectable() export class ServerDimensionsHelper extends DimensionsHelper { constructor(@Inject(REQUEST) private request: Request) { super(); } getDimensions(element: Element): ClientRect { const width = parseInt(this.request.cookies['CH-DW'], 10) || 1000; const height = parseInt(this.request.cookies['CH-DH'], 10) || 800; const adjustedWidth = width; const adjustedHeight = height; return { height: adjustedHeight, bottom: 0, top: 0, width: adjustedWidth, left: 0, right: 0 }; } } ``` -------------------------------- ### `virtualization` Input Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/inputs.md Controls whether virtual scrolling is enabled for the data table. When enabled, only the rows currently visible in the viewport are rendered, improving performance for large datasets. ```APIDOC ## `virtualization` Input ### Description Use virtual scrolling for improved performance with large datasets. ### Default Value `true` ### Usage Set to `true` to enable virtual scrolling, or `false` to disable it. ``` -------------------------------- ### activate Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/outputs.md Emitted when a cell or row is focused via keyboard or mouse click. It provides details about the interaction event, the row, column, value, and the DOM elements involved. ```APIDOC ## activate ### Description A cell or row was focused via keyboard or mouse click. ### Event Payload ```json { "type": "keydown" | "click" | "dblclick", "event": "any", "row": "any", "column": "any", "value": "any", "cellElement": "HTMLElement", "rowElement": "HTMLElement" } ``` ``` -------------------------------- ### cssClasses Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/inputs.md Allows customization of CSS classes for icons used in sorting and pagination. ```APIDOC ## `cssClasses` ### Description Custom CSS classes that can be defined to override the icons classes for up/down in sorts and previous/next in the pager. ### Parameters #### Query Parameters - **cssClasses** (Object) - Optional - An object containing custom CSS class names for various table elements. - **sortAscending** (string) - Optional - CSS class for ascending sort icon. - **sortDescending** (string) - Optional - CSS class for descending sort icon. - **pagerLeftArrow** (string) - Optional - CSS class for the left pager arrow. - **pagerRightArrow** (string) - Optional - CSS class for the right pager arrow. - **pagerPrevious** (string) - Optional - CSS class for the previous pager button. - **pagerNext** (string) - Optional - CSS class for the next pager button. ``` -------------------------------- ### columnMode Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/inputs.md Specifies the method used for setting column widths. It can be 'standard', 'flex', or 'force'. ```APIDOC ## `columnMode` ### Description Method used for setting column widths. ### Parameters #### Query Parameters - **columnMode** (string) - Required - The column width distribution mode. Possible values: `standard`, `flex`, `force`. ``` -------------------------------- ### CSS Icon Mapping Source: https://github.com/swimlane/ngx-datatable/blob/master/src/assets/icons-reference.html Lists CSS classes for directly applying icons. Each icon has a base class and a specific class for its representation. ```html ``` -------------------------------- ### page Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/outputs.md Emitted when the table is paginated, either through the pager interface or by scrolling the body. It includes information about the total count, page size, limit, and offset. ```APIDOC ## page ### Description The table was paged either triggered by the pager or the body scroll. ### Event Payload ```json { "count": "number", "pageSize": "number", "limit": "number", "offset": "number" } ``` ``` -------------------------------- ### expandAllRows() Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/detail/methods.md Expands all row details. This method is useful for showing all details at once when using row detail templates. ```APIDOC ## expandAllRows() ### Description Expand all row details when using row detail templates. ### Method `expandAllRows()` ### Endpoint N/A (Method call within the component/service) ### Parameters None ### Request Example ```javascript this.table.expandAllRows(); ``` ### Response N/A (Method modifies component state) ``` -------------------------------- ### columns Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/inputs.md Defines the array of columns to be displayed in the table. ```APIDOC ## `columns` ### Description Array of columns to display in the table. ### Parameters #### Query Parameters - **columns** (Array) - Required - An array of column definitions. ``` -------------------------------- ### resize Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/outputs.md Emitted when a column is resized. It includes the column that was resized and its new width value. ```APIDOC ## resize ### Description Column was resized. ### Event Payload ```json { "column": "any", "newValue": "any" } ``` ``` -------------------------------- ### Column Configuration Options Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/column/inputs.md This section outlines the available properties for configuring individual columns in the ngx-datatable. These options control aspects like labeling, data binding, resizing, sorting, dragging, and custom templating. ```APIDOC ## Column Options ### `name`: `string` Column label. If none specified, it will use the prop value and decamelize it. ### `prop`: `string` The property to bind the row values to. If `undefined`, it will camelcase the name value. ### `flexGrow`: `number` The grow factor relative to other columns. Same as the [flex-grow API](https://www.w3.org/TR/css3-flexbox/). It will any available extra width and distribute it proportionally according to all columns' flexGrow values. Default value: `0` ### `minWidth`: `number` Minimum width of the column in pixels. Default value: `100` ### `maxWidth`: `number` Maximum width of the column in pixels. Default value: `undefined` ### `width`: `number` The width of the column by default in pixels. Default value: `150` ### `resizeable`: `boolean` The column can be resized manually by the user. Default value: `true` ### `comparator` Custom sort comparator, used to apply custom sorting via client-side. Function receives five parameters, namely values and rows of items to be sorted as well as direction of the sort ('asc'|'desc'): ```javascript (valueA, valueB, rowA, rowB, sortDirection) => -1|0|1 ``` NOTE: Compare can be a standard JS comparison function (a,b) => -1|0|1 as additional parameters are silently ignored. See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) for more info. ### `sortable`: `boolean` Sorting of the row values by this column. Default value: `true` ### `draggable`: `boolean` The column can be dragged to re-order. Default value: `true` ### `canAutoResize`: `boolean` Whether the column can automatically resize to fill extra space. Default value: `true` ### `cellTemplate`: `TemplateRef` Angular TemplateRef allowing you to author custom body cell templates ### `headerTemplate`: `TemplateRef` Angular TemplateRef allowing you to author custom header cell templates ### `checkboxable`: `boolean` Indicates whether the column should show a checkbox component for selection. Only applicable when the selection mode is `checkbox`. ### `headerCheckboxable`: `boolean` Indicates whether the column should show a checkbox component in the header cell. Only applicable when the selection mode is `checkbox`. ### `headerClass`: `string|Function` Header CSS classes to apply to the header cell ### `cellClass`: `string|Function` Cell classes to apply to the body cell ### `frozenLeft`: `boolean` Determines if the column is frozen to the left. Default value: `false` ### `frozenRight`: `boolean` Determines if the column is frozen to the right. Default value: `false` ### `pipe`: `PipeTransform` Custom pipe transforms. Default value: `undefined` ``` -------------------------------- ### Activate Event Data Structure Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/outputs.md Emitted when a cell or row is focused via keyboard or mouse click. Contains details about the event, row, column, and related elements. ```typescript { type: 'keydown'|'click'|'dblclick' event row column value cellElement rowElement } ``` -------------------------------- ### Include Material Theme and Icons Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/introduction/themes.md Add these SCSS imports to your application's SCSS file to enable the Material theme and icons for ngx-datatable. Apply the 'material' class to your ngx-datatable component in the HTML. ```scss @use '~@swimlane/ngx-datatable/index.css'; @use '~@swimlane/ngx-datatable/themes/material.scss'; @use '~@swimlane/ngx-datatable/assets/icons.css'; ``` -------------------------------- ### tableContextmenu Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/outputs.md Emitted when the context menu is invoked on the table. It includes the event object, the type of invocation, and any associated content. ```APIDOC ## tableContextmenu ### Description The context menu was invoked on the table. ### Event Payload ```json { "event": "any", "type": "string", "content": "any" } ``` ``` -------------------------------- ### `sorts` Input Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/inputs.md The `sorts` input accepts an ordered array of objects used for column sorting. Each object specifies the column property (`prop`) and the sorting direction (`dir`). The default value is an empty array. ```APIDOC ## `sorts` Input ### Description Ordered array of objects used to determine sorting by column. Objects contain the column name, `prop`, and sorting direction, `dir`. ### Default Value `[]` ### Example ```javascript [ { prop: 'name', dir: 'desc' }, { prop: 'age', dir: 'asc' } ]; ``` ``` -------------------------------- ### Table Contextmenu Event Data Structure Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/outputs.md Emitted when the context menu is invoked on the table. Contains event details, type, and content. ```typescript { event, type, content } ``` -------------------------------- ### headerHeight Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/inputs.md Sets the height of the table header in pixels. A falsy value hides the header. ```APIDOC ## `headerHeight` ### Description The height of the header in pixels. ### Parameters #### Query Parameters - **headerHeight** (number | false) - Optional - The height of the header in pixels. Pass a falsy value for no header. Defaults to `30`. ``` -------------------------------- ### Server-Side ScrollbarHelper Implementation Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/universal/server-side-rendering.md Returns a fixed scrollbar width, as scrollbars are not present on the server. This implementation bypasses the need for DOM interaction to determine scrollbar size. ```typescript import { ScrollbarHelper } from '@swimlane/ngx-datatable'; import { Injectable, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/common'; @Injectable() export class ServerScrollBarHelper extends ScrollbarHelper { width: number; constructor(@Inject(DOCUMENT) document) { super(document); this.width = 16; // use default value } getWidth(): number { return this.width; } } ``` -------------------------------- ### externalPaging Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/inputs.md Enables or disables external paging. When true, paging is handled externally. ```APIDOC ## `externalPaging` ### Description Use external paging instead of client-side paging. ### Parameters #### Query Parameters - **externalPaging** (boolean) - Optional - Set to `true` to enable external paging. Defaults to `false`. ``` -------------------------------- ### select Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/outputs.md Emitted when a cell or row is selected. It returns the selection object, which contains the selected items. ```APIDOC ## select ### Description A cell or row was selected. ### Event Payload ```json { "selected": "any" } ``` ``` -------------------------------- ### ngx-datatable Inputs Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/inputs.md This section details the various inputs available for the ngx-datatable component, allowing for customization of its behavior and appearance. ```APIDOC ## `limit` Page size to show. Default value: `undefined` ## `loadingIndicator` Show the linear loading bar. Default value: `false` ## `offset` Current offset ( page - 1 ) shown. Default value: `0` ## `reorderable` Column re-ordering enabled/disabled. Default value: `true` ## `swapColumns` Swap columns on re-order columns or move them. Default value: `true` ## `rowHeight`: `Function|number|undefined` The height of the row. When virtual scrolling is not in use, you can pass `undefined` for fluid heights. If using virtual scrolling, you must pass a function or a number to calculate the heights. Using a function, you can set the height of individual rows: ``` (row) => { // set default if (!row) return 50; // return my height return row.height; } ``` ## `rowIdentity` Function for uniquely identifying a row, used to track and compare when displaying and selecting rows. Example: ``` (row) => { return row.guid; } ``` ## `rows` Array of rows to display. ## `scrollbarH` Use horizontal scrollbar. Default value: `false` ## `scrollbarV` Use vertical scrollbar for fixed height vs fluid. This is necessary for virtual scrolling. Default value: `false` ## `selectCheck` A boolean or function you can use to check whether you want to select a particular row based on a criteria. Example: ``` (row, column, value) => { return value !== 'Ethel Price'; } ``` ## `displayCheck` Function to determine whether to show a checkbox for a row. Example: ``` (row, column, value) => { return row.name !== 'Ethel Price'; } ``` ``` -------------------------------- ### Resize Event Data Structure Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/outputs.md Emitted when a column is resized. Includes the column and its new value. ```typescript { column newValue } ``` -------------------------------- ### footerHeight Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/inputs.md Sets the height of the table footer in pixels. A falsy value hides the footer. ```APIDOC ## `footerHeight` ### Description The height of the footer in pixels. ### Parameters #### Query Parameters - **footerHeight** (number | false) - Optional - The height of the footer in pixels. Pass a `falsey` value for no footer. Defaults to `0`. ``` -------------------------------- ### toggleExpandRow(row) Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/detail/methods.md Toggles the expansion state of a specific row. If the row detail is expanded, it will be collapsed, and vice versa. ```APIDOC ## toggleExpandRow(row) ### Description Toggle expand/collapse a row detail when using row detail templates. ### Method `toggleExpandRow(row)` ### Endpoint N/A (Method call within the component/service) ### Parameters #### Path Parameters - **row** (object) - Required - The row object whose detail expansion state needs to be toggled. ### Request Example ```javascript const rowToToggle = this.rows[0]; // Assuming 'rows' is an array of your data this.table.toggleExpandRow(rowToToggle); ``` ### Response N/A (Method modifies component state) ``` -------------------------------- ### Import NgxDatatableModule Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/introduction/getting-started.md Import the NgxDatatableModule into your application's root or feature module to enable the datatable component. ```javascript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [NgxDatatableModule, BrowserModule], bootstrap: [AppComponent] }) export class AppModule {} ``` -------------------------------- ### Page Event Data Structure Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/outputs.md Emitted when the table is paged, either by the pager or body scroll. Includes information about the total count, page size, limit, and offset. ```typescript { count pageSize limit offset } ``` -------------------------------- ### toggle Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/detail/outputs.md Emitted when a row detail row is toggled. It provides information about the type of toggle and its value. ```APIDOC ## toggle ### Description Emitted when a row detail row is toggled. It provides information about the type of toggle and its value. ### Method EventEmitter ### Output ``` { type: 'all' || 'row', value: boolean || row object } ``` ``` -------------------------------- ### JavaScript Event Listener for Icon Inputs Source: https://github.com/swimlane/ngx-datatable/blob/master/src/assets/icons-reference.html Attaches a click event listener to all elements with the class 'glyphs'. When an input element within these glyphs is clicked, its text content is selected. ```javascript (function () { var glyphs, i, len, ref; ref = document.getElementsByClassName('glyphs'); for (i = 0, len = ref.length; i < len; i++) { glyphs = ref[i]; glyphs.addEventListener('click', function (event) { if (event.target.tagName === 'INPUT') { return event.target.select(); } }); } }.call(this)); ``` -------------------------------- ### reorder Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/outputs.md Emitted when columns are re-ordered by the user. It provides the reordered column, its new value, and its previous value. ```APIDOC ## reorder ### Description Columns were re-ordered. ### Event Payload ```json { "column": "any", "newValue": "any", "prevValue": "any" } ``` ``` -------------------------------- ### Select Event Data Structure Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/outputs.md Emitted when a cell or row is selected. Contains the selection state. ```typescript { selected } ``` -------------------------------- ### Configure Ngx-Datatable Component Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/introduction/getting-started.md Define the rows and columns for your ngx-datatable in your component's TypeScript file. This sets up the data source and structure for the table. ```javascript import { Component } from '@angular/core'; @Component({ selector: 'app', template: `
` }) export class AppComponent { rows = [ { name: 'Austin', gender: 'Male', company: 'Swimlane' }, { name: 'Dany', gender: 'Male', company: 'KFC' }, { name: 'Molly', gender: 'Female', company: 'Burger King' } ]; columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }]; } ``` -------------------------------- ### Ghost Loader Row Rendering Source: https://github.com/swimlane/ngx-datatable/blob/master/projects/swimlane/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.html Renders placeholder rows for the datatable. It iterates over a ghostRows function to create the visual structure of empty rows. ```html @for (item of ghostRows(); track item) { @for (col of columns(); track col) { @if (!col.ghostCellTemplate) { } @else { } } } ``` -------------------------------- ### Table Messages for Localization Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/inputs.md Customize static messages displayed in the table for internationalization. This includes messages for empty data states, footer totals, and selection counts. ```typescript { // Message to show when array is presented // but contains no values emptyMessage: 'No data to display', // Footer total message totalMessage: 'total', // Footer selected message selectedMessage: 'selected', // Pager screen reader message for the first page button ariaFirstPageMessage: 'go to first page', // Pager screen reader message for the previous page button ariaPreviousPageMessage: 'go to previous page', // Pager screen reader message for the n-th page button. // It will be rendered as: `{{ariaPageNMessage}} {{n}}`. ariaPageNMessage: 'page', // Pager screen reader message for the next page button ariaNextPageMessage: 'go to next page', // Pager screen reader message for the last page button ariaLastPageMessage: 'go to last page' } ``` -------------------------------- ### externalSorting Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/inputs.md Enables or disables external sorting. When true, sorting is handled externally. ```APIDOC ## `externalSorting` ### Description Use external sorting instead of client-side sorting. ### Parameters #### Query Parameters - **externalSorting** (boolean) - Optional - Set to `true` to enable external sorting. Defaults to `false`. ``` -------------------------------- ### collapseAllRows() Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/detail/methods.md Collapses all currently expanded row details. This is useful for resetting the view when using row detail templates. ```APIDOC ## collapseAllRows() ### Description Collapse all row details when using row detail templates. ### Method `collapseAllRows()` ### Endpoint N/A (Method call within the component/service) ### Parameters None ### Request Example ```javascript this.table.collapseAllRows(); ``` ### Response N/A (Method modifies component state) ``` -------------------------------- ### `selected` Input Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/inputs.md The `selected` input represents a list of row objects that should be marked as selected within the grid. Object equality is used for comparison, and a custom `selectCheck` function can be provided for alternative comparison logic. The default value is an empty array. ```APIDOC ## `selected` Input ### Description List of row objects that should be represented as selected in the grid. Rows are compared using object equality. For custom comparisons, use the `selectCheck` function. ### Default Value `[]` ``` -------------------------------- ### NgModule Providers for Server-Side Rendering Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/universal/server-side-rendering.md Configures the Angular module to use the custom server-side implementations of ScrollbarHelper and DimensionsHelper. This ensures ngx-datatable functions correctly in a server-side rendering environment. ```typescript providers: [ { provide: ScrollbarHelper, useClass: ServerScrollBarHelper }, { provide: DimensionsHelper, useClass: ServerDimensionsHelper } ]; ``` -------------------------------- ### sort Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/outputs.md Emitted when column sorting is invoked. It includes the current sorts, the column being sorted, and its previous and new sort values. ```APIDOC ## sort ### Description Column sort was invoked. ### Event Payload ```json { "sorts": "any", "column": "any", "prevValue": "any", "newValue": "any" } ``` ``` -------------------------------- ### `rowClass` Input Source: https://github.com/swimlane/ngx-datatable/blob/master/docs/api/table/inputs.md A function that allows you to dynamically apply CSS classes to rows based on their data. This enables custom styling for different row states or conditions. ```APIDOC ## `rowClass` Input ### Description Function used to populate a row's CSS classes. The function will take a row and return a string or object. ### Method Signature `(row: any) => string | object` ### Example ```javascript (row) => { return { 'old': row.age > 50, 'young': row.age <= 50, 'woman': row.gender === 'female', 'man': row.gender === 'male' } } ``` ```