Sort, Filter, Edit!多機能なtableを実装できる「Smart Table」

「Smart Table」はソート、フィルタリング、フォーマッティング、Edit、セレクトなど多機能なテーブルを実装することの出来るJSライブラリです。

Smart Table

screenshot210

「Smart Table」ではtableタグを一切使わず、JavaScriptのMVCフレームワークであるAngularJSによって作られたライブラリを用いることでtableを実装します。難しそうに思うかもしれませんが、まったくそんなことはありません。リンク先では実装例も丁寧に載せてくれています。今日はまずどんなtableが実装できるのかを紹介し、その後実装例を載せていきます。

 

「Smart Table」で実装することの出来るtableです。まずはベーシックなtable。

screenshot211

 

フォーマットかつ、ソートが出来るtable。Last Nameには小文字が入ってきても自動的に大文字変換されます。また、各カラムでデータの昇順、降順を切り替えることができます。以下の画像例ではFirst Nameを昇順でソートしています。

screenshot212

 

こちらは行を選択できるtable。行の削除や複製の際に使えそうですね。

screenshot213

 

最後にセルをEditできるtable。セルをダブルクリックすることでEditすることができます。なかなか作りこまれていて、セルのデータ属性に応じてEdit方法を変えたり、データチェック(メールアドレスの形式が正しいかなど)が機能します。

screenshot214

 

 

それではベーシックなテーブルの実装方法をご紹介します。まずは以下の外部ファイルを読み込みます。

<link rel="stylesheet" href="bootstrap.css"/>
<script src="angular.min.js"></script>
<script src="Smart-Table.debug.js"></script>

 

HTMLは以下のようにマークアップしてください。

<div ng-controller="mainCtrl">
  <smart-table class="table table-striped" table-title="Smart Table example" columns="columnCollection" rows="rowCollection"></smart-table>
</div>

 

JSは以下のように実装します。データやtableに対するルールはJSON形式で指定します。

var app = angular.module('myApp', ['smartTable.table']).
controller('mainCtrl', ['$scope', function (scope) {

  scope.rowCollection = [
      {id: 0, firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'laurent34azerty@gmail.com'},
      {id: 1, firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'laurent34azerty@gmail.com'},
      {id: 2, firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'laurent34azerty@gmail.com'},
      {id: 3, firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'laurent34azerty@gmail.com'},
      {id: 4, firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'laurent34azerty@gmail.com'},
      {id: 5, firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'laurent34azerty@gmail.com'},
      {id: 6, firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'laurent34azerty@gmail.com'},
      {id: 7, firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'laurent34azerty@gmail.com'},
      {id: 8, firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'laurent34azerty@gmail.com'},
      {id: 9, firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'laurent34azerty@gmail.com'},
      {id: 10, firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'laurent34azerty@gmail.com'},
      {id: 11, firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'laurent34azerty@gmail.com'},
  ];

  scope.columnCollection = [
      {label: 'id', map: 'id', isEditable: false},
      {label: 'FirsName', map: 'firstName'},
      {label: 'LastName', map: 'lastName', isSortable: false},
      {label: 'birth date', map: 'birthDate', formatFunction: 'date', type: 'date'},
      {label: 'balance', map: 'balance', type: 'number', formatFunction: 'currency', formatParameter: '$'},
      {label: 'email', map: 'email', type: 'email'}
  ];

}]);

 

するとこの通り、Editすることの出来るセルをもつtableを実装することが出来ました。

screenshot215

 

企業の社員管理、勤怠管理などの社内システムにもこの「Smart Table」は使えそうですね。ぜひ参考にどうぞ。

 

Home > JavaScript > Sort, Filter, Edit!多機能なtableを実装できる「Smart Table」

Return to page top