Grid

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

<script type="text/javascript">
  var info = {
    element: 'grid',
    example: 'group'
  };
  
  fine.ready(function(e) {
    var el = document.getElementById('myGrid1');
    el.set('theme', 'flat');
    el.setConfig({
      height: '400px',
      showToolbar: true,
      columns: [{
        field: "customerNumber",
        title: "ID", 
        width: '70px',
        filtering: false,
        editable: false,
      }, {
        field: "customerName",
        title: "Customer Name",
        width: '30%',
      }, {
        field: "phone",
        title: "Phone",
        width: '150px',
        filtering: false,
      }, {
        field: "city",
        title: "City",
      }, {
        field: "country",
        title: "Country",
      }, {
        commands: ["Edit", "Delete"],
        editingCommands: ["Save", "Cancel"],
        width: '120px',
        filtering: false,
      }],
      dataSource: {
        schema: {
          model: {
            idField: 'customerNumber',
            fields: {
              customerNumber: {
                type: 'string'
              },
              customerName: {
                type: 'string'
              },
              phone: {
                type: 'number'
              },
              city: {
                type: 'string'
              },
              country: {
                type: 'string'
              }
            }
          }
        },
        transport: {
          read: {
            url: "../php/example.php",
            dataType: "text"
          },
          update: {
            url: "../php/example.php",
            dataType: "text"
          },
          create: {
            url: "../php/example.php",
            dataType: "text"
          },
          destroy: {
            url: "../php/example.php",
            dataType: "text"
          }
        },
        group: {
          groups: [
            {field: 'country'},
            {field: 'city'},
          ]
        },
        serverPaging: false,
        serverFiltering: false,
        serverSorting: false,
        serverGrouping: true,
      },
      paging: {
        pageSize: 10
      },
      sorting: {
        type: 'multiple',
      },
      filtering: true,
      editing: 'batch',
    });
  });
  
</script>