Full-featued CRUD Data Grid Component - tui.grid

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

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