Data table

El table_widget es un componente que se utiliza para mostrar datos tabulares. Las características incluyen clasificación, búsqueda, paginación.

Playground

Mostrar 10251005001.500 registros

Buscar:

	Nombre	Rut	Cargo	División
	Marco Antonio	19.191.199-9	Analista BI	Comercial
	Kevin Ops	19.111.777-1	SRE	Infraestructura
	Lorena Antonella	13.133.133-3	Producto UX	Producto
	Camila Feliz	14.123.123-3	Producto UX	Producto
	Gabriel Jesus	1.133.133-3	Producto UX	Producto
	James Bond	2.211.113-2	Producto UX	Producto

• Anterior
• 1
• 2
• 3
• Siguiente

Mostrar fila inputs

Mostrar columna checkbox

Ocultar header y paginador

Ruby

<%= table_widget array filterable : true   do |t|
  t.column :check do |col|
    col.title = ''
    col.filter = ''
    col.header_attributes = { 'data-orderable': false, "data-data": "check", "data-filterable": false, "data-searchable": false }
      col.content_title do
        content_tag(:input, "", type: :checkbox)
      end
  end
  t.column :Nombre do |c|
      c.value do |array|
          array, :nombre, array.nombre
      end
  end
  t.column :Rut do |c|
      c.value do |array|
          array, :numero, array.numero
      end
  end

  t.column :Cargo do |c|
      c.value do |array|
          array, :numero, array.numero
      end
  end

  t.column :División do |c|
      c.value do |array|
          array, :numero, array.numero
      end
  end
end %>
                

Html

  <div class="col-md-12">
    <div class="row mt-3">
      {/* Filtro izquierda superior */}
      <div class="col-sm-12 col-md-6">
        <div class="dataTables_length" id="employees_activos_length">
            <label style="font-weight: 400; text-align: left; white-space: nowrap;"}}>
                Mostrar
                <select
                    name="employees_activos_length"
                    aria-controls="employees_activos"
                    class="custom-select custom-select-sm form-control form-control-sm"
                >
                    <option value="10">Insertar opciones de filtrado</option>
                </select>
                registros
            </label>
        </div>
      </div>
      {/* Filtro der */}
      <div class="col-sm-12 col-md-6">
        <div class="d-flex justify-content-end">
          <div id="employees_activos_filter" class="dataTables_filter" style="width:60%;">
              <label class="d-flex align-items-center">
                  Buscar:
                  <input
                      type="search"
                      class="form-control form-control-sm ml-3"
                      placeholder=""
                      aria-controls="employees_activos"
                      id="search-input"
                  />
              </label>
          </div>
        </div>
      </div>
    </div>
    
    {/* TABLA */}
    <table class="table table-striped table-bordered dataTable mt-4" id="table-main">
      <thead>
        <tr>
          <th style="width:10px;">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheckAll"}/>
              <label class="custom-control-label" htmlFor="customCheckAll"></label>
            </div>
          </th>
          <th style="width:155px;">Nombre</th>
          <th style="width:155px;">Rut</th>
          <th style="width:155px;">Cargo</th>
          <th style="width:155px;">División</th>
        </tr>
      </thead>
      <tbody>
        {/* DATA PRUEBA */} 
        <tr id="input-row">
        <td>
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="customCheck0"/>
          <label class="custom-control-label" htmlFor="customCheck0"></label>
        </div>
      </td>
        <td>
          <input
            type="search"
            class="form-control form-control-sm"
            placeholder=""
            aria-controls="control-nombre"
            id="search-input"
          />
        </td>
        <td>
          <input
            type="search"
            class="form-control form-control-sm"
            placeholder=""
            aria-controls="control-rut"
            id="search-input"
          />
        </td>
        <td>
          <input
            type="search"
            class="form-control form-control-sm"
            placeholder=""
            aria-controls="control-cargo"
            id="search-input"
          />
        </td>
        <td>
          <input
            type="search"
            class="form-control form-control-sm"
            placeholder=""
            aria-controls="control-division"
            id="search-input"
          />
        </td>
          </tr>
        
        <tr>
        <td>
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="customCheck1"/>
            <label class="custom-control-label" htmlFor="customCheck1"></label>
          </div>
        </td>
          <td>Marco Antonio</td>
          <td>19.191.199-9</td>
          <td>Analista BI</td>
          <td>Comercial</td>
        </tr>
      </tbody>
    </table> 
    {/* PAGINATOR TABLE */}
    <div class="dataTables_paginate paging_simple_numbers d-flex justify-content-end pt-3" id="datatable_employees_activos_paginate">
      <ul class="pagination">
          <li class="paginate_button page-item previous disabled" id="datatable_employees_activos_previous">
            <a href="#" aria-controls="datatable_employees_activos" data-dt-idx="0" tab-index="0" class="page-link">
                Anterior
            </a>
          </li>
          <li class="paginate_button page-item active">
              <a href="#" aria-controls="datatable_employees_activos" data-dt-idx="1" tab-index="0" class="page-link">
                  1
              </a>
          </li>
          <li class="paginate_button page-item next" id="datatable_employees_activos_next">
            <a href="#" aria-controls="datatable_employees_activos" data-dt-idx="8" tab-index="0" class="page-link">
              Siguiente
            </a>
          </li>
      </ul>
    </div>
    
</div>
                

Lista de parámetros

Parámetro

Tipo

Detalle

columns	Array "column"	Array donde identifico nombre de la columna
models	Enumerable
hidden_models	Hash	disponible para tablas que no sean datatables
table_options	Hash	Opciones al table
show_footer	Boolean	Mostrar o no el footer
sortable_url	String	url filtrable
collapsed_class	String	clase del collapse
visible_class	String	Clase visible del table
row_attributes	Hash	Atributos del row
add_sortable_url	String	Para agregar una url filtrable
empty_list_message	String	Mensaje para cuando el table esta vacío
super_headers	title: String, colspan: Integer	Para implementar super headers
filterable	Boolean	Agrega fila con inputs de filtro
datatable	Boolean	Por defecto esta en true, muestra u oculta el header y el paginador

Anatomía

1. Header row

Contiene el título y el header de la tabla.

2. Input row [opcional]

Contiene un campo de input.

3. Rows

Filas de contenido diverso.

4. Paginator

Paginación de la tabla.

5. Resultados

Muestra los resultados totales.

6. Container

Contenedor, superficie de la tabla.

7. Input search

Input de búsqueda de resultados.

8. Row checkbox

Columna de checkbox de selección múltiple.

---

Pagination

Al usar datatable: true dentro del table_widget, el paginador se genera por si solo.