CRUD Data Grid Component Tui - Free Download Full-featued CRUD Data Grid Component - tui.grid

Free Download Full-featued CRUD Data Grid Component – tui.grid

Posted on

This time I will share jQuery Plugin and tutorial about Full-featued CRUD Data Grid Component – tui.grid, hope it will help you in programming stack.

CRUD Data Grid Component Tui - Free Download Full-featued CRUD Data Grid Component - tui.grid
File Size: 1.11 MB
Views Total: 11121
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

tui.grid is a robust data grid component helps you dynamically render larger data in a performant, feature-rich data grid in a minute.

Key features:

  • Dynamic data rendering.
  • Pagination controls.
  • Create/Remove/Update/Delete data.
  • Data sorting & selection.
  • Keyboard interactions.
  • Inline editing just like the spreadsheet.
  • Data validator, formatter & converter.
  • 3 built-in themes.
  • And more…

Basic usage:

1. Install the tui.grid with NPM.

1 # NPM
2 $ npm install tui-grid --save

2. Import the tui.grid’s files in the document.

1 <link rel="stylesheet" type="text/css" href="/path/to/tui-grid.css">
2 <script src="/path/to/jquery.js"></script>
3 <script src="/path/to/underscore.js"></script>
4 <script src="/path/to/backbone.js"></script>
5 <script src="/path/to/tui-code-snippet.js"></script>
6 <script src="/path/to/tui-grid.js"></script>

3. Create a container in which the data grid will be placed.

1 <div id="myGrid"></div>

4. Define your own data in a JavaScript array.

01 var myData = [
02     {
03       id: 549731,
04       name: 'Beautiful Lies',
05       artist: 'Birdy',
06       release: '2016.03.26',
07       type: 'Deluxe',
08       typeCode: '1',
09       genre: 'Pop',
10       genreCode: '1',
11       grade: '4',
12       price: 10000,
13       downloadCount: 1000,
14       listenCount: 5000
15     },
16     // more data here
17 ]

5. Render a basic data grid inside the placeholder element.

01 var gridInstance = new tui.Grid({
02     el: $('#myGrid'),
03     data: myData,
04     columns: [
05       {
06           title: 'Name',
07           name: 'name'
08       },
09       {
10           title: 'Artist',
11           name: 'artist'
12       },
13       {
14           title: 'Type',
15           name: 'type'
16       },
17       {
18           title: 'Release',
19           name: 'release'
20       },
21       {
22           title: 'Genre',
23           name: 'genre'
24       }
25     ]
26 });

6. All possible options, callbacks and functions.

  • data: Grid data for making rows.
  • header: Options object for header.
  • header.height: The height of the header area.
  • header.complexColumns: This options creates new parent headers of the multiple columns, which includes the headers of spcified columns, and sets up the hierarchy.
  • virtualScrolling: If set to true, use virtual-scrolling so that large amount of data can be processed performantly. When using this option that sets true, the rowHeight option must set value.
  • rowHeight: The height of each rows. The default value is ‘auto’, the height of each rows expands to dom’s height. If set to number, the height is fixed.
  • minRowHeight: The minimum height of each rows. When this value is larger than the row’s height, it set to the row’s height.
  • bodyHeight: The height of body area. The default value is ‘auto’, the height of body area expands to total height of rows. If set to ‘fitToParent’, the height of the grid will expand to fit the height of parent element. If set to number, the height is fixed.
  • minBodyHeight: The minimum height of body area. When this value is larger than the body’s height, it set to the body’s height.
  • columnOptions: Option object for all columns
  • columnOptions.minWidth: Minimum width of each columns
  • columnOptions.resizable: If set to true, resize-handles of each columns will be shown.
  • columnOptions.frozenCount: The number of frozen columns. The columns indexed from 0 to this value will always be shown on the left side. {@link Grid#setFrozenColumnCount} can be used for setting this value dynamically.
  • columnOptions.frozenBorderWidth: The value of frozen border width. When the frozen columns are created by “frozenCount” option, the frozen border width set.
  • treeColumnOptions: Option object for the tree column.
  • The name of column that makes tree column.
  • treeColumnOptions.useIcon: If set to true, the folder or file icon is created on the left side of the tree cell data.
  • treeColumnOptions.useCascadingCheckbox: If set to true, a cascading relationship is created in the checkbox between parent and child rows.
  • copyOptions: Option object for clipboard copying
  • copyOptions.useFormattedValue: Whether to use formatted values or original values as a string to be copied to the clipboard
  • useClientSort: If set to true, sorting will be executed by client itself without server.
  • editingEvent: If set to ‘click’, editable cell in the view-mode will be changed to edit-mode by a single click.
  • scrollX: Specifies whether to show horizontal scrollbar.
  • scrollY: Specifies whether to show vertical scrollbar.
  • showDummyRows: If set to true, empty area will be filled with dummy rows.
  • keyColumnName: The name of the column to be used to identify each rows. If not specified, unique value for each rows will be created internally.
  • heightResizable: If set to true, a handle for resizing height will be shown.
  • pagination: Options for tui.Pagination. If set to null or false, pagination will not be used.
  • selectionUnit: The unit of selection on Grid. (‘cell’, ‘row’)
  • rowHeaders: Options for making the row header. The row header content is number of each row or input element. The value of each item is enable to set string type. (ex: [‘rowNum’, ‘checkbox’])
  • rowHeaders.type: The type of the row header. (‘rowNum’, ‘checkbox’, ‘radio’)
  • rowHeaders.title: The title of the row header on the grid header area.
  • rowHeaders.width: The width of the row header.
  • rowHeaders.template: Template function which returns the content(HTML) of the row header. This function takes a parameter an K-V object as a parameter to match template values.
  • columns: The configuration of the grid columns.
  • The name of the column.
  • columns.ellipsis: If set to true, ellipsis will be used for overflowing content.
  • columns.align: Horizontal alignment of the column content. Available values are ‘left’, ‘center’, ‘right’.
  • columns.valign: Vertical alignment of the column content. Available values are ‘top’, ‘middle’, ‘bottom’.
  • columns.className: The name of the class to be used for all cells of the column.
  • columns.title: The title of the column to be shown on the header.
  • columns.width: The width of the column. The unit is pixel. If this value isn’t set, the column’s width is automatically resized.
  • columns.minWidth: The minimum width of the column. The unit is pixel.
  • columns.hidden: If set to true, the column will not be shown.
  • columns.resizable: If set to false, the width of the column will not be changed.
  • columns.validation: The options to be used for validation. Validation is executed whenever data is changed or the {@link Grid#validate} is called.
  • columns.validation.required: If set to true, the data of the column will be che