sm-table

Html - Campos por defecto

Js

Resultado

Html - Campos personalizados

Js

import { SM_Table } from './sm-table/sm_table.min.js';

const nwTable_Users_minimal_and_titles = new SM_Table ({
  sm_table_ref_container_elm: document.querySelector('#sm_C_Users_minimal_and_titles'),
  sm_table_data_set: data.users || [], // data (objects array) de algún lugar
  sm_table_structured: true,
  sm_table_tooltip: false,
  sm_table_columns: [
  { title_cnt: 'ID', cell_cnt: '$-{id}' },
  { title_cnt: 'NAME', cell_cnt: '$-{name}' },
  { title_cnt: 'USERNAME', cell_cnt: '$-{username}' },
  { title_cnt: 'EMAIL', cell_cnt: '$-{email}' },
  { title_cnt: 'ADDRESS: STREET & SUITE', cell_cnt: '$-{address.street} - $-{address.suite}' },
  { title_cnt: 'CITY', cell_cnt: '$-{address.city}' },
  { title_cnt: 'LOCALIZATION', cell_cnt: '($-{address.geo.lat}, $-{address.geo.lng})' },
  { title_cnt: 'PHONE', cell_cnt: '$-{phone}' },
  { title_cnt: 'WEBSITE', cell_cnt: '$-{website}' },
  { title_cnt: 'COMPANY', cell_cnt: '$-{company.name}' },
]
});

nwTable_Users_minimal_and_titles.fnc_smT_TableConstructor();

Resultado

Html - Funciones de transforamción

Js

Resultado

Html - Funciones de construcción

Js

import { SM_Table, fn_dataInterpoledConstructor } from './sm-table/sm_table.min.js';

const fn_strUpper_Prueba = (str) => str?.toString().toUpperCase();
const fn_addZero_Prueba = (str) => str + '.00';

const nwTable_Users = new SM_Table ({
  sm_table_ref_container_elm: document.querySelector('#sm_C_Users'),
  sm_table_data_set: data.data_users || [], // data (objects array) de algún lugar
  sm_table_structured: true,
  sm_table_gtc_format: 'repeat(calc($-{n_cols} - 1), 1fr) 35px',
  sm_table_title_class: 'mdl-cell-dp',
  sm_table_cell_class: 'mdl-cell-dp mdl-txt-break',
  sm_table_cell_elm_datas: [ { data_name: 'id', val_ref: '$-{id}' } ],
  sm_table_cell_fns: { username_upper: (obj) => fn_strUpper_Prueba(obj['username']), id_frmt: (obj) => fn_addZero_Prueba(obj['id']) },
  sm_table_columns: [
  /* Id */ { title_cnt: 'ID', cell_cnt: '$-{id}' },
  /* Id frmt */ { title_cnt: 'ID FRMT', cell_cnt: '$-{id_frmt}' },
  /* Username */ { title_cnt: 'USERNAME', cell_cnt: '$-{username_upper}' },
  /* Nombre */ { title_cnt: 'NOMBRE', cell_cnt: '$-{name}' },
  /* Ciudad */ { title_cnt: 'CIUDAD', cell_cnt: '$-{address.city}', 
    cell_elm_datas: fn_dataInterpoledConstructor([ 
      { data_name: 'id', val_ref: '$-{id}' }, 
      { data_name: 'geolocalization', val_ref: '($-{address.geo.lat})-($-{address.geo.lng})' } 
    ]) 
  },
  /* Calle y Apt */ { title_cnt: 'CALLE Y APTO', cell_cnt: '$-{address.street} - $-{address.suite}' },
  /* Email */ { title_cnt: 'EMAIL', cell_cnt: '$-{email}' },
  /* Icons */ {
  title_cnt: '<svg class="icon sm-table-cell-icon-obj sm-table-cell-icon-obj-hover"><use href="/icons/total.svg#check_sweep_full" /></svg><svg class="icon sm-table-cell-icon-obj"><use href="/icons/total.svg#check_sweep" /></svg>', 
  cell_cnt: '<svg class="icon sm-table-cell-icon-obj sm-table-cell-icon-obj-hover"><use href="/icons/total.svg#circle_done" /></svg><svg class="icon sm-table-cell-icon-obj"><use href="/icons/total.svg#circle" /></svg>' ,
  title_class: 'mdl-cell-dp mdl-center sm-table-cell-icon',
  cell_class: 'mdl-cell-dp mdl-center sm-table-cell-icon',
} 
],
});

nwTable_Users.fnc_smT_TableConstructor();

Resultado

Html - Sub-Tablas, clases y estilos

Js

import { SM_Table } from './sm-table/sm_table.min.js';

nwTable_Users_advncd.fnc_smT_TableConstructor();

// Subtabla albumes de usuarios
  const nwSubTable_Albums_Users_advncd = new SM_Table ({
    sm_table_ref_container_elm: document.querySelector('#sm_C_Users_2__T_Users_2'),
    sm_table_name: 'U2_Albums',
    sm_table_data_set: data.data_albums || [],                
    sm_table_structured: true,
    sm_table_title_class: 'sm-table-default-cell',
    sm_table_cell_class: 'sm-table-default-cell mdl-txt-break',
    sm_table_columns: [
      { title_cnt: 'ID', cell_cnt: '$-{id}', title_class: 'sm-table-row-title sm-table-default-cell', cell_class: 'mdl-txt-break sm-table-row-title sm-table-default-cell' },
      { title_cnt: 'ID USUARIO', cell_cnt: '$-{userId}', hide_at: 500 },
      { title_cnt: 'TÍTULO ALBUM', cell_cnt: '$-{title}' },
    ],
    sm_table_data_ref_prv_content: ['$-{userId}'],
    sm_table_has_subtables: true,
    sm_table_data_ref_nxt_content: ['$-{id}'],
  });

nwSubTable_Albums_Users_advncd.fnc_smT_SubTableConstructor();

// Subtabla posts de usuarios
  const nwSubTable_Posts_Users_advncd = new SM_Table ({
    sm_table_ref_container_elm: document.querySelector('#sm_C_Users_2__T_Users_2'),
    sm_table_data_set: data.data_posts || [],                
    sm_table_structured: true,
    sm_table_title_class: 'sm-table-default-cell',
    sm_table_cell_class: 'sm-table-default-cell',
    sm_table_gtc_format: 'repeat(calc($-{n_cols} - 2), auto) 1fr 2fr',
    sm_table_columns: [
      { title_cnt: 'ID', cell_cnt: '$-{id}' },
      { title_cnt: 'ID USUARIO', cell_cnt: '$-{userId}', hide_at: 600 },
      { title_cnt: 'TÍTULO POST', cell_cnt: '$-{title}', width: '1fr' },
      { title_cnt: 'CONTENIDO', cell_cnt: '$-{body}', width: '2fr' },
    ],
    sm_table_data_ref_prv_content: ['$-{userId}'],
    sm_table_has_subtables: true,
    sm_table_data_ref_nxt_content: ['$-{id}'],
  });

nwSubTable_Posts_Users_advncd.fnc_smT_SubTableConstructor();

Resultado

Html - Estructura y estilos dinámicos

Js

import { SM_Table } from './sm-table/sm_table.min.js';

// Estructura y estilos dinámicos por break-points [900, 700, 550, 400] (screen-width)

nwTable_Users_advncd_DTS.fnc_smT_TableConstructor()

// Subtabla albumes de usuarios
  const nwSubTable_Albums_Users_advncd_DTS = new SM_Table ({
    sm_table_ref_container_elm: document.querySelector('#sm_C_Users_DTS__T_Usuarios_DTS'),
    sm_table_data_set: local_data.data_albums || [],                
    sm_table_structured: true,
    sm_table_title_class: 'sm-table-default-cell',
    sm_table_cell_class: 'sm-table-default-cell mdl-txt-break',
    sm_table_columns: [
      { title_cnt: 'ID', cell_cnt: '$-{id}', title_class: 'sm-table-row-title sm-table-default-cell', cell_class: 'mdl-txt-break sm-table-row-title sm-table-default-cell' },
      { title_cnt: 'ID USUARIO', cell_cnt: '$-{userId}', hide_at: 600 },
      { title_cnt: 'TÍTULO ALBUM', cell_cnt: '$-{title}' },
    ],
    sm_table_data_ref_prv_content: ['$-{userId}'],
    sm_table_has_subtables: true,
    sm_table_data_ref_nxt_content: ['$-{id}'],
    sm_table_base_style: [
      { class: '', target: 'table', styles: 'background-color: #eeeeee; color: #222831;' }, 
      { class: '', target: 'cells_title_col', styles: 'background-color: #ffd369; color: #393e46;' }, 
      { class: '', target: 'cells_title_row', styles: 'background-color: #ffd369; color: #393e46;' }
    ],
  })

nwSubTable_Albums_Users_advncd_DTS.fnc_smT_SubTableConstructor();

Resultado

SM-Table