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!