ngx-carbon-table v0.0.2

NgxCarbonTable

Reusable data table based on carbon-components and carbon-components-angular.

This library was generated with Angular CLI version 13.3.0.

Table of Contents

• Getting started
• Options
• Inputs
• Output events
• Examples
  • Populating table columns
  • Populating table data
  • No data found
  • Pagination
  • Sorting
  • Filtering
  • Toolbar template
  • Toolbar actions
  • Subscribe output events
  • Detect input change
• Tests

Getting started

$ npm i ngx-carbon-table

Then import into your Angular project.

import { NgxCarbonTableModule } from 'ngx-carbon-table';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    NgxCarbonTableModule
  ],
  ...
});

And use table as HTML tag.

<ngx-carbon-table></ngx-carbon-table>

Options

• ts.headerTitle: string
• ts.headerDescription: string
• ts.stickyHeader: string
• ts.size: "sm" | "sh" | "md" | "lg"
• ts.striped: boolean
• ts.skeleton: boolean
• ts.sortable: boolean
• ts.enableSingleSelect: boolean
• ts.showSelectionColumn: boolean
• ts.noDataFound: NoTableDataFound, specify behavior of table when no data
• ts.columns: object[], define table columns
• ts.data: object[], define table data
• ts.pagination: PaginationSettings, if you want to specify pagination options
• ts.filter: FilterSettings, if you want to specify filter options
• ts.toolbar: TemplateSettings, define table toolbar
• ts.toolbarAction: TemplateSettingsActionToolbar, define toolbar actions

Inputs

Table setting is splitted into 3 separate inputs because it is desired to apply Angular's detect change mechanism on them. For more details check Detect input change.

• ts: TableSettings, setting object defined in Options
• data: object[] as ts.data
• skeleton: boolean as ts.skeleton

Output events

• selectChange: TableRowI[], emits on select/deselect row
• toolbarCancel: void, emits on toolbar cancel
• noDataClick: void, emits on button click when no data

For more details check Subscribe output events.

Examples

Populating table columns

import { TableSettings } from 'ngx-carbon-table';

const ts: TableSettings = {
  ...
  columns: [
    // string
    'Header 1',
    // object
    { data: 'Header 2' },
    // using template
    { data: 'Header 3', template: this.template },
    // nested object in template
    { data: { one: 'Header', two: '4' }, template: this.nestedObjTemplate },
  ],
};

Populating table data

import { TableSettings } from 'ngx-carbon-table';

const ts: TableSettings = {
  ...
  columns: ['Header 1', 'Header 2'],
  data: [
    // string[]
    ['Row 1a', 'Row 1b'],
    // object
    { a: 'Row 2a', b: 'Row 2b' },
    // object[]
    [{ data: 'Row 3a' }, { data: 'Row 3b' }],
    // using template
    [
      { data: 'Row 4a', template: this.template },
      { data: 'Row 4b', template: this.template },
    ],
    // nested object in template
    [
      { data: { one: 'Row', two: '5a' }, template: this.nestedObjTemplate },
      { data: { one: 'Row', two: '5b' }, template: this.nestedObjTemplate },
    ],
    // nested object in template as expandable row
    [
      {
        data: 'Row 6a',
        expandedData: { one: 'Row', two: '6a (expanded)' },
        expandedTemplate: this.expandTemplate,
      },
      { data: 'Row 6b' },
    ],
  ],
};

No data found

import { TableSettings, NoTableDataFound } from 'ngx-carbon-table';

const ts: TableSettings = {
  ...
  noDataFound: { // NoTableDataFound
    title: 'No Data',
    content: 'Please check..',
    imagePath: './assets/images/no-data.svg',
    buttonTitle: 'Button Title'
  }
};

Pagination

import { TableSettings, PaginationSettings } from 'ngx-carbon-table';

const ts: TableSettings = {
  ...
  pagination: { // PaginationSettings
    defaultPageLength: 5,
    defaultStartPage: 1,
    itemsPerPage: [5, 10, 15],
  }
};

Sorting

import { TableSettings } from 'ngx-carbon-table';

const ts: TableSettings = {
  ...
  sortable: true,
  columns: [
    'Capital', // first column using default sortable function
    {
      data: 'State', // second column using custom sortable function
      sortFn: (a: any, b: any): number =>
        a.split('').reverse().join('').localeCompare(b.split('').reverse().join('')),
    },
  ],
};

Filtering

import { TableSettings, FilterSettings } from 'ngx-carbon-table';

const ts: TableSettings = {
  ...
  filter: { // FilterSettings
    expandable: true,
    size: 'xl',
    placeholder: 'Search for item...'
  },
  columns: [
    'Capital', // first column using default filter function
    {
      data: 'State', // second column using custom filter function
      filterFn: (a: any): string => a.split('').reverse().join(''),
    },
  ],
};

Toolbar template

<ng-template #toolbarTemplate let-data="data">
  <button ibmButton="primary" size="sm">
    {{ data.one + ' ' + data.two }}<svg ibmIcon="add" size="20" class="bx--btn__icon"></svg>
  </button>
</ng-template>

import { TableSettings, TemplateSettings } from 'ngx-carbon-table';

@ViewChild('toolbarTemplate', { static: true }) toolbarTemplate!: TemplateRef<any>;

const ts: TableSettings = {
  ...
  toolbar: { // TemplateSettings
    template: this.toolbarTemplate,
    data: { one: 'Primary', two: 'Button' },
  },
};

Toolbar actions

<ng-template #toolbarActionTemplate let-data="data">
  <button ibmButton="primary" (click)="onClick()">
    {{ data.one + ' ' + data.two }}
    <svg ibmIcon="download" size="16" class="bx--btn__icon"></svg>
  </button>
</ng-template>

import { TableSettings, TemplateSettingsActionToolbar } from 'ngx-carbon-table';

@ViewChild('toolbarActionTemplate', { static: true }) toolbarActionTemplate!: TemplateRef<any>;

const ts: TableSettings = {
  ...
  toolbarAction: { // TemplateSettingsActionToolbar
    template: this.toolbarActionTemplate,
    data: { one: 'Show', two: 'selected rows' },
    cancelText: 'Custom cancel',
    batchText: 'custom items selected',
  },
};

Subscribe output events

<ngx-carbon-table
  ...
  (selectChange)="onSelectChange($event)"
  (toolbarCancel)="onToolbarCancel()"
  (noDataClick)="onNoDataClick()">
</ngx-carbon-table>

Detect input change

Setting is passed as 3 inputs considering detect change logic. Each change on respective input reflects this change in real time.

import { TableSettings } from 'ngx-carbon-table';

const ts: TableSettings = { ... };

<ngx-carbon-table
  [ts]="ts"
  [data]="ts.data"
  [skeleton]="ts.skeleton">
</ngx-carbon-table>

Tests

# install dependencies
$ npm install

# linting
$ npm run lint

# tests
$ npm run test