datagrid Toast UI Grid & DataTables

datagrid Toast UI Grid & DataTables

datagrid는 데이터를 화면에 뿌려주는 도구이다.

free datagrid 라이브러리 중에 Toast UI Grid 와 DataTables를 간략히 소개한다.

 

이 두 라이브러리를 테스트 하면서,

resizing 기능에 차이를 발견했는데

Toast UI Grid는  grid를 감싸는 element width값의 변화에 대해 유동적으로 대응하지 않는다.(setWidth() 메소드로 해결 가능하다.)

다만, window의 resize 이벤트에는 반응을 한다.

반면

DataTables 는 window의 resize 이벤트에 유동적으로 반응할 뿐 아니라,

grid를 감싸는 element width 값의 변화에도 유동적으로 대응을 한다.

이 resizing 기능 차이는 DOM 구조에 원인이 있지 않나 싶다.

Toast UI Grid는 div로 테이블을 구성한다.

DataTables는 table로 테이블을 구성한다.

 

비단 resizing 기능 뿐만 아니라 datagrid 라이브러리를 선택할 때는

표현하고자 하는 데이터의 특성을 파악해서 그에 적합한 기능을 고려해 라이브러리를 골라야 할 것이다.

 

1. Toast UI Grid

https://ui.toast.com/tui-grid

TOAST UI :: Make Your Web Delicious!

설치

npm

$ npm install --save tui-grid # Latest version

cdn

<link rel="stylesheet" href="https://uicdn.toast.com/tui-grid/latest/tui-grid.css" />
...
<script src="https://uicdn.toast.com/tui-grid/latest/tui-grid.js"></script>

사용

HTML

<div id="grid"></div>

JavaScript

var Grid = tui.Grid;
const grid = new Grid({
  el: document.getElementById('grid'),  
});
grid.setColumns([
  {
    header: 'ID',
    name: 'id'
  },
  {
    header: 'CITY',
    name: 'city',
    editor: 'text'
  },
  {
    header: 'COUNTRY',
    name: 'country'
  }
]);
const data = [
  {
    id: '10012',
    city: 'Seoul',
    country: 'South Korea'
  },
  {
    id: '10013',
    city: 'Tokyo',
    country: 'Japan'    
  },
  {
    id: '10014',
    city: 'London',
    country: 'England'
  },
  {
    id: '10015',
    city: 'Ljubljana',
    country: 'Slovenia'
  },
  {
    id: '10016',
    city: 'Reykjavik',
    country: 'Iceland'
  }
];
grid.resetData(data);

 

출처 : https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/ko/getting-started.md

GitHub - nhn/tui.grid: 🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!

예제

 

 

2. DataTables

https://datatables.net/

DataTables | Table plug-in for jQuery

설치

npm

npm install datatables.net

cdn

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" />
...
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

사용

HTML

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>            
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

JavaScript

$(document).ready( function () {
    $('#myTable').DataTable();
} );

출처 : https://datatables.net/manual/installation

Installation

예제

sdff