Full-featued CRUD Data Grid Component - tui.grid

Full-featued CRUD Data Grid Component - tui.grid
File Size: 475 KB
Views Total:
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.

# NPM
$ npm install tui-grid --save

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

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

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

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

4. Define your own data in a JavaScript array.

var myData = [
    {
      id: 549731,
      name: 'Beautiful Lies',
      artist: 'Birdy',
      release: '2016.03.26',
      type: 'Deluxe',
      typeCode: '1',
      genre: 'Pop',
      genreCode: '1',
      grade: '4',
      price: 10000,
      downloadCount: 1000,
      listenCount: 5000
    },
    // more data here
]

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

var gridInstance = new tui.Grid({
    el: $('#myGrid'),
    data: myData,
    columns: [
      {
          title: 'Name',
          name: 'name'
      },
      {
          title: 'Artist',
          name: 'artist'
      },
      {
          title: 'Type',
          name: 'type'
      },
      {
          title: 'Release',
          name: 'release'
      },
      {
          title: 'Genre',
          name: 'genre'
      }
    ]
});

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.
  • treeColumnOptions.name: 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.
  • columns.name: 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 checked to be not empty.
  • columns.validation.dataType='string': Specifies the type of the cell value. Avilable types are 'string' and 'number'.
  • columns.defaultValue: The default value to be shown when the column doesn't have a value.
  • columns.formatter: The function that formats the value of the cell. The retrurn value of the function will be shown as the value of the cell.
  • columns.useHtmlEntity: If set to true, the value of the cell will be encoded as HTML entities.
  • columns.ignored: If set to true, the value of the column will be ignored when setting up the list of modified rows.
  • columns.sortable: If set to true, sort button will be shown on the right side of the column header, which executes the sort action when clicked.
  • columns.onBeforeChange: The function that will be called before changing the value of the cell. If stop() method in event object is called, the changing will be canceled.
  • columns.onAfterChange: The function that will be called after changing the value of the cell.
  • columns.editOptions: The object for configuring editing UI.
  • columns.editOptions.type: The string value that specifies the type of the editing UI. Available values are 'text', 'password', 'select', 'radio', 'checkbox'.
  • columns.editOptions.useViewMode: If set to true, default mode of the cell will be the 'view-mode'. The mode will be switched to 'edit-mode' only when user double click or press 'ENTER' key on the cell. If set to false, the cell will always show the input elements as a default.
  • columns.editOptions.listItems: Specifies the option items for the 'select', 'radio', 'checkbox' type. The item of the array must contain properties named 'text' and 'value'. (e.g. [{text: 'option1', value: 1}, {...}])
  • columns.editOptions.onFocus: The function that will be called when a 'focus' event occurred on an input element
  • columns.editOptions.onBlur: The function that will be called when a 'blur' event occurred on an input element
  • columns.editOptions.onKeyDown: The function that will be called when a 'keydown' event occurred on an input element
  • columns.editOptions.prefix: The HTML string to be shown left to the input element. If it's a function, the return value will be used.
  • columns.editOptions.postfix: The HTML string to be shown right to the input element. If it's a function, the return value will be used.
  • columns.editOptions.converter: The function whose return value (HTML) represents the UI of the cell. If the return value is
  • falsy(null|undefined|false), default UI will be shown.
  • columns.copyOptions: Option object for clipboard copying. This option is column specific, and overrides the global copyOptions.
  • columns.copyOptions.useFormattedValue: Whether to use formatted values or original values as a string to be copied to the clipboard
  • columns.copyOptions.useListItemText: Whether to use concatenated text or original values as a string to be copied to the clipboard
  • columns.copyOptions.customValue: Whether to use customized value from "customValue" callback or original values as a string to be copied to the clipboard
  • columns.relations: Specifies relation between this and other column.
  • columns.relations.targetNames: Array of the names of target columns.
  • columns.relations.disabled: If returns true, target columns will be disabled.
  • columns.relations.editable: If returns true, target columns will be editable.
  • columns.relations.listItems: The function whose return value specifies the option list for the 'select', 'radio', 'checkbox' type. The options list of target columns will be replaced with the return value of this function.
  • columns.whiteSpace: If set to 'normal', the text line is broken by fitting to the column's width. If set to 'pre', spaces are preserved and the text is braken by new line characters. If set to 'pre-wrap', spaces are preserved, the text line is broken by fitting to the column's width and new line characters. If set to 'pre-line', spaces are merged, the text line is broken by fitting to the column's width and new line characters.
  • columns.component: Option for using tui-component
  • columns.component.name: The name of the compnent to use for this column
  • columns.component.options: The options object to be used for creating the component
  • summary: The object for configuring summary area.
  • summary.height: The height of the summary area.
  • summary.positio: The position of the summary area. ('bottom', 'top')
  • summary.columnContent: The object for configuring each column in the summary. Sub options below are keyed by each column name.
  • summary.columnContent.useAutoSummary: If set to true, the summary value of each column is served as a paramater to the template function whenever data is changed.
  • summary.columnContent.template: Template function which returns the content(HTML) of the column of the summary. This function takes an K-V object as a parameter which contains a summary values keyed by 'sum', 'avg', 'min', 'max' and 'cnt'.
  • usageStatistics: Send the hostname to google analytics. If you do not want to send the hostname, this option set to false.

Changelog:

v4.1 (2019-07-11)

  • Fixed that wrong left position of the editing layer.
  • Fixed that changing wrong selection, focus and clipboard area with row headers.
  • Fixed that calculating row span in case the specific row has multi row span. 
  • Fixed that calculating column width when resizes the specific column.
  • Added sortingType option for changing initial sort order. 
  • Added finishEditing instance method for destroying the editing layer. 
  • Users need to destroy the custom editor by calling the specific method. Sometimes, they have to select or modify editor's value thorough their custom layer created outside our custom editor area.
  • For example, element ui date-picker is that case. Due to date-picker dropdown attached document as an another root element, cannot modify the editing grid value. Because editing layer would be destroyed when mousedown event emitted outside editing area(based DOM element). So we will provide finishEditing method and the editing layer is only destroyed by changing the focused cell. 

v3.9.0 (2019-07-11)

  • Added global jquery to commonJS.
  • Fixed that expanded, collapsed event. 
  • Fixed that scroll sticking with header selection.
  • Fixed that column resizable option is not applicable. 
  • Apply GA option to TOAST UI dependencies.
  • Added sortingType option for changing initial sort order.

v3.8 (2019-05-14)

  • Added setHeader() API
  • Add string type of the rowHeaders option

v3.7 (2019-04-09)

  • Added setColumnTitles() API
  • Fixed after showColumn(), hideColumn()
  • Fixed Native Keyboard UI pops up when selecting cells in Mobile web

v3.6 (2019-02-28)

  • Changed TypeScript export style to default export
  • Fixed Unexpected change of fixedHeight

v3.5 (2019-01-31)

  • Added getSummaryValue() API
  • Added summary.defaultContent options
  • Added object type support for setSummaryColumnContent()
  • Added string type support for summary.columnContent options
  • Fixed Use checkedOnly options of net.request() only when button column exists
  • Fixed Prevent dragmove when mouse button is not pressed
  • Fixed addCellClassName(), removeCellClassName() does not work
  • Fixed validation.dataType does not work

v3.4 (2019-01-15)

  • Added the bundle file including jQuery + backbone + underscore that named tui-grid.full.js on dist folder. (Use it only if you need to use a different version of jQuery together)
  • Added the declaration file(./index.d.ts) for TypeScript support.

2018-12-27

  • v3.3.1: update

2018-12-21

  • v3.3.0: fix: edit wrong type of annotation

2018-11-08

  • Feature/convert image base64

2018-10-18

  • Feature/convert image base64

This awesome jQuery plugin is developed by nhnent. For more Advanced Usages, please check the demo page or visit the official website.