0.0.1 • Published 7 years ago

@baianat/table v0.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
7 years ago

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

PROPERTIESDEFAULTDESCRIPTION
fixedHeaderfalseindicates whether the table header is fixed during scrolling
paginationtrueenables pages pagination
sortabletrueenables the ability to sort columns
editablefalseenables the user to edit table cells
densityfalseshows rows density control buttons
perPage10how 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

DEFAULTDESCRIPTION
beforeEditfires when clicking on an input and starts to edit it
afterEditfires after blurring out of the input

License

MIT

Copyright (c) 2017 Baianat

0.0.1

7 years ago

0.0.0

7 years ago