FancyGrid CRUD

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container"></div>

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  new FancyGrid({
    renderTo: 'container',
    title: 'CRUD',
    width: 700,
    height: 400,
    theme: 'blue',
    trackOver: true,
    selModel: 'rows',
    data: {
      proxy: {
        api: {
          create: 'https://fancygrid.com/ajax/new.php',
          read: 'https://fancygrid.com/ajax/load.php',
          update: 'https://fancygrid.com/ajax/update.php',
          destroy: 'https://fancygrid.com/ajax/destroy_action.php'
        }
      }
    },
    defaults: {
      type: 'string',
      width: 100,
      editable: true,
      sortable: true,
      resizable: true,
      ellipsis: true
    },
    paging: true,
    clicksToEdit: 1,
    tbar: [{
      type: 'button',
      text: 'Add',
      action: 'add',

    }, {
      type: 'button',
      text: 'Delete',
      action: 'remove'
    }],
    columns: [{
      index: 'id',
      locked: true,
      title: 'ID',
      type: 'number',
      width: 40,
      editable: false,
      resizable: false
    }, {
      index: 'company',
      locked: true,
      title: 'Company'
    }, {
      index: 'name',
      title: 'Name'
    }, {
      index: 'surname',
      title: 'Sur Name'
    }, {
      index: 'age',
      width: 60,
      title: 'Age',
      type: 'number'
    }, {
      type: 'action',
      width: 65,
      items: [{
        text: 'Delete',
        cls: 'action-column-remove',
        action: 'remove'
      }]
    }, {
      index: 'position',
      locked: true,
      title: 'Position',
      width: 150
    }]
  });
});