TOAST UI Grid is a component that can view, edit, add, and delete multiple data. You can append units to the displayed data and use HTML to represent images and links instead of text data.

dynamic spreadsheet like data grid jexcel, feature rich data table with BS, javascript crud table, handsontable jquery, jquery datagrid example, jquery dynamic grid, react excel-like grid

Provides custom editing elements

To edit the data, you don’t need to use HTML to create the editing elements yourself. It supports various input elements such as text, select box, checkbox, radio button. You can adjust the way the data is edited only by selecting options. You can also show editing items what you want through a dedicated editor.

Simple and easy to use themes

It has three themes: default, outline (zebra style), and clean theme. You can easily add the desired design to the themes provided through the Themes API. The Themes API has been improved since version 3, allowing you to easily control the background color of the header/body area and vertical/horizontal border lines without modifying CSS styles directly. Use the theme to customize your network.

🎨 Features

• More diverse input types (checkbox, radio, selection, password, etc.)
• Full keyboard navigation (move, select, copy, paste, delete, etc.)
• Copy and paste using the clipboard with a third party app (eg MS-Excel or Google-spreadsheet)
• Multi-column headers
• Pick date
• The relational structure between columns
• Data source
• Summarize all values ​​for each column
• Customizing Styles (Three Basic Themes)
• Tree data representation
• Custom cell viewer
• Page numbering
• Frozen poles (installed)
• Improved default scrolling (processing a large data set without losing performance)
• Resize, rearrange, show, and hide columns
• Validation
• Selection
• Sort
• Cell merge

How to make use of it:

1. Install tui.grid with NPM.

# NPM
$ npm install tui-grid --save

2. Import the tui.grid files into the document.

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

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

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

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

4. Define your 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. Present a basic data network inside the placeholder.

var gridInstance = new tui.Grid({
    el: document.getElementById('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. Add a custom context menu to the data grid.

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

Full-featued CRUD Data Grid Component, TOAST UI Grid Plugin/Github, jquery datatable crud

See Demo And Download

Official Website(nhn): Click Here

This superior jQuery/javascript plugin is developed by nhn. For extra Advanced usage, please go to the official website.