Necesitas agregar 2 archivos a tu página web para poder utilizar ttable

CSS: ttable.css

JS: ttable.js

Recomiendo agregarlos antes de tus scripts donde utilices la librería para evitar problemas de carga y referencias.

Para utilizar ttable, se tiene que hacer referencia al objeto global de la librería, el cual tiene los métodos para su funcionamiento.

Objeto global con funcionalidad "ttable"

• fnInit

  Este método recibe los parámetros para inicializar la tabla

  Ejemplo de parámetros:

  
  {
    id: "example03",
    containerClassList: ["example03"],
    icons: {
      expandRow: `<div>${icon_right}</div>`,
      closeRow: `<div>${icon_down}</div>`,
      expandCol: `<div>${icon_right}</div>`,
      closeCol: `<div>${icon_down}</div>`,
    },
    dataList: usuarioList,
    columnDefList: columnDefList,
    textNoData: "<h1>Sin información</h1>",
    statusRowsInBody: 10
  }
  
  

  Parámetros:

  • id: string

    Este parámetro es el ID de la etiqueta <table id="tu-id"/>

  • containerClassList: array[string]

    Estas serán las clases extras que quieras agregar en el "contenedor" de la tabla

    El contenedor principal de la tabla lleva la clase "t-table-container", y para agregar selectores separados entre cada contenedor, puedes agregar estas clases con dicho parámetro

  • icons: object

    Aquí se recibe un objeto con los 4 iconos que se mostraran en los botones para expandir y contraer los renglones con las columnas ocultas

    La estructura de este objeto es la siguiente:

    
    {
      expandRow: "⭕",
      closeRow: "⛔",
      expandCol: "⭕",
      closeCol: "⛔",
    }
    
    

    Las propiedades "expandRow" y "closeRow", hacen referencia al contenido de los botones en cada renglón del "tbody" en la tabla

    Y "expandCol" y "closeCol", hacen referencia al contenido del botón en "thead"

  • dataList: array[object]

    Aquí es donde agregaras tu arreglo de objetos que deseas mostrar en la tabla

    Recuerda que puedes acceder a sus propiedades en "columnDefList"

  • columnDefList: array[object]

    En este parámetro se recibe un arreglo con las definiciones para cada columna que tendrá la tabla

    Estructura de los objetos para definir columnas:

    
    {
      // Obligatorios
      th: "Columna 01",
      tdRender: function (item, index_row, index_col) {
        return (index_row + 1) + ": " + item.name + ": " + item.name.length;
      },
    
      // Opcionales
      width: "50%",
      minWidth: "20ch",
      thClasslist: ["col-01-th"],
      tdClassList: ["col-01-td"],
    }
    
    

  • textNoData: string

    Este es el contenido que se mostrara en el caso de que "dataList" no tenga elementos

  • statusRowsInBody: number[int]

    Aquí se indica el número de "renglones" que se utilizaran para mostrar el contenido de los estatus

• fnSetStatus

  Este método recibe los parámetros para cambiar el estatus de la tabla

  Ejemplo de parámetros:

  
  { 
    id: "example02", 
    text: `
      <div>
        <h1>Otro estatus</h1>
        <h3>con diferente contenido</h3>
        <p>texto</p>
      </div>
    ` 
  }
  
  

  Parámetros:

  • id: string

    Este parámetro es el ID de la etiqueta <table id="tu-id"/>

  • text: string

    Contenido que se mostrara en el estatus

• fnUpdate

  Con este método puedes actualizar la lista de objetos que se muestran en la tabla

  Ejemplo de parámetros:

  
  

  01: Puedes asignar un arreglo vacío y se mostrará el estatus de "textNoData"

  { 
    id: "example03", 
    dataList: []
  }
  
  

  02: Puedes cambiar el numero de renglones que se utilizan para mostrar el estatus de la tabla

  {
    id: "example03",
    statusRowsInBody: 3
  }
  
  

  03: Los objetos del arreglo que se asigna en "dataList" deben de tener las propiedades que se utilizan de "item" en "tdRender" desde "columnDefList"

  {
    id: "example03",
    dataList: usuarioList,
  }
  
  

  Parámetros:

  • id: string

    Este parámetro es el ID de la etiqueta <table id="tu-id"/>

  • dataList: array[object]

    Datos nuevos que quieres mostrar en la tabla

    También puedes pasar un arreglo vacío y mostrará el contenido de "textNoData"

  • statusRowsInBody: number

    Aquí puedes cambiar el número de renglones que se utilizan para mostrar el contenido de "fnSetStatus()"