Minimal Grid

author(s): Sebastian Bochan

by stitot

HTML

<script src="http://localhost:3031/dashboards/datagrid.js"></script>

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

CSS

@import url("http://localhost:3031/dashboards/css/datagrid.css");

@media (prefers-color-scheme: dark) {
    body {
        background-color: #292929;
        color: #eee;
    }
}

JavaScript

/* CURRENTLY: */

Grid.grid('container', {
    dataTable: {
        columns: {
            product: ['Apples', 'Pears', 'Plums', 'Bananas'],
            weight: [100, 40, 0.5, 200],
            price: [1.5, 2.53, 5, 4.5]
        }
    },
    columns: [{
    	id: 'product',
        renderer: {
        	type: 'textInput'
        },
    }, {
    	id: 'weight',
        cells: {
        	editable: true
        },
        renderer: {
        	type: 'textInput'
        }
    }, {
    	id: 'price',
      	renderer: {
        	type: 'textInput'
        },
        cells: {
        	//editable: true
        },
        editMode: {
        	enabled: true,
          renderer: {
            type: 'checkbox'
          },
        }
    }]
});



/* ALTERNATIVELY: */
/*
Grid.grid('container', {
    dataTable: {
        columns: {
            product: ['Apples', 'Pears', 'Plums', 'Bananas'],
            weight: [100, 40, 0.5, 200],
            price: [1.5, 2.53, 5, 4.5]
        }
    },
    columns: [{
    	id: 'product',
        renderer: {
        	type: 'textInput',
            disabled: true
        }
    }, {
    	id: 'weight',
        renderer: {
        	type: 'textInput'
        }
    }, {
    	id: 'price',
        editMode: {
        	enabled: true
        }
    }]
});
*/