Biblioteca de cuadrícula de datos de estilo de hoja de cálculo editable-simple-tabla de datos

Vista prévia

Descripción

Una biblioteca de tablas de datos sin dependencia le ayuda a representar una cuadrícula de datos dinámica, editable y de estilo de hoja de cálculo con el soporte de edición en línea, agregar o quitar filas, carga diferida de datos y mucho más.

Funcionamiento

Cargue el CSS JavaScript y el skin predeterminado en su archivo HTML.

<link rel="stylesheet" href="/src/skins/default.css">
<script src="/src/index.js"></script>

Cree un contenedor para la cuadrícula de datos.

<div id="example"></div>

Inicializar la cuadrícula de datos.

const myDataGrid = new SimpleDataTable(document.querySelector('#example'));

Cargue datos tabulares en la cuadrícula de datos.

myDataGrid.load([

{


column1: 'Cell 1',


column2: 'Cell 2',


// more columns here

},

{


column1: 'Cell 1 (row 2)',


column2: 'Cell 2 (row 2)',


// more columns here

}
]);

Represente la cuadrícula de datos en el elemento contenedor que acaba de crear.

myDataGrid.render()

Opciones posibles para personalizar la cuadrícula de datos.

const myDataGrid = new SimpleDataTable(document.querySelector('#example'),{




// lable text for add button



addButtonLabel: '✚',




// default column prefix



defaultColumnPrefix: 'column',




// default number of columns



defaultColumnNumber: 3




});

Controladores de eventos.

myDataGrid.on(SimpleDataTable.EVENTS.UPDATE, () => {

// on update
});

myDataGrid.on(SimpleDataTable.EVENTS.ROW_ADDED, () => {

// after a new row is added
});

myDataGrid.on(SimpleDataTable.EVENTS.ROW_REMOVED, () => {

// after a row is removed
});