tui.grid

๐Ÿž๐Ÿ”ก The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!

MIT License

Downloads
12.7K
Stars
2.4K
Committers
27

Bot releases are hidden (Show)

tui.grid - v4.15.1

Published by js87zz about 4 years ago

Bugfixes

  • Fixed that script error is triggered when clicking the svg custom cell.(#1173)
  • null, undefined original value should be kept in editor.(#1174)
tui.grid - v4.15.0

Published by js87zz about 4 years ago

Features

  • Resize column width automatically with width: 'auto' option as text length.(#1148)
    const columns = [{
      name: 'name',
      width: 'auto',
      // ...
    }];
    
    2020-08-18 12-23-21 2020-08-18 12_23_36
  • Added beforeChange and afterChange event. The event will be triggered on editing or pasting, deleting the data by keyMap. The existing column events(onBeforeChange, onAfterChange) will be deprecated.(#1149)
    grid.on('beforeChange', ev => {
      /**
       * {
       *   origin: 'cell' | 'paste' | 'delete'
       *   changes: [{ rowKey: 0, columnName: 'name', value: 'value', nextValue: 'nextValue', prevValue: 'prevValue' }]
       * }
       */
      console.log(ev);
    });
    
    • To alter specific change, overwrite the desired value to change.nextValue as below.
    grid.on('beforeChange, ev => {
      ev.changes.forEach(change =>  {
        if (change.nextValue === 'needReplace') {
          // 'needReplace' is replaced with empty string
          change.nextValue = '';
        }
      });
    });
    

Bugfixes

  • Fixed that null or undefined cell value is changed to empty string in validatorfn.(#1141)
  • Fixed that previous editing value is copied when editingEvent option is click (#1143)
tui.grid - v4.14.0

Published by js87zz over 4 years ago

Features

  • Added custom comparator option.(#1096)

    • The comparator option is useful to sort the data with user's own comparator. The structure of comparator is same as general compare function which run in javascript sort function. However, you can use the rowA, rowB in our comparator. These parameters is useful to sort the data using other column data.
     const comparator = (valueA, valueB, rowA, rowB) => {
       if (valueA.length < valueB.length) {
         return -1;
       }
       if (valueA.length > valueB.length) {
         return 1;
       }
       return 0;
     };
    
     const grid = new Grid({
       data,
       columns: [
         { name: 'name', header: 'name', comparator  },
         // ...
       ]
     })
    
  • Added unique built-in validation type.(#1099)

    • The unique option is useful to check the uniqueness of the column data.
     const grid = new Grid({
       data,
       columns: [
         { name: 'name', validation: { unique: true } },
          // ...
       ]
     });
    
  • Added position, visiblePages pageOptions.(#950, #1097)

     const grid = new Grid({
       data,
       columns,
       pageOptions: {
         useClient: true,
         visiblePages: 7,
         position: 'top'
       }
     })
    
  • Added more detail information to the result of validate API.(#1107)

    • errorInfo is added to the result of validate API. The errorInfo has more detail information on validation result and it will replace the existing errorCode which is deprecated.
     // result of validate API. 
     // errorInfo has errorCode and meta date for handling the validation result more conveniently.
     [
       {
         rowKey: 1,
         errors: [
           {
             columnName: 'c1',
             // errorCode is deprecated.
             errorCode: ['VALIDATOR_FN'],
             errorInfo: [{ errorCode: "VALIDATOR_FN", customCode: 'CUSTOM_CODE' }]
           }
         ]
       },
       {
         rowKey: 2,
         errors: [
           {
             columnName: 'c1',
             errorCode: ['MIN'],
             errorInfo: [{ errorCode: "MIN", min: 1000 }]
           }
         ]
       }
     ]  
    

Enhancement

  • The editing result is saved when clicking the dummy cell for usability and uniformity in grid.(#1088)

Bugfixes

  • Fixed that appended row was not displayed with infinite scrolling option.(#1085)
  • Fixed that scrollEnd event has been triggered after calling resetData API.(#1086)
  • Fixed script error when expanding the tree cell with resizable option.(#1087)
  • Fixed that the operation has not been worked according to the defined order of relation columns.(#1089)
  • Fixed that the incorrect data has been rendered when removing the row.(#1101)

CDN

tui.grid - v4.13.0

Published by js87zz over 4 years ago

Features

  • Added beforePageMove, afterPageMove custom event (#1063)
    • detail content(#1062)

Bugfixes

  • Fixed that the tree cell couldn't be edited when appending empty tree row.(#1034)
  • Improved the performance of sorting with filtering the data.(#1037)
  • Fixed that the row couldn't be found by calling getRow API after calling clearModifiedData API.(#1050)
  • Added object type to CellValue type definition.(#1054)
  • Fixed script error on calling removeCheckedrows API.(#1052)

CDN

tui.grid - v4.12.1

Published by js87zz over 4 years ago

Bugfixes

  • Fixed that it's impossible to remove column filter state on calling resetData API option.(#1049)

CDN

tui.grid - v4.12.0

Published by js87zz over 4 years ago

Features

  • Added beforeSort, afterSort, beforeUnsort, afterUnsort custom event.(#1046)
    • detail content(#1042)
  • Added beforeFilter, afterFilter, beforeUnfilter, afterUnfilter custom event.(#1047)
    • detail content(#1042)
  • Added resetData API option for keeping the sort, filter state

Bugfixes

  • The summary content has not been changed after calling setColumns API.(#1027)
  • Fixed that vertical border theme has been not applied.(#1029)
  • Fixed that the scroll bar has not been displayed with empty data.(#1036)

Documentation

CDN

tui.grid - v4.11.0

Published by js87zz over 4 years ago

Features

  • Added getFormattedValue API.(#1013)
    • Return the formatted value of the cell identified by the rowKey and columnName.
    • Code
      const formattedValue = grid.getFormattedValue('rowKey', 'columnName');
      

Bugfixes

  • The header checkbox will be released and the checked states of added data will be not checked in case of adding data through infinite scroll. If you want to know more detail history, refer this issue.(#973)
  • Fixed that scrollEnd event was triggered when scrolling horizontally.(#983)
  • Changed global scoped checkbox css.(#993)
  • The validator function has been changed to be evaluated lazily for applying the latest grid data.(#994)
  • Fixed editing of the tree cell is disabled.(#995)
  • Fixed script error on calling setColumnValues API.(#997)
  • Added missing css(tui-grid-cell-current-row).(#1000)
  • Fixed that the data removed by clear API has been registered to the modified target data.(#1006)
  • Removed wrong el type in react-wrapper.(#1007)
  • Fixed wrong editing layer position with translate style.(#1010)
  • Fixed the hidden column couldn't be included in target column on setValue API.(#1011)

Documentation

  • Fixed the typo and broken link.(#1026)

CDN

tui.grid - v4.10.1

Published by js87zz over 4 years ago

Breaking Changes

  • Changed type definition structure.(#932)
    • types folder which has all type definition is deployed.

Enhancement

  • Filled the missing data internally using column property.(#914)
  • select, checkbox editing UI is changed to layer UI for visibility of editing content. The editing content is not cut off in layer UI.(#928)
    images

Bugfixes

  • Fixed that duplicated event handler is registered in react wrapper.(#925)
  • checked disabled, editable state in setColumnValues and setValue API.(#931)
  • Fixed that checked state of header checkbox has wrong when appending or removing row.(#933)
  • Fixed script error with applying rowHeight: 'auto' option.(#939)
  • Fixed malfunction of moveRow API.(#955)
  • The data removed using backspace, del key is added to modified target.(#957)
  • Fixed custom validation function is called multiple times.(#960)
  • Fixed wrong checked state of rows with infinite scrolling.(#964)

Documentation

  • Added new tutorials
    • infinite scroll(kor)
    • dataSource-ajax(kor)

CDN

tui.grid - v4.10.0

Published by js87zz over 4 years ago

Features

  • TOAST UI Grid provides infinite scroll functionality.(#909)
    The data can be displayed when user scrolls at the bottommost by configuring the option. TOAST UI Grid will support that operation on three way.
    • Client infinite scrolling
      Users configure the whole data in grid, however, only the paginated data is displayed. The next data will be displayed when users scroll at the bottommost.

      • Code
        const grid = new Grid({
          data,
          columns,
          // bodyHeight option is mandatory
          bodyHeight: 300,
          pageOptions: {
            // should define the `useClient: true` option to use client infinite scrolling
            useClient: true,
            perPage: 50,
            // should define the 'scroll' option
            type: 'scroll'
          }
        });
        
    • Infinite scrolling using dataSource
      Users configure dataSource and also add data through dataSource in grid.

      • Code
        const grid = new Grid({
          data,
          columns,
          // bodyHeight option is mandatory
          bodyHeight: 300,
          pageOptions: {
            perPage: 50,
            // should define the 'scroll' option
            type: 'scroll'
          }
        });
        
    • Infinite scrolling using scrollEnd event
      Users directly add the data through using scrollEnd custom event.

      • Code
        const grid = new Grid({
          data,
          columns,
          // bodyHeight option is mandatory
          bodyHeight: 300
        });
        grid.on('scrollEnd', () => {
          axios.get('url').then((response) => {
            grid.appendRows(response.data);
          });
        });
        

Enhancement

  • Added validatorfn parameters.(#911)
    • Code
      const grid = new tui.Grid({
        columns: [
          {
            header: 'Price',
            name: 'price',
            validation: {
              // can get `columnName` and `rowKey` through `row` parameter
              validatorFn: (value, row, columnName) => value !== 11000
            }
          ]
          // ...
       });
      
  • Removed unnecessary re-rendering of the cell when occurs mouseover event.(#913)

CDN

tui.grid - v4.9.1

Published by js87zz over 4 years ago

Enhancement

  • Added nextValue, prevValue parameter to onBeforeChange, onAfterChange.(#898)
    • Code
      // `nextValue` is to be changed
      // `value` is existing value(not changed)
      onBeforeChange({ rowKey, columnName, value, nextValue })
      
      // `prevValue` is previous value(before changed)
      // `value` is changed value
      onAfterChange({ rowKey, columnName, value, prevValue })
      

Bugfixes

  • Changed undefined style property to default value(empty string) in virtual DOM for preventing to maintain old style in DOM element.(#894)
  • Added enumerable configuration to observable object to spread observable data properly.(#895)

CDN

tui.grid - v4.9.0

Published by js87zz over 4 years ago

Features

  • DataSource has been a great improvement for convenient usability and supporting various ajax options.(#862) ๐Ÿ’ช๐Ÿ’ช๐Ÿ’ช
    Let's take a quick look at the options.
    • Added ajax option
      • contentType: option to define request body type
        • The support of application/json type is added!
      • headers: option to add headers
      • mimeType: option for parameter on calling overideMimeType function
      • serializer: option for custom serializer
    • Added hideLoadingBar option to hide loading bar on communicating with server
    • Added initParams to send user defined parameters to server when gets data
    • Added url option type. the function type is allowed as url option to define RESTful URI
    • Code
      const dataSource = {
        hideLoadingBar: true,
        api: {
          readData: { 
            url: () => `/readData/${applicationId}`, 
            method: 'get',
            initParams: { param: 'param' }
          },
          createData: {
            url: '/createData/`, 
            method: 'post',
            contentType: 'application/json',
            headers: { 'x-custom-header': 'x-custom-header' }
          }
        },
        serializer(params) {
          // write your serializer
          return Qs.stringify(params);
        }
      }
      
  • Added setRequestParams API.(#869)
    • set common parameters to use for request through DataSource.
    • Code
      grid.setRequestParams({ param: 'param' })
      
  • Added clearModifiedData API.(#878)
    • clear the modified data which is returned by getModifiedRows API and used to communicate with server.
    • Code
      // clear all modified data
      grid.clearModifiedData();
      
      // clear specific modified data
      grid.clearModifiedData('CREATE');
      // or
      grid.clearModifiedData('UPDATE');
      // or
      grid.clearModifiedData('DELETE');
      
  • Added enableColumn, disableColumn API.(#888)
    • set the disabled state to cells of the specific column.
    • Code
      // configure column `disabled`
      const columns = [{ name: 'name' }, { name: 'age', disabled: true }];
      new Grid({ data, column })
      
      // or call API
      grid.enableColumn('columnName');
      grid.disableColumn('columnName');
      

Enhancement

  • Improved custom renderer config options for usability.(#850)
    • Code
       // before
       const columns: OptColumn[] = [
         {
           name: 'score',
           renderer: {
             type: SliderRenderer
           }
         }
       ];
       // after
       const columns: OptColumn[] = [
         {
           name: 'score',
           renderer: SliderRenderer
           // recommend using existing way in case of having `options` parameter
           renderer: {
             type: SliderRenderer,
             options: {...}
           }
         }
       ];
      
  • Added onGridUpdated custom event to detect updating of the grid data.(#867)

Bugfixes

  • Fixed that editing layer has been remained out of grid area on scrolling.(#853)
  • Fixed the internal comparator to sort clearly with mixed type(string, number) data.(#865)
  • Moved the scroll position automatically on calling focus, focusAtAPI.(#874)
  • Fixed that the one of the child column of complex header couldn't be hidden.(#876)
  • Fixed that scroll position cause the bug when calls resetData API.(#892)

CDN

tui.grid - v4.8.1

Published by js87zz almost 5 years ago

Bugfixes

  • Fixed clipboard bug in IE.(#839)
  • Fixed wrong order of check, uncheck custom events.(#840)
  • Fixed that grid data couldn't be sorted with applying filter condition to grid.(#841)
  • Removed dependence on the order of column definition in relation columns.(#846)
  • Grid data could be filtered with formatted value.(#849)
  • Fixed that grid height hasn't been updated after calling setPerPage API.(#852)

CDN

tui.grid - v4.8.0

Published by js87zz almost 5 years ago

Features

  • TOAST UI Grid v4.8.0 provides merged header functionality.(#792)
    • Users can merge specific header columns for displaying the column data as an one header column
    • Since the merge the header column, it affects range selection and some API.
      • As click the merged header column, the range of selection is extended by
        spanning count.
      • if you show or hide one of the merged columns through API, all merged columns are affected.
      • The operation(ex. selection, focus, editing) in the grid cell is not changed for usability. because only the column of header is spanned.
    • The resizable option can be used with complex header.(#825)
    • Code
      const grid = new Grid({
        data,
        column,
        header: {
          height: 100,
          complexColumns: [
            {
              header: 'name',
              name: 'nameHeader',
              childNames: ['id', 'name'],
              resizable: true,          // resize the complex header or merged header through configuring this option
              hideChildHeaders: true    // merge the child headers through configuring this option
            }
          ]
        }
      });
      
  • Added getSelectionRange API.(#798)
    • gets Selection range
    • Code
      grid.getSelectionRange();
      

Bugfixes

  • Added missing render method in custom column header interface.(#818)
  • Changed filter text event type (onkeyup -> oninput) to solve malfunction on searching.(#827)
  • Changed validation css rule precedence to solve ignoring the css.(#828)
  • Removed key property caused side effect in filter select component.(#811)
    • Thank you for @ryum91 ๐Ÿ‘
  • Fixed the data couldn't be filtered with applying pagination.(#833)
  • Fixed miscalculated border height with complex header.(#821)
  • Added calling beforeDestroy hook for custom renderer.(#822)

Enhancement

  • The test is classified into two tests like below.(#797, #810)

    • visualization test
      • The purpose of this test verifies visualization of the grid element using the storybook.
      • An Individual story is test scenario classified by specific category.
    • integration test
      • The purpose of this test verifies all functionality of the grid except visualization test target.
  • Added Monkey Patch Array.(#804)

    • To remove duplicated code to notify the observer, Monkey Patch Array is applied. As the result, our unnecessary code is eliminated and code quality is improved.

Documentation

  • Added new tutorials
    • filter(en)
    • pagination(en)
    • sort(en)
    • custom column header(kor)
  • Added part in tutorials
    • validation(en)
      • min, max option
      • regExp option
      • validateFn option
    • custom event(en)
      • onBeforeChange
      • onAfterChange
      • onGridMounted
      • onGridBeforeDestroy
  • modified the broken link in tutorials

CDN

tui.grid - v4.7.0

Published by js87zz almost 5 years ago

Features

  • TOAST UI Grid v4.7.0 provides header customizing functionality.(#769)
    • The header column can be customized through configuring the header.columns option. The button, icon or any DOM element you want to render in header column can be grid header column.
    • To use this functionality, Pay attention to the following matters.
      • Other column options are not applied on customized header column like sortable, filter options. Because grid cannot know where render the sort, filter button in your customized header.
      • In case of making the functionality(sort, filter) which is able to use in default column header, It should be implemented in your customized header column using the grid API.
    • Code
      class CustomRenderer {
        constructor(props) {
          const el = document.createElement('div');
      
          this.columnInfo = props.columnInfo;
          el.className = 'custom';
          el.textContent = `custom_${this.columnInfo.name}`;
          this.el = el;
        }
      
        getElement() {
          return this.el;
        }
      
        render(props) {
          // write your code to sync the column header state
        }
      
        beforeDestroy() {
          // do something
        }
      }
      
      const grid = new tui.Grid({
         data,
         columns, 
         header: {
           height: 100,
           columns: [
             {
               name: 'id',
               renderer: CustomRenderer // define your header custom renderer
             }
           ]
         }
      });
      
  • The className option is provided for column.(#782)
    • It is possible to apply the specific class to column users wants through configuring the className option in column.
    • Code
      const columns = [
        { name: 'name', className: 'custom-className' },
        { name: 'age' },
        { name: 'location' }
      ];
      const grid = new tui.Grid({columns, ...});
      
  • Added setRow API.(#789)
    • sets new data to the row identified by the specified rowKey.
    • Code
      grid.setRow('rowKey', { name: 'name', age: 10 });
      
  • Added moveRow API.(#791)
    • moves the row identified by the specified rowKey to target index.
    • Code
      grid.moveRow('rowKey', 3);
      

Bugfixes

  • Added checking hidden column on calling filter, unfilter API.(#743)
  • Fixed the bug which has not been deleting the className(tui-grid-row-hover) when gets out of specific row.(#748)
  • Fixed that date format of filtering layer has been reset.(#752)
  • Added missing operator parameter on calling filter API.(#758)
  • Fixed that scroll bar has been created on selecting the end area of grid.(#773)
  • Fixed that editingFinish event has been not emitted with keyMap editing.(#774)
  • Captured focus on closing the datePicker editing layer.(#776)
  • Finished editing on clicking the header.(#777)
  • Calculated the height of row which has whitespace property accurately.(#778)
  • Fixed wrong example code in row header example(#794)

Enhancement

  • Added test for functionality of client pagination.(#738)
  • Provided summary values about both full and filtered data.(#745, #796)
    • Code
      /* 
       * summaryValue
       * {
       *  sum, min, max, avg, cnt,
       *  filtered: {
       *    sum, min, max, avg, cnt
       *  }
       * }
       */
       template(summaryValues)ue{
         // ...
       }
      
  • Updated row number automatically as the specific row is removed or appended row.(#747)
  • Added probot to maintain our issue more effectively.(#758)
  • Simplified finishEditing API.
    • Code
      // legacy
      grid.finishEditing('rowKey', 'columnName');
      
      // current 
      grid.finishEditing(); // recommended
      
  • Applied batch update in our observable system to reduce the unnecessary process and improve the performance.(#785)
  • Changed the way of getting row index in each cell to improve performance.(#795)

CDN

tui.grid - v4.6.1

Published by js87zz about 5 years ago

Bugfixes

  • Fixed wrong isOddRow in bodyDummyRow component. (#716)
  • Prevented to emit mousedown, when event target is same as body area.(#723)
  • Fixed that the grid data is not changed on appending or removing row. (#724)
  • Fixed that JS error has been caused as clicked the complex column header. (#728)
  • Fixed wrong initial row header checkbox state. (#729)
  • Fixed wrong pagination logic in datasource. (#733)

Enhancement

  • Classified helper, query, dispatch layer internally. (#726)
tui.grid - v4.6.0

Published by js87zz about 5 years ago

Features

  • ๐ŸŽŠTOAST UI Grid v4.6.0 provides Filter functionality๐ŸŽŠ. (#676)
    • There are four built-in filters, which include text, number, select and date. The text, number, date filters can be used with 2 conditions in conjunction with the operator option. We will also provide a custom filter option in the next minor release for users who want to use their own filters.
      Below is an example of simple usage. See the tutorial for details.

    • Code

      const columns = [
        {
           name: 'name',
           minWidth: 150,
           filter: 'text'
        }
      ]
      
      // or
      const columns = [
        {
          name: 'name',
          minWidth: 150,
          filter: {
            type: 'date',
            options: {
              format: 'yyyy-mm',
              type: 'month'
            },
            operator: 'OR',
            showApplyBtn: true, // default false
            showClearBtn: true // default false
          }
         }
       ]
      
    • API

      • filter
        • Reflect the filter results. This occurs only if the column has a filter option.
        • Code
          grid.filter(columnName, state)
          
      • unfilter
        • Clear the filtering applied to the column.
        • Code
          grid.unfilter(columnName)
          
      • getFilterState
        • get current filter state
        • Code
          grid.getFilterState(columnName);
          
      • setFilter
        • Set filter on columns.
        • Code
          grid.setFilter(columnName, filterOpt);
          

Bugfixes

  • Changed onGridBeforeDestroyedevent naming to onGridBeforeDestroy. (#650)
  • Fixed that checkbox in rowheader is not changed on calling checkAll, uncheckAll API. (#663)
  • Added checking sortable property on calling sort, unsort API. (#680)
  • Added checking editable property on calling startEditing, finishEditing API. (#680)
  • Fixed the bug about sorting the numeric value. (#687)
  • Added checking the hidden property of column as edit the cell and sort the data. (#692)
  • Changed the paging count properly on calling setPerPage API. (#693)
  • Fixed that row hover style is not applied properly to the selection layer. (#698)
  • Fixed select the wrong selection area in client pagination. (#699)
  • Fixed numeric validation for string value. (#700)
  • Made synchronous rendering as start or finish editing. (#702)
    • because the previous editing cell should be destroyed in case of calling finishEditing, startEditing API in a row.
    • finishEditing API has been changed for undefined value parameter. As the value parameter is undefined, the editor's value is saved and finish editing.
  • Inserted the empty value for each column as append the empty row. (#707)
  • Fixed that JS error has been caused as clicked the area of grid after removing the row. (#709)

Enhancement

  • Improved the tree performance. (#665)
    • Only the expanded children rows(excluding hidden rows) are converted to observable.
    • The hidden children rows will be observable when expanded.
    • The hierarchy tree data is not flattened when the data are supposed to be observable.
  • Enhanced the test case of related resetData, setColumns API for testing more complicated cases. (#681)
  • Added datepicker icon option. (#691)
    • Code
      const columns = [
        {
          name: 'monthPicker',
          editor: {
            type: 'datePicker',
            options: {
              format: 'yyyy-MM',
              type: 'month',
              showIcon: false // default true
            }
          }
        }
      ];
      
  • Added tab keyMap operation and tabMode option. (#701)
    • Code
      const { el, grid } = new Grid({
        //...
        tabMode: 'moveAndEdit'
      });
      

Documentation

tui.grid - v3.9.2

Published by js87zz about 5 years ago

Bugfixes

  • Set selection to clipboard text for triggering copy event in IE browser. (#650 )
tui.grid - v4.5.2

Published by js87zz about 5 years ago

Bugfixes

  • Set selection to clipboard text for triggering copy event in IE browser. (#647 )
  • Fixed that the rowKey has been created as -Infinity when appends row on empty grid. (#651 )
  • Fixed el variable reference from EditingLayerInner component. (#655 )
  • Removed invalid quotes in css. (#656 )

Documents

tui.grid - v4.5.1

Published by js87zz about 5 years ago

Bugfixes

  • Changed that sortingType store props to local component props to prevent to access props when it has been unmounted. (#644 )
tui.grid - v4.5.0

Published by js87zz about 5 years ago

Bugfixes

  • Fixed that the rowKey has been created in duplicate when appended row. (#630 )
  • Applied the option of summary to columns added by calling setColumns API. (#635 )
  • Removed the asynchronous operation internally for concurrency of data. (#636 )

Enhancement

  • Extended the functionality of validation. (#625 )
    • It's possible to validate min, max of number value.
    • Users can validate string value with the pattern of Regular Expression.
    • Custom validator function can be used to validate the value.
    • Code
    const grid = new Grid({
      // ...options
      columns: [{ 
        // ...columns
        validation: {
          dataType: string | number,
          required: boolean,
          min: number,
          max: number,
          regExp: string,
          validatorFn: Function
        }
      }]
    })
    

Features

  • TOAST UI Grid v4.5.0 provides Client Pagination. (#631 )
    • Users can display the pagination data in grid using only client side data.
    • Client Pagination is very useful to users who need to show their data on pagination format without communicating the backend API.
    • Code
    const grid = new Grid({
      data,
      column,
      pageOptions: {,
        // to use the client pagination, should set `true`
        useClient: true,
        // data count per page
        perPage: 10
      }
    });