DataTables — Views UI

Views UI DataTables

Views UI components for the DataTables library.

To allow tables to have box-shadows and scroll when screen sizes are smaller, we’re modifying the default DataTables layout. Use the following code before initialising DataTables to set the layout for all instances:

$.extend( true, $.fn.dataTable.defaults, {
    'dom': '<"dataTables_ui dataTables_ui--top"flp><"dataTables_table-wrapper"t><"dataTables_ui"ip>'
});

Data Table using DataTables

First Name	Last Name	Column Title	Column Title	Column Title
Bill	Stuart	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry
John	Jones	Field Entry	Field Entry	Field Entry
Jeff	Jeffries	Field Entry	Field Entry	Field Entry
Frank	Frankinson	Field Entry	Field Entry	Field Entry
George	Stevenson	Field Entry	Field Entry	Field Entry
Harry	Grimes	Field Entry	Field Entry	Field Entry
Imogen	Smith	Field Entry	Field Entry	Field Entry
Joseph	Walker	Field Entry	Field Entry	Field Entry
Kevin	Woodman	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry