Full-featued CRUD Information Grid Element – tui.grid

tui.grid is a strong knowledge grid part helps you dynamically render bigger knowledge in a performant, feature-rich knowledge grid in a minute.

Key options:

• Dynamic knowledge rendering.
• Pagination controls.
• Create/Take away/Update/Delete knowledge.
• Information sorting & choice.
• Keyboard interactions.
• Inline modifying similar to the spreadsheet.
• Information validator, formatter & converter.
• 3 built-in themes.
• And extra…

Fundamental utilization:

1. Set up the tui.grid with NPM.

# NPM
$ npm set up tui-grid --save

2. Import the tui.grid’s information within the doc.

// ES module
import Grid from 'tui-grid';

<!-- Browser -->
<hyperlink rel="stylesheet" href="/dist/tui-grid.css" />
<script src="/dist/tui-grid.js"></script>

3. Create a container wherein the information grid will probably be positioned.

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

4. Outline your individual knowledge 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 fundamental knowledge grid contained in the placeholder factor.

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

6. Add a customized context menu the information grid.

var gridInstance = new tui.Grid({
    contextMenu:  () => [
    [
      {
        name: 'id1',
        label: 'menu1',
        action: 'copyRows',
        classNames: ['my']
      },
      {
        identify: 'id2',
        label: 'menu2',
        motion: () => {
          console.log('menu2');
        },
        subMenu: [
          {
            name: 'id3',
            label: 'subMenu1',
          },
        ],
      },
    ],
    [
      {
        name: 'id4',
        label: 'menu3',
        action: () => {
          console.log('menu3');
        }
      },
    ],
  ],
});

7. All doable choices, callbacks and capabilities.

• knowledge: Grid knowledge for making rows.
• header: Choices object for header.
• header.top: The peak of the header space.
• header.complexColumns: This choices creates new mother or father headers of the a number of columns, which incorporates the headers of spcified columns, and units up the hierarchy.
• digitalScrolling: If set to true, use virtual-scrolling so that enormous quantity of knowledge will be processed performantly. When utilizing this feature that units true, the rowHeight choice should set worth.
• rowHeight: The peak of every rows. The default worth is ‘auto’, the peak of every rows expands to dom’s top. If set to quantity, the peak is fastened.
• minRowHeight: The minimal top of every rows. When this worth is bigger than the row’s top, it set to the row’s top.
• bodyHeight: The peak of physique space. The default worth is ‘auto’, the peak of physique space expands to complete top of rows. If set to ‘fitToParent’, the peak of the grid will broaden to suit the peak of mother or father factor. If set to quantity, the peak is fastened.
• minBodyHeight: The minimal top of physique space. When this worth is bigger than the physique’s top, it set to the physique’s top.
• columnOptions: Possibility object for all columns
• columnOptions.minWidth: Minimal width of every columns
• columnOptions.resizable: If set to true, resize-handles of every columns will probably be proven.
• columnOptions.frozenCount: The variety of frozen columns. The columns listed from 0 to this worth will all the time be proven on the left facet. {@hyperlink Grid#setFrozenColumnCount} can be utilized for setting this worth dynamically.
• columnOptions.frozenBorderWidth: The worth of frozen border width. When the frozen columns are created by “frozenCount” choice, the frozen border width set.
• treeColumnOptions: Possibility object for the tree column.
• treeColumnOptions.identify: The identify of column that makes tree column.
• treeColumnOptions.useIcon: If set to true, the folder or file icon is created on the left facet of the tree cell knowledge.
• treeColumnOptions.useCascadingCheckbox: If set to true, a cascading relationship is created within the checkbox between mother or father and baby rows.
• treeColumnOptions.indentWidth: set tree grid indent width
• copyOptions: Possibility object for clipboard copying
• copyOptions.useFormattedValue: Whether or not to make use of formatted values or authentic values as a string to be copied to the clipboard
• useClientSort: If set to true, sorting will probably be executed by consumer itself with out server.
• editingEvent: If set to ‘click on’, editable cell within the view-mode will probably be modified to edit-mode by a single click on.
• scrollX: Specifies whether or not to point out horizontal scrollbar.
• scrollY: Specifies whether or not to point out vertical scrollbar.
• showDummyRows: If set to true, empty space will probably be full of dummy rows.
• keyColumnName: The identify of the column for use to determine every rows. If not specified, distinctive worth for every rows will probably be created internally.
• heightResizable: If set to true, a deal with for resizing top will probably be proven.
• pagination: Choices for tui.Pagination. If set to null or false, pagination won’t be used.
• selectionUnit: The unit of choice on Grid. (‘cell’, ‘row’)
• rowHeaders: Choices for making the row header. The row header content material is variety of every row or enter factor. The worth of every merchandise is allow to set string sort. (ex: [‘rowNum’, ‘checkbox’])
• rowHeaders.sort: The kind of the row header. (‘rowNum’, ‘checkbox’, ‘radio’)
• rowHeaders.title: The title of the row header on the grid header space.
• rowHeaders.width: The width of the row header.
• rowHeaders.template: Template perform which returns the content material(HTML) of the row header. This perform takes a parameter an Okay-V object as a parameter to match template values.
• columns: The configuration of the grid columns.
• columns.identify: The identify of the column.
• columns.ellipsis: If set to true, ellipsis will probably be used for overflowing content material.
• columns.align: Horizontal alignment of the column content material. Out there values are ‘left’, ‘middle’, ‘proper’.
• columns.valign: Vertical alignment of the column content material. Out there values are ‘high’, ‘center’, ‘backside’.
• columns.className: The identify of the category for use for all cells of the column.
• columns.title: The title of the column to be proven on the header.
• columns.width: The width of the column. The unit is pixel. If this worth is not set, the column’s width is robotically resized.
• columns.minWidth: The minimal width of the column. The unit is pixel.
• columns.hidden: If set to true, the column won’t be proven.
• columns.resizable: If set to false, the width of the column won’t be modified.
• columns.validation: The choices for use for validation. Validation is executed at any time when knowledge is modified or the {@hyperlink Grid#validate} is named.
• columns.validation.required: If set to true, the information of the column will probably be checked to be not empty.
• columns.validation.dataType=”string”: Specifies the kind of the cell worth. Avilable varieties are ‘string’ and ‘quantity’.
• columns.defaultValue: The default worth to be proven when the column does not have a worth.
• columns.formatter: The perform that codecs the worth of the cell. The retrurn worth of the perform will probably be proven as the worth of the cell.
• columns.useHtmlEntity: If set to true, the worth of the cell will probably be encoded as HTML entities.
• columns.ignored: If set to true, the worth of the column will probably be ignored when organising the listing of modified rows.
• columns.sortable: If set to true, type button will probably be proven on the best facet of the column header, which executes the type motion when clicked.
• columns.onBeforeChange: The perform that will probably be known as earlier than altering the worth of the cell. If cease() technique in occasion object is named, the altering will probably be canceled.
• columns.onAfterChange: The perform that will probably be known as after altering the worth of the cell.
• columns.editOptions: The thing for configuring modifying UI.
• columns.editOptions.sort: The string worth that specifies the kind of the modifying UI. Out there values are ‘textual content’, ‘password’, ‘choose’, ‘radio’, ‘checkbox’.
• columns.editOptions.useViewMode: If set to true, default mode of the cell would be the ‘view-mode’. The mode will probably be switched to ‘edit-mode’ solely when consumer double click on or press ‘ENTER’ key on the cell. If set to false, the cell will all the time present the enter parts as a default.
• columns.editOptions.listItems: On the spot making use of of built-in editor
• columns.editOptions.instantApply: Specifies the choice objects for the ‘choose’, ‘radio’, ‘checkbox’ sort. The merchandise of the array should include properties named ‘textual content’ and ‘worth’. (e.g. [{text: ‘option1’, value: 1}, {…}])
• columns.editOptions.onFocus: The perform that will probably be known as when a ‘focus’ occasion occurred on an enter factor
• columns.editOptions.onBlur: The perform that will probably be known as when a ‘blur’ occasion occurred on an enter factor
• columns.editOptions.onKeyDown: The perform that will probably be known as when a ‘keydown’ occasion occurred on an enter factor
• columns.editOptions.prefix: The HTML string to be proven left to the enter factor. If it is a perform, the return worth will probably be used.
• columns.editOptions.postfix: The HTML string to be proven proper to the enter factor. If it is a perform, the return worth will probably be used.
• columns.editOptions.converter: The perform whose return worth (HTML) represents the UI of the cell. If the return worth is
• falsy(null|undefined|false), default UI will probably be proven.
• columns.copyOptions: Possibility object for clipboard copying. This selection is column particular, and overrides the worldwide copyOptions.
• columns.copyOptions.useFormattedValue: Whether or not to make use of formatted values or authentic values as a string to be copied to the clipboard
• columns.copyOptions.useListItemText: Whether or not to make use of concatenated textual content or authentic values as a string to be copied to the clipboard
• columns.copyOptions.customValue: Whether or not to make use of personalized worth from “customValue” callback or authentic values as a string to be copied to the clipboard
• columns.relations: Specifies relation between this and different column.
• columns.relations.targetNames: Array of the names of goal columns.
• columns.relations.disabled: If returns true, goal columns will probably be disabled.
• columns.relations.editable: If returns true, goal columns will probably be editable.
• columns.relations.listItems: The perform whose return worth specifies the choice listing for the ‘choose’, ‘radio’, ‘checkbox’ sort. The choices listing of goal columns will probably be changed with the return worth of this perform.
• columns.whiteSpace: If set to ‘regular’, the textual content line is damaged by becoming to the column’s width. If set to ‘pre’, areas are preserved and the textual content is braken by new line characters. If set to ‘pre-wrap’, areas are preserved, the textual content line is damaged by becoming to the column’s width and new line characters. If set to ‘pre-line’, areas are merged, the textual content line is damaged by becoming to the column’s width and new line characters.
• columns.part: Possibility for utilizing tui-component
• columns.part.identify: The identify of the compnent to make use of for this column
• columns.part.choices: The choices object for use for creating the part
• abstract: The thing for configuring abstract space.
• abstract.top: The peak of the abstract space.
• abstract.positio: The place of the abstract space. (‘backside’, ‘high’)
• abstract.columnContent: The thing for configuring every column within the abstract. Sub choices beneath are keyed by every column identify.
• abstract.columnContent.useAutoSummary: If set to true, the abstract worth of every column is served as a paramater to the template perform at any time when knowledge is modified.
• abstract.columnContent.template: Template perform which returns the content material(HTML) of the column of the abstract. This perform takes an Okay-V object as a parameter which incorporates a abstract values keyed by ‘sum’, ‘avg’, ‘min’, ‘max’ and ‘cnt’.
• usageStatistics: Ship the hostname to google analytics. If you don’t want to ship the hostname, this feature set to false.

Changelog:

v4.21.5 (2022-09-24)

• feat: add setRows api for setting a number of rows

v4.21.4 (2022-08-10)

• repair: change filtered abstract correctly when no filter is ready
• repair: match to mother or father top with out padding

v4.21.3 (2022-07-18)

• feat: (i18n) add Italian translation
• bugfixes

v4.21.2 (2022-05-27)

• Added i18n language help. (PT, NL)
• Bugfixes

v4.21.1 (2022-05-06)

• Add removeRows API
• BugFixes

v4.21.0 (2022-03-24)

• Added function to reset auto-sizing column widths in resetColumnWidths.
• Added the function that’s prompt making use of of built-in editor, which works just for built-in choose, checkbox(radio), datePicker editor.

v4.20.3 (2022-02-17)

• Mounted that destroyed the editor earlier than modifying was completed

v4.20.1 (2022-01-28)

• Added choice to set tree grid indent width
• Added APIs that return added class names 
• Bugfixes

v4.20.0 (2021-12-10)

• Added function to export filtered knowledge
• Added function to disable context menu
• Added function to column drag and drop
• Added API to return particular column mannequin
• Added function to allow/disable particular cell
• Added function that dynamic rowspan
• Mounted an issue that was submitted when a button within the grid contained in the Type factor was clicked

v4.19.4 (2021-11-09)

v4.19.3 (2021-11-04)

v4.19.2 (2021-10-07)

• Mounted that the grid physique is hidden after resizing the grid.
• Mounted that the mistaken tree rowKey is generated in case of multi grid occasion.

v4.19.1 (2021-09-16)

• Mounted mistaken exterior dependency module(SheetJS) identify.

v4.19.0 (2021-09-15)

• Added exporting to csv or excel function.
• Bugfixes

v4.18.0 (2021-07-14)

• Mounted infinite loop when appending the tree row.

v4.18.0 (2021-07-01)

• Added context menu function.
• Added keydown customized occasion. (Doesn’t happen throughout modifying).
• Bugfixes.

v4.17.3 (2021-06-02)

• Mounted drop occasion property

v4.17.2 (2021-05-24)

• Mounted that can’t transfer tree node to final when final node has kids
• Mounted that can’t paste the information in chrome

v4.17.1 (2021-05-13)

• Added appended property to tug occasion
• Mounted the script error in IE11 when checking filtered worth

v4.17.0 (2021-04-27)

• Added drag and drop performance to alter the order between rows.
• Added setPerPage API choice to ship extra parameters.
• Bugfixes

v4.16.1 (2020-12-18)

• Added types, attributes, classNames for default renderer. Customers can configure types, attributes, classNames choices to use some types or attributes in default renderer.

v4.1 (2019-07-11)

• Mounted that mistaken left place of the modifying layer.
• Mounted that altering mistaken choice, focus and clipboard space with row headers.
• Mounted that calculating row span in case the precise row has multi row span. 
• Mounted that calculating column width when resizes the precise column.
• Added sortingType choice for altering preliminary type order. 
• Added finishEditing occasion technique for destroying the modifying layer. 
• Customers have to destroy the customized editor by calling the precise technique. Typically, they’ve to pick out or modify editor’s worth thorough their customized layer created exterior our customized editor space.
• For instance, factor ui date-picker is that case. Resulting from date-picker dropdown hooked up doc as an one other root factor, can’t modify the modifying grid worth. As a result of modifying layer could be destroyed when mousedown occasion emitted exterior modifying space(based mostly DOM factor). So we are going to present finishEditing technique and the modifying layer is simply destroyed by altering the centered cell. 

v3.9.0 (2019-07-11)

• Added world jquery to commonJS.
• Mounted that expanded, collapsed occasion. 
• Mounted that scroll sticking with header choice.
• Mounted that column resizable choice is just not relevant. 
• Apply GA choice to TOAST UI dependencies.
• Added sortingType choice for altering preliminary type order.

v3.8 (2019-05-14)

• Added setHeader() API
• Add string sort of the rowHeaders choice

v3.7 (2019-04-09)

• Added setColumnTitles() API
• Mounted after showColumn(), hideColumn()
• Mounted Native Keyboard UI pops up when deciding on cells in Cell net

v3.6 (2019-02-28)

• Modified TypeScript export model to default export
• Mounted Surprising change of fixedHeight

v3.5 (2019-01-31)

• Added getSummaryValue() API
• Added abstract.defaultContent choices
• Added object sort help for setSummaryColumnContent()
• Added string sort help for abstract.columnContent choices
• Mounted Use checkedOnly choices of internet.request() solely when button column exists
• Mounted Stop dragmove when mouse button is just not pressed
• Mounted addCellClassName(), removeCellClassName() doesn’t work
• Mounted validation.dataType doesn’t work

v3.4 (2019-01-15)

• Added the bundle file together with jQuery + spine + underscore that named tui-grid.full.js on dist folder. (Use it provided that it is advisable use a special model of jQuery collectively)
• Added the declaration file(./index.d.ts) for TypeScript help.

2018-12-27

2018-12-21

• v3.3.0: repair: edit mistaken sort of annotation

2018-11-08

• Characteristic/convert picture base64

2018-10-18

• Characteristic/convert picture base64

This superior jQuery plugin is developed by nhnent. For extra Superior Usages, please test the demo web page or go to the official web site.