Get unlimited public & private packages + team-based management with npm Teams.Learn more »

@baianat/table

0.0.1 • Public • Published

Table

ES6 advanced data table extension for Base framework.

Getting Started

Installation

You can install table as part of base.extensions.

npm install @baianat/base.extensions
 
# or using yarn 
yarn add @baianat/base.extensions

If you want the standalone version.

npm install @baianat/table
 
yarn add @baianat/table

Include necessary files

<head>
  <!-- if you are using base.framework -->
  <link rel="stylesheet" href="@baianat/base.framework/dist/css/base.css">
 
  <!-- if you want only table stylesheet -->
  <link rel="stylesheet" href="@baianat/table/dist/css/table.css">
 
</head>
<body>
    ...
    <script type="text/javascript" src="dist/js/table.js"></script> 
</body>

HTML markup

Here's an ordinary table markup with the class .table

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Info</th>
      <th>Price</th>
      <th>Action</th>
    </tr>
  </thead>
 
  <tfoot>
    ...
  </tfoot>
 
  <tbody>
    ...
  </tbody>
</table>

Create a new table instance

using default settings

  new Table('.table');

using custom settings

  new Table('.table', {
    fixedHeader: true,
    pagination: true,
    sortable: true,
    editable: true,
    density: false,
    perPage: 10
  });

Settings

PROPERTIES DEFAULT DESCRIPTION
fixedHeader false indicates whether the table header is fixed during scrolling
pagination true enables pages pagination
sortable true enables the ability to sort columns
editable false enables the user to edit table cells
density false shows rows density control buttons
perPage 10 how many rows is shown per page

Working with custom events

You can listen to events to notify you when data changes

  const table = document.querySelector('.table');
 
  table.addEventListener('beforeEdit', (e) => {
    console.log(e.detail)
  });
 
  table.addEventListener('afterEdit', (e) => {
    console.log(e.detail)
  });

Events

DEFAULT DESCRIPTION
beforeEdit fires when clicking on an input and starts to edit it
afterEdit fires after blurring out of the input

License

MIT

Copyright (c) 2017 Baianat

Keywords

none

Install

npm i @baianat/table

DownloadsWeekly Downloads

0

Version

0.0.1

License

MIT

Last publish

Collaborators

  • avatar
  • avatar