Home

What is it?

A JavaScript data grid designed specifically for data manipulation in database applications such as master details forms.

---

Dependency

No dependency

---

myGrid.getChanges(true,true,true);
 
output:
 [{"dml":"update","line_id":32,"product_id":3002,"product_name":"Tubular Mortice latch (L)170mm","price":6.8,"quantity":3,"disc":0,"tax":true,"total":20.4}]

myGrid.getChanges(false,false,true);

output:
 [{"dml":"update","line_id":32,"tax":true}]

Installation

    <link rel="stylesheet" href="dist/css/selim.data-grid-1.0.0.css">
    <script src="dist/js/selim.data-grid-1.0.1.js"></script>

Quick start

1- Define metadata and grid options

        let columns = [{
                name: 'product_id',     
                label: 'Product Code',  
                type: 'number',  // Data type is required int float integer all are type number
                width: '9em',
                background: '#d3d3d345'
            }, {
                name: 'product_name',
                label: 'Product Name',
                type: 'text',
                single_line: true,
                width: '20em'
            }, {
                name: 'price',
                label: 'Unit Price',
                type: 'number',
                width: '7em',
                step: 0.10

            }, {
                name: 'quantity',
                label: 'Quantity',
                type: 'number',
                width: '7em'

            }, {
                label: 'Total',
                name: 'total',
                type: 'number',
                computed: true,
                width: '7em'
            }
        ];


let data = [];

2- Create dataGrid instance

        let myGrid = new selim.DataGrid(columns, data);
        myGrid.mount(document.body);

Click on the grid to activate it.

Now press shift key + i to insert new record.

dbleclick to edit or hit enter on activated cell

Computed columns

Create call back to calculate Total

      /**
      * @Override
      **/
       myGrid.callBack['post-edit'] = (value, column, dataRow) => {
       
            dataRow.total = dataRow.price * dataRow.quantity;
            
        };
        

Let's pass a row to the grid constructor,

We can provide ordered array that matchs columns metadata

 let data = [
 [1002, 'My favourite black tea', 23, 45.5]
 ];
 

Or provide each row as object so we don't worry about values order

 let data = [{
           product_id: 1002,
           product_name: 'My favourite black tea',
           price: 23,
           quantity: 45.5
       },....];

Note that we did not provide value for total column because we defined it as a computed column

Now if we change the price or quantity total will be calculated according to the post-edit event.

But the total was not calculated when we populated the grid? we can add post-insert callback to have it done

      /**
      * @Override
      **/
       myGrid.callBack['post-insert'] = (dataRow) => {
       
            dataRow.total = dataRow.price * dataRow.quantity;
            
        };
        

How about formating data? just define locale and locale options! for more details on Intl Object

             {
                name: 'price',
                label: 'Unit Price',
                type: 'number',
                width: '7em',
                step: 0.10,
                locale: 'en-GB',
                options: { style: 'currency', currency: 'GBP', minimumFractionDigits: 2 }
            }

To remove grouping product code, just add locale options

          {
                name: 'product_id',     
                label: 'Product Code',  
                type: 'number',
                width: '9em',
                background: '#d3d3d345',
                options: { useGrouping: false }
            }