Nx-table NPM | npm.io

Datatable

Vue verson of datatable

Features

Render a table
Select row
Reoreder row
Order column

Notes

Installation

For vue, use the nx-table plugin from nx-table.

import NxTable from 'nx-table';

Vue.use(NxTable);

For css, import the datatable default css and nx-table css.

@import "~datatables.net-dt/css/jquery.dataTables.min.css";
@import "~datatables.net-select-dt/css/select.dataTables.min.css";
@import "~datatables.net-responsive-dt/css/responsive.dataTables.min.css";
@import "~datatables.net-rowreorder-dt/css/rowReorder.dataTables.min.css";
@import "~nx-table/dist/nx-table.css";

Usage

<template>
  <div class="example-table">
    <nx-table :rows="rows" :stripe-classes="['odd', 'even']">
      <nx-table-column title="Name" data="name" />
      <nx-table-column title="Salary" data="salary" />
      <nx-table-column title="Age" data="age" width="20px" />
      <nx-table-column title="Action" defaultContent="">
        <button>test</button>
      </nx-table-column>
    </nx-table>
  </div>
</template>

<script>
export default {
  name: "ExampleTable",
  data() {
    return {
      rows: [],
    };
  },
  created() {
    this.rows = [
      {
        name: "John",
        salary: 1000,
        age: 10,
      },
      {
        name: "Peter",
        salary: 2000,
        age: 20,
      },
    ];
  },
};
</script>

nx-table

Props

rows {Array}
Define the rows data to show.
See Datatable data option
serverSide {Boolean}
Set to true, to disable datatable internal sorting. It is useful when you need to do server side sorting.
See Datatable serverSide option
processing {Boolean}
Show loading indicator.
See Datatable processing option
select {Boolean, String, Object}
Select configuration object.
See Datatable select option
selected {Array}
Select certain rows. The array's element is any row data. Use together with sync modifier to get back the selected rows.
```
<v-datatable
  :rows="rows"
  :select="{ style: 'os' }"
  :selected.sync="selected"
/>
```
See Datatable select api
rowReorder {Boolean, Object}
Enable row reorder. You may also need to listen for row reorder event.
See Datatable rowReorder option
Related: RowReorder listener
stripeClasses {Array}
Set the zebra stripe class names for the rows in the table. Default value is no stripe class. To enable it just like the official style, set its value to ['odd', 'even'].
See Datatable stripeClasses option
order {Array}
Order the table.
See Datatable order option

Listeners

rowReorder
Rows have been reordered by the end user.
New properties
- reorderedRow {Array} : the reordered rows.
See Datatable rowReorder event
order
Define the event listener for order.
New properties
- ordCols {Array} : the ordered columns
- ordStr {String} : the ordered columns in query string format
See Datatable order event

nx-table-column

Define the table column. Should be the direct child of the nx-table component.

Noted that not all datatable props are supported.

See Datatable column

Props

title {String}
Define the column's title.
See Datatable column.name
data {String}
Define the column's data. Make sure either data or defaultContent is defined.
See Datatable column.data
width {String}
Define the column's width. It takes any CSS value.
See Datatable columns.width
defaultContent {String}
Define the default content of the cell if data is undefined. Make sure either data or defaultContent is defined.
See Datatable columns.defaultContent

orderable {Boolean}
Indicate whether the column is orderable or not.
See Datatable columns.orderable
className {String}
Indicate the css class value
See Datatable columns.className
visible {Boolean}
Indicate a column is visible
See Datatable columns.visible

Scoped slots (default)

cellData {String}
The cell data.
See datatable columns.createdCell
rowData {Object}
Reactive row data. Useful in display custom data.
See datatable columns.createdCell
rowIndex {Number}
The row number.
See datatable columns.createdCell
colIndex {Number}
The column number.
See datatable columns.createdCell