Grid

<fine-grid id='myGrid1'>
</fine-grid>

<script type="text/javascript">
  var info = {
    element: 'grid',
    example: 'format'
  };
  
  function customerNumberCheck(number) {
    return /^\d{3}$/.test(''+number);
  }
  
  fine.ready(function(e) {
    var el = document.getElementById('myGrid1');
    el.set('theme', 'flat');
    el.setConfig({
      height: '400px',
      showToolbar: true,
      columns: [{
        field: "orderNumber",
        title: "Order Number",
        width: '100px',
        filtering: false,
        displayFormat: '0,0',
        editable: false,
      }, {
        field: "orderDate",
        title: "Order Date", 
        width: '40%',
        dataFormat: 'Y-MM-DD HH:mm:ss',
        displayFormat: 'dddd, MMMM Do YYYY',
        editFormat: 'MM-DD-Y',
        saveFormat: 'Y-MM-DD',
      }, {
        field: "status",
        title: "Status",
        width: '150px',
      }, {
        field: "customerNumber",
        title: "CustomerNumber",
      }, {
        commands: ["Edit", "Delete"],
        editingCommands: ["Save", "Cancel"],
        width: '120px',
        filtering: false,
      }],
      dataSource: {
        schema: {
          model: {
            idField: 'customerNumber',
            fields: {
              orderNumber: {
                type: 'number'
              },
              orderDate: {
                type: 'date'
              },
              status: {
                type: 'string'
              },
              customerNumber: {
                type: 'number'
              }
            }
          }
        },
        transport: {
          read: {
            url: "gridDataService.php",
            dataType: "text"
          },
          update: {
            url: "gridDataService.php",
            dataType: "text"
          },
          create: {
            url: "gridDataService.php",
            dataType: "text"
          },
          destroy: {
            url: "gridDataService.php",
            dataType: "text"
          }
        },
        serverPaging: false,
        serverFiltering: false,
        serverSorting: false,
        serverGrouping: false,
      },
      paging: {
        pageSize: 10
      },
      sorting: {
        type: 'multiple',
      },
      filtering: {
      },
      editing: 'batch',
    });
  });
  
</script>