ngx-datatable

https://swimlane.gitbook.io/ngx-datatable
Admin
ngx-datatable is a flexible and lightweight Angular component for presenting large and complex data...
Tokens:42,442
Snippets:82
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Run ngx-datatable Demos Locally

Source: https://swimlane.gitbook.io/ngx-datatable/readme/installing

Commands to set up and run the ngx-datatable demos locally. This involves installing dependencies, starting the development server, and accessing the demos via a browser.

```bash
npm i
npm start
# Browse to http://localhost:9999
```

--------------------------------

### Install ngx-datatable via NPM

Source: https://swimlane.gitbook.io/ngx-datatable/readme/installing

Installs the ngx-datatable package using npm. This is the recommended way to add the library to your Angular project.

```bash
npm install @swimlane/ngx-datatable
```

--------------------------------

### Angular Component Setup

Source: https://swimlane.gitbook.io/ngx-datatable/readme/getting-started

Shows how to define a basic ngx-datatable component in an Angular application, including rows and columns.

```typescript
import { Component } from'@angular/core';

@Component({
  selector:'app',
  template:`
    <div>
      <ngx-datatable [rows]="rows" [columns]="columns"> </ngx-datatable>
    </div>
  `
})
exportclassAppComponent {
  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' }];
}
```

--------------------------------

### ngx-datatable Dependencies Installation

Source: https://swimlane.gitbook.io/ngx-datatable/contributing/building

Instructions for installing the development dependencies required for ngx-datatable, including webpack, karma, and protractor.

```bash
npm install --global webpack
npm install --global webpack-dev-server
npm install --global karma-cli
npm install --global protractor
npm install --global typescript
```

--------------------------------

### Development Server Command

Source: https://swimlane.gitbook.io/ngx-datatable/index

Starts the development server for ngx-datatable, which can be accessed at http://localhost:4200/. The application automatically reloads when source files are changed.

```bash
yarn start
```

--------------------------------

### Community Project Example: ng2-inline-editor

Source: https://swimlane.gitbook.io/ngx-datatable/contributing/community

Demonstrates the integration of ng2-inline-editor with ngx-datatable for inline editing of cell values.

```html
<ngx-datatable
  [rows]="myRows"
  [columns]="myColumns">
  <ngx-datatable-column name="Name">
    <ng-template ngx-datatable-cell-template let-value="value">
      <ng2-inline-editor [(ngModel)]="value"></ng2-inline-editor>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>
```

--------------------------------

### ngx-datatable Release Steps

Source: https://swimlane.gitbook.io/ngx-datatable/index

A sequence of git and yarn commands to manage the release process, including version updates, testing, building, and publishing.

```bash
git checkout master
git pull
yarn install --frozen-lockfile
yarn test
git checkout -b release/X.Y.Z
# Update version in projects/swimlane/ngx-datatable/package.json
# Update changelog in docs/CHANGELOG.md
yarn package
git commit -am "(release): X.Y.Z"
git tag X.Y.Z
git push origin HEAD --tags
yarn publish
```

--------------------------------

### Build Project Command

Source: https://swimlane.gitbook.io/ngx-datatable/index

Builds the ngx-datatable project. The build artifacts are stored in the dist/ directory.

```bash
yarn build
```

--------------------------------

### ngx-datatable Build Commands

Source: https://swimlane.gitbook.io/ngx-datatable/contributing/building

Common npm commands for building, testing, and releasing the ngx-datatable project. These commands utilize npm tasks for build automation.

```bash
npm start
# Starts Webpack dev server

npm run release
# Builds code to dist folder

npm run test
# Runs E2E Tests

npm run package
# Runs builds, packages and copies results to ./release
```

--------------------------------

### ngx-datatable Alternatives

Source: https://swimlane.gitbook.io/ngx-datatable/readme/features

Lists alternative data table solutions for Angular, providing links to their respective projects.

```markdown
Alternatives
This might not be the best fit for you given the above, there are some other great solutions and some this project borrows from; heres a short list:
  * [ng2-super-table](https://github.com/andyperlitch/ng2-super-table)
  * [ng2-table](https://github.com/valor-software/ng2-table)
  * [vaadin-grid](https://github.com/vaadin/vaadin-grid)
  * [iron-data-table](https://github.com/Saulis/iron-data-table/)
  * [paper-datatable](https://github.com/David-Mulder/paper-datatable)
```

--------------------------------

### ngx-datatable Prerequisites

Source: https://swimlane.gitbook.io/ngx-datatable/contributing/building

The essential software prerequisites for developing with ngx-datatable, including Node.js version and Angular CLI.

```bash
Node >= 6.0.0
Angular CLI
TypeScript >= 2.0.0
```

--------------------------------

### ngx-datatable API Documentation

Source: https://swimlane.gitbook.io/ngx-datatable/demos

Provides an overview of the ngx-datatable API, including Table, Column, and Row Detail components, their inputs, outputs, methods, and modes.

```APIDOC
Table:
  Inputs:
    - name: rows
      type: any[]
      description: Array of rows to display.
    - name: columns
      type: ColumnDefinition[]
      description: Array of column definitions.
  Outputs:
    - name: activate
      type: EventEmitter<any>
      description: Emitted when a cell is activated.
  Methods:
    - name: sort
      parameters: [field: string, asc: boolean]
      description: Sorts the table by a given field.

Column:
  Inputs:
    - name: name
      type: string
      description: Column identifier.
    - name: prop
      type: string
      description: Property name in the row object.
  Modes:
    - name: standard
      description: Default column mode.
    - name: checkbox
      description: Column for checkboxes.

Row Detail:
  Inputs:
    - name: row
      type: any
      description: The row data.
  Outputs:
    - name: toggle
      type: EventEmitter<any>
      description: Emitted when the row detail is toggled.
```

--------------------------------

### Contributing Guidelines

Source: https://swimlane.gitbook.io/ngx-datatable/contributing/guidelines

Guidelines for contributing to the ngx-datatable project, including how to report issues, request features, and submit pull requests.

```markdown
# Guidelines
We would love for you to contribute to our project and help make it ever better! As a contributor, here are the guidelines we would like you to follow.

## Found an Issue?
If you find a bug in the source code or a mistake in the documentation, you can help us by submitting an issue to our GitHub Repository. Including an issue reproduction (via CodePen, JsBin, Plunkr, etc.) is the absolute best way to help the team quickly diagnose the problem. Screenshots are also helpful.
You can help the team even more and submit a Pull Request with a fix.

## Want a Feature?
You can request a new feature by submitting an issue to our GitHub Repository. If you would like to implement a new feature, please submit an issue with a proposal for your work first, to be sure that we can use it. Please consider what kind of change it is:
  * For a Major Feature, first open an issue and outline your proposal so that it can be discussed.
This will also allow us to better coordinate our efforts, prevent duplication of work, and help you
 to craft the change so that it is successfully accepted into the project.
  * Small Features can be crafted and directly submitted as a Pull Request.
```

--------------------------------

### ngx-datatable API Documentation

Source: https://swimlane.gitbook.io/ngx-datatable/contributing/community

Provides an overview of the ngx-datatable API, including table inputs, outputs, methods, internals, column configurations, row detail settings, and custom row wrappers.

```APIDOC
Table:
  Inputs:
    - name: rows
      type: any[]
      description: Array of rows to display.
    - name: columns
      type: ColumnDefinition[]
      description: Array of column definitions.
  Outputs:
    - name: activate
      type: EventEmitter<any>
      description: Emitted when a cell is activated.
  Methods:
    - name: sort
      parameters: [field, asc]
      description: Sorts the table by a given field.
  Internals:
    - Details on internal component structure and logic.

Column:
  Inputs:
    - name: name
      type: string
      description: Column identifier.
    - name: prop
      type: string
      description: Property name in the row object.
  Modes:
    - Standard: Default column display.
    - Custom: Allows custom cell templates.
  Internals:
    - Details on internal column handling.

Row Detail:
  Inputs:
    - name: rowHeight
      type: number | function
      description: Height of the row detail.
  Outputs:
    - name: toggle
      type: EventEmitter<any>
      description: Emitted when row detail is toggled.

Row:
  Custom row wrapper configuration.
```

--------------------------------

### Run Tests Command

Source: https://swimlane.gitbook.io/ngx-datatable/index

Executes linters, prettier checks, unit tests, and end-to-end tests for the ngx-datatable project.

```bash
yarn test
```

--------------------------------

### ngx-datatable API Documentation

Source: https://swimlane.gitbook.io/ngx-datatable/contributing/guidelines

Provides an overview of the ngx-datatable API, including Table, Column, and Row Detail components, their inputs, outputs, methods, and modes.

```APIDOC
Table Component API:
  Inputs:
    - rows: Array<any> - Rows to display
    - columns: Array<Column> - Columns to display
    - loadingIndicator: boolean | string - Show loading indicator
    - offset: number - Page offset
    - limit: number - Rows per page
    - count: number - Total number of rows
    - selected: Array<any> - Selected rows

  Outputs:
    - activate: EventEmitter<any> - Emitted when a cell is activated
    - select: EventEmitter<any> - Emitted when a row is selected

  Methods:
    - sort(event: SortEvent): void - Sorts the table
    - activateCell(event: any): void - Activates a cell

Column Component API:
  Inputs:
    - name: string - Column name
    - prop: string - Property name in the row object
    - width: number - Column width
    - canAuto: boolean - Enable auto column sizing
    - sortable: boolean - Enable sorting

Row Detail API:
  Inputs:
    - rowDetailTemplate: TemplateRef<any> - Template for row detail

  Outputs:
    - rowDetailToggle: EventEmitter<any> - Emitted when row detail is toggled
```

--------------------------------

### ngx-datatable API Documentation

Source: https://swimlane.gitbook.io/ngx-datatable/changelog

Provides an overview of the ngx-datatable API, including Table, Column, Row Detail, and Row components, detailing their inputs, outputs, methods, and internal structures.

```APIDOC
Table Component API:
  Inputs:
    - rows: Array<any> - The data array to display.
    - columns: Array<Column> - The column definitions.
    - offset: number - The page offset.
    - limit: number - The page limit.
    - loadingIndicator: boolean | string - Show loading indicator.
    - filterDelay: number - Delay in ms for filtering.
    - externalPaging: boolean - Enable external paging.
    - externalSorting: boolean - Enable external sorting.
  Outputs:
    - onSelect: EventEmitter<any> - Emitted when a row is selected.
    - onActivate: EventEmitter<any> - Emitted when a row is activated.
    - onPage: EventEmitter<any> - Emitted when the page changes.
  Methods:
    - selectRow(row: any): void - Selects a row.
    - activateCell(event: any): void - Activates a cell.
    - toggleExpandRow(row: any): void - Toggles the expansion of a row.
  Internals:
    - _rows: Array<any> - Internal rows array.
    - _columns: Array<Column> - Internal columns array.

Column Component API:
  Inputs:
    - name: string - Column name.
    - prop: string - Property name in the row object.
    - width: number - Column width.
    - canAuto: boolean - Enable auto column width.
    - sortable: boolean - Enable sorting for the column.
    - draggable: boolean - Enable dragging for the column.
    - resizeable: boolean - Enable resizing for the column.
    - comparator: Function - Custom sort comparator.
  Modes:
    - standard: Default column display.
    - checkbox: Checkbox column for row selection.
    - custom: Custom template for column display.
  Internals:
    - _visible: boolean - Internal visibility flag.

Row Detail Component API:
  Inputs:
    - rowDetail: TemplateRef<any> - Template for row detail.
    - rowDetailTemplateHeader: TemplateRef<any> - Template for row detail header.
  Outputs:
    - onExpand: EventEmitter<any> - Emitted when a row detail is expanded.

Row Component API:
  Custom row wrapper: Allows custom row rendering.
```

--------------------------------

### ngx-datatable Table API Methods

Source: https://swimlane.gitbook.io/ngx-datatable/readme/installing

Lists the public methods available on the ngx-datatable Table component. These methods allow programmatic control over the table.

```APIDOC
Table Methods:
  - updateRows(): void
    - Updates the table rows.
  - updateColumnValue(row: any, prop: string, value: any): void
    - Updates a specific cell value.
  - sortColumn(column: ColumnDefinition): void
    - Sorts the table by a specific column.
```
Tokens:
Raw