lidatatable
Renderizador de arrays a tablas HTML, Siempre
Lidatatable es una librería constructora de tablas HTML a base de un arreglo JS(este debe ser alcanzable en su contexto), esta se implementa por medio de la etiqueta <data-table>
en lugar de la etiqueta <table>
,
renderizando las respectivas columnas invocadas por medio de la expresión reservada: {{variableDefinida.particularProperty}}
Lidatatable es una librería la cual renderiza arreglos JS(este debe ser alcanzable en su contexto) a una tabla HTML.
Installation
npm i lidatatable
Usage
In the HTML vainilla
Invocación de la librería a nuestro contexto
<script type="module">
import LibDataTable from "./node_modules/lidatatable/LibDataTable.js";
new LibDataTable();
</script>
Ahora veamos su implementación, para ello serán dos ambientes nuestro JS y HTML
class cualquierClase {
constructor() {
this.data = [
{lenguaje : 'java', estado : false},
{lenguaje : 'php', estado : true}
];
}
process(caso, lenguaje) {
switch (caso){
case 1:
console.log('Esta es la columna 1, lenguaje: '+lenguaje);
break;
case 2:
console.log('Esta es la columna 2, lenguaje: '+lenguaje);
break;
case 3:
console.log('Esta es la columna 3, lenguaje: '+lenguaje);
break;
}
return '';
}
}
const nuestroObjeto = new cualquierClase();
console.log(nuestroObjeto.data);
//la propiedad data es quien contiene nuestro array que desamos ver en una table HTML
Ahora miremos la parte en HTML
<data-table emptyMessage="No hay datos" value="nuestroObjeto.data" var="item" paginator="true">
<!-- en trElement especificamos como queremos que se pinten nuestras filas adicionan cualquier atributo de una <tr></tr> -->
<!-- en el cuerpo de nuestra tabla por medio de los corchetes {{}} podemos invocar nuestra variable especificada en var="" y cualquier otra variable externa -->
<trElement class="{{nuestroObjeto.process(1, item.lenguaje, 'este es un string quemado')}}-{{item.name}}"></trElement>
<data-column headerText="Lenguaje">
<label>
Nombre: {{item.lenguaje}}
</label>
</data-column>
<data-column headerText="Estado" class="{{item.estado ? 'desactive' : 'active'}}">
<label>
Estado: {{item.estado}}
</label>
</data-column>
<data-column headerText="Tercera columna">
Opciones
</data-column>
</data-table>
- Type some Markdown on the left
- See HTML in the right
- ✨Magic ✨
License
ISC
Free Software, Hell Yeah!