ngx-mui-datatables v0.0.10

NGX-MUI-Datatables - Datatables for Material-UI(Angular)

This library is based off of the MUI-Datatables. The original library was written in react, and this simply provides a compatability layer between angular and the library, providing access to the bindings and other properties that the library offers.

Link to original library on github

MUI-Datatables is a data tables component built on Material-UI. It comes with features like filtering, resizable + view/hide columns, search, export to CSV download, printing, selectable rows, expandable rows, pagination, and sorting. On top of the ability to customize styling on most views, there are two responsive modes "stacked" and "scroll" for mobile/tablet devices.

Install

npm install ngx-mui-datatables --save or with yarn yarn add ngx-mui-datatables

This library also requires you to install the following libraries npm install @material-ui/icons npm install @material-ui/core or with yarn yarn add @material-ui/icons yarn add @material-ui/core

Usage

Add the following line to your polyfills.ts file. This will fix an error caused by using a react framework in angular.

(window as any).global = window;

Add the NgxMuiDatatableModule to your app module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxMuiDatatablesModule } from 'ngx-mui-datatables';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxMuiDatatablesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

For a simple table:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  columns = ['Name', 'Company', 'City', 'State'];

  data = [
    ['Joe James', 'Test Corp', 'Yonkers', 'NY'],
    ['John Walsh', 'Test Corp', 'Hartford', 'CT'],
    ['Bob Herm', 'Test Corp', 'Tampa', 'FL'],
    ['James Houston', 'Test Corp', 'Dallas', 'TX'],
  ];

  options = {
    filterType: 'checkbox',
  };
}

<ngx-mui-datatable title="Employee List" [data]="data" [columns]="columns" [options]="options"></ngx-mui-datatable>

Or customize columns:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  columns = [
    {
      name: 'name',
      label: 'Name',
      options: {
        filter: true,
        sort: true,
      }
    },
    {
      name: 'company',
      label: 'Company',
      options: {
        filter: true,
        sort: false,
      }
    },
    {
      name: 'city',
      label: 'City',
      options: {
        filter: true,
        sort: false,
      }
    },
    {
      name: 'state',
      label: 'State',
      options: {
        filter: true,
        sort: false,
      }
    },
  ];

  data = [
    { name: 'Joe James', company: 'Test Corp', city: 'Yonkers', state: 'NY' },
    { name: 'John Walsh', company: 'Test Corp', city: 'Hartford', state: 'CT' },
    { name: 'Bob Herm', company: 'Test Corp', city: 'Tampa', state: 'FL' },
    { name: 'James Houston', company: 'Test Corp', city: 'Dallas', state: 'TX' },
  ];

  options = {
    filterType: 'checkbox',
  };
}

API

The component accepts the following props:

Options:

Customize Columns

On each column object, you have the ability to customize columns to your liking with the 'options' property. Example:

const columns = [
 {
  name: "Name",
  options: {
   filter: true,
   sort: false
  }
 },
 ...
];

Column:

Column Options:

customHeadRender is called with these arguments:

function(columnMeta: {
  customHeadRender: func,
  display: enum('true', 'false', 'excluded'),
  filter: bool,
  sort: bool,
  sortDirection: bool,
  download: bool,
  empty: bool,
  index: number,
  label: string,
  name: string,
  print: bool,
  searchable: bool,
  viewColumns: bool
}, handleToggleColumn: function(columnIndex))

customBodyRender is called with these arguments:

function(value: any, tableMeta: {
  rowIndex: number,
  columnIndex: number,
  columnData: array, // Columns Options object
  rowData: array, // Full row data
  tableData: array, Full table data
  tableState: {
    announceText: null|string,
    page: number,
    rowsPerPage: number,
    filterList: array,
    selectedRows: {
      data: array,
      lookup: object,
    },
    showResponsive: boolean,
    searchText: null|string,
  },
}, updateValue: function)

Customize Styling

The original library provided a way to style the components, however for the moment it is not supported in this version. An oficial way may come in the future, but not at this point in time.

Remote Data

If you are looking to work with remote data sets or handle pagination, filtering, and sorting on a remote server you can do that with the following options:

const options = {
  serverSide: true,
  onTableChange: (action, tableState) => {
    this.xhrRequest('my.api.com/tableData', result => {
      this.setState({ data: result });
    });
  }
};

To see an example Click Here

Localization

This package decided that the cost of bringing in another library to perform localizations would be too expensive. Instead the ability to override all text labels (which aren't many) is offered through the options property textLabels. The available strings:

const options = {
  ...
  textLabels: {
    body: {
      noMatch: "Sorry, no matching records found",
      toolTip: "Sort",
    },
    pagination: {
      next: "Next Page",
      previous: "Previous Page",
      rowsPerPage: "Rows per page:",
      displayRows: "of",
    },
    toolbar: {
      search: "Search",
      downloadCsv: "Download CSV",
      print: "Print",
      viewColumns: "View Columns",
      filterTable: "Filter Table",
    },
    filter: {
      all: "All",
      title: "FILTERS",
      reset: "RESET",
    },
    viewColumns: {
      title: "Show Columns",
      titleAria: "Show/Hide Table Columns",
    },
    selectedRows: {
      text: "row(s) selected",
      delete: "Delete",
      deleteAria: "Delete Selected Rows",
    },
  }
  ...
}

License

The files included in this repository are licensed under the MIT license.

Thanks

Thank you to BrowserStack for providing the infrastructure that allows us to test in real browsers.

Thank you to the original author of this library MUIDataTables.