DataTables

DataTables adds several features to a wikitable. Some of these include:
* Pagination
* Search
* Filtering using search panes
* Multi-column ordering
* Hidden columns
* Complex headers
* Flexible width
* Fixed columns
* Grouped rows
* Internal scrolling
== ==
== ==
Add the datatable class to a wikitable or HTML table if using HTML5 configuration. If a table has features that can not be configured properly with HTML5 attributes, a table with a unique ID can be initialized as a DataTable in Common.js with the intended configuration; this is not recommended, as it becomes more difficult to make immediately visible changes and is not intuitive for novice editors.
When using HTML5 data-* attributes for configuration:
* camelCase attributes are rewritten with a modified syntax (data-camel-case) when used in data attributes for HTML standards.
* Attributes with interior arrays must have single quotes as the outermost container, and double quotes for interior containers. Strings, including subobject property labels, must use double quotes.
** Examples: data-column-defs='[{"targets": [0], "className": "JSobject"},{"targets": [1], "className": "data-attr"},{"targets": [3], "visible": false, "searchable": false }]' data-order='[[3, "asc"],[0, "asc"]]' data-row-group='{ "dataSrc": 3 }'
 Configuration options
Option 	HTML5 attribute 	Description 	Group
autoWidth 	data-auto-width 	Feature control DataTables' smart column width handling. 	Features
deferRender 	data-defer-render 	Feature control deferred rendering for additional speed of initialisation. 	Features
info 	data-info 	Feature control table information display field. 	Features
lengthChange 	data-length-change 	Feature control the end user's ability to change the paging display length of the table. 	Features
ordering 	data-ordering 	Feature control ordering (sorting) abilities in DataTables. 	Features
paging 	data-paging 	Enable or disable table pagination. 	Features
processing 	data-processing 	Feature control the processing indicator. 	Features
scrollX 	data-scroll-x 	Horizontal scrolling. 	Features
scrollY 	data-scroll-y 	Vertical scrolling. 	Features
searching 	data-searching 	Feature control search (filtering) abilities. 	Features
serverSide 	data-server-side 	Feature control DataTables' server-side processing mode. 	Features
stateSave 	data-state-save 	State saving - restore table state on page reload. 	Features
ajax 	data-ajax 	Load data for the table's content from an Ajax source. 	Data
ajax.data 	data-ajax 	Add or modify data submitted to the server upon an Ajax request. 	Data
ajax.dataSrc 	data-ajax 	Data property or manipulation method for table data. 	Data
data 	data-data 	Data to use as the display data for the table. 	Data
deferLoading 	data-defer-loading 	Delay the loading of server-side data until second draw 	DataTables
destroy 	data-destroy 	Destroy any existing table matching the selector and replace with the new options. 	DataTables
displayStart 	data-display-start 	Initial paging start point. 	DataTables
dom 	data-dom 	Define the table control elements to appear on the page and in what order. 	DataTables
lengthMenu 	data-length-menu 	Change the options in the page length select list. 	DataTables
order 	data-order 	Initial order (sort) to apply to the table. 	DataTables
orderCellsTop 	data-order-cells-top	Control which cell the order event handler will be applied to in a column. 	DataTables
orderClasses 	data-order-classes 	Highlight the columns being ordered in the table's body. 	DataTables
orderFixed 	data-order-fixed 	Ordering to always be applied to the table. 	DataTables
orderMulti 	data-order-multi 	Multiple column ordering ability control. 	DataTables
pageLength 	data-page-length 	Change the initial page length (number of rows per page). 	DataTables
pagingType 	data-paging-type 	Pagination button display options. 	DataTables
renderer 	data-renderer 	Display component renderer types 	DataTables
retrieve 	data-retrieve 	Retrieve an existing DataTables instance. 	DataTables
rowId 	data-row-id 	Data property name that DataTables will use to set tr element DOM IDs. 	DataTables
scrollCollapse 	data-scroll-collapse	Allow the table to reduce in height when a limited number of rows are shown. 	DataTables
search 	data-search 	Set an initial filter in DataTables and / or filtering options. 	DataTables
search.caseInsensitive 	data-search 	Control case-sensitive filtering option. 	DataTables
search.regex 	data-search 	Enable / disable escaping of regular expression characters in the search term. 	DataTables
search.search 	data-search 	Set an initial filtering condition on the table. 	DataTables
search.smart 	data-search 	Enable / disable DataTables' smart filtering. 	DataTables
searchCols 	data-search-cols 	Define an initial search for individual columns. 	DataTables
searchDelay 	data-search-delay 	Set a throttle frequency for searching. 	DataTables
stateDuration 	data-state-duration 	Saved state validity duration. 	DataTables
stripeClasses 	data-stripe-classes 	Set the zebra stripe class names for the rows in the table. 	DataTables
tabIndex 	data-tab-index 	Tab index control for keyboard navigation. 	DataTables
columnDefs 	data-column-defs 	Set column definition initialisation properties. 	Columns
columnDefs.targets 	data-column-defs 	Assign a column definition to one or more columns. 	Columns
columns 	data-columns 	Set column specific initialisation properties. 	Columns
columns.cellType 	data-columns 	Cell type to be created for a column. 	Columns
columns.className 	data-columns 	Class to assign to each cell in the column. 	Columns
columns.contentPadding 	data-columns 	Add padding to the text content used when calculating the optimal width for a table. 	Columns
columns.createdCell 	data-columns 	Cell created callback to allow DOM manipulation. 	Columns
columns.data 	data-columns 	Set the data source for the column from the rows data object / array. 	Columns
columns.defaultContent 	data-columns 	Set default, static, content for a column. 	Columns
columns.name 	data-columns 	Set a descriptive name for a column. 	Columns
columns.orderData 	data-columns 	Define multiple column ordering as the default order for a column. 	Columns
columns.orderDataType 	data-columns 	Live DOM sorting type assignment. 	Columns
columns.orderSequence 	data-columns 	Order direction application sequence. 	Columns
columns.orderable 	data-columns 	Enable or disable ordering on this column. 	Columns
columns.render 	data-columns 	Render (process) the data for use in the table. 	Columns
columns.searchable 	data-columns 	Enable or disable search on the data in this column. 	Columns
columns.title 	data-columns 	Set the column title. 	Columns
columns.type 	data-columns 	Set the column type - used for filtering and sorting string processing. 	Columns
columns.visible 	data-columns 	Enable or disable the display of this column. 	Columns
columns.width 	data-columns 	Column width assignment. 	Columns
language 	data-language 	Language configuration options for DataTables. 	i18n
language.aria 	data-language 	Language strings used for WAI-ARIA specific attributes. 	i18n
language.aria.paginate 	data-language 	WAI-ARIA labels for pagination buttons. 	i18n
language.aria.paginate.first 	data-language 	WAI-ARIA label for the first pagination button. 	i18n
language.aria.paginate.last 	data-language 	WAI-ARIA label for the last pagination button. 	i18n
language.aria.paginate.next 	data-language 	WAI-ARIA label for the next pagination button. 	i18n
language.aria.paginate.previous 	data-language 	WAI-ARIA label for the previous pagination button. 	i18n
language.aria.sortAscending 	data-language 	Language strings used for WAI-ARIA specific attributes. 	i18n
language.aria.sortDescending 	data-language 	Language strings used for WAI-ARIA specific attributes. 	i18n
language.decimal 	data-language 	Decimal place character. 	i18n
language.emptyTable 	data-language 	Table has no records string. 	i18n
language.info 	data-language 	Table summary information display string. 	i18n
language.infoEmpty 	data-language 	Table summary information string used when the table is empty of records. 	i18n
language.infoFiltered 	data-language 	Appended string to the summary information when the table is filtered. 	i18n
language.infoPostFix 	data-language 	String to append to all other summary information strings. 	i18n
language.lengthMenu 	data-language 	Page length options string. 	i18n
language.loadingRecords 	data-language 	Loading information display string - shown when Ajax loading data. 	i18n
language.paginate 	data-language 	Pagination specific language strings. 	i18n
language.paginate.first 	data-language 	Pagination 'first' button string. 	i18n
language.paginate.last 	data-language 	Pagination 'last' button string. 	i18n
language.paginate.next 	data-language 	Pagination 'next' button string. 	i18n
language.paginate.previous 	data-language 	Pagination 'previous' button string. 	i18n
language.processing 	data-language 	Processing indicator string. 	i18n
language.search 	data-language 	Search input string. 	i18n
language.searchPlaceholder 	data-language 	Search input element placeholder attribute. 	i18n
language.thousands 	data-language 	Thousands separator. 	i18n
language.url 	data-language 	Load language information from remote file. 	i18n
language.zeroRecords 	data-language 	Table empty as a result of filtering string. 	i18n
fixedColumns 	data-fixed-columns 	Enable and configure the FixedColumns extension for DataTables. 	FixedColumns
fixedColumns.heightMatch 	data-fixed-columns 	Row height matching algorithm to use. 	FixedColumns
fixedColumns.leftColumns 	data-fixed-columns 	Number of columns to fix to the left of the table. 	FixedColumns
fixedColumns.rightColumns 	data-fixed-columns 	Number of columns to fix to the right of the table. 	FixedColumns
fixedHeader 	data-fixed-header 	FixedHeader configuration object. 	FixedHeader
fixedHeader.footer 	data-fixed-header 	Enable / disable fixed footer. 	FixedHeader
fixedHeader.footerOffset 	data-fixed-header 	Offset the table's fixed footer. 	FixedHeader
fixedHeader.header 	data-fixed-header 	Enable / disable fixed header. 	FixedHeader
fixedHeader.headerOffset 	data-fixed-header 	Offset the table's fixed header. 	FixedHeader
columns.responsivePriority 	data-columns 	Set column's visibility priority. 	Responsive
responsive 	data-responsive 	Enable and configure the Responsive extension for DataTables. 	Responsive
responsive.breakpoints 	data-responsive 	Set the breakpoints for a Responsive instance. 	Responsive
responsive.details 	data-responsive 	Enable and configure the child rows shown by Responsive for collapsed tables. 	Responsive
responsive.details.display 	data-responsive 	Define how the hidden information should be displayed to the end user. 	Responsive
responsive.details.renderer 	data-responsive 	Define the renderer used to display the child rows. 	Responsive
responsive.details.target 	data-responsive 	Column / selector for child row display control when using column details type. 	Responsive
responsive.details.type 	data-responsive 	Set the child row display control type. 	Responsive
responsive.orthogonal 	data-responsive 	Set the orthogonal data request type for the hidden information display. 	Responsive
rowGroup 	data-row-group 	Enable and configure the RowGroup extension for DataTables. 	RowGroup
rowGroup.className 	data-row-group 	Set the class name to be used for the grouping rows. 	RowGroup
rowGroup.dataSrc 	data-row-group 	Set the data point to use as the grouping data source. 	RowGroup
rowGroup.emptyDataGroup 	data-row-group 	Text to show for rows which have null, undefined or empty string group data. 	RowGroup
rowGroup.enable 	data-row-group 	Provides the ability to disable row grouping at initialisation. 	RowGroup
rowGroup.endClassName 	data-row-group 	Set the class name to be used for the grouping end rows. 	RowGroup
rowGroup.endRender 	data-row-group 	Provide a function that can be used to control the data shown in the end grouping row. 	RowGroup
rowGroup.startClassName 	data-row-group 	Set the class name to be used for the grouping start rows. 	RowGroup
rowGroup.startRender 	data-row-group 	Provide a function that can be used to control the data shown in the start grouping row. 	RowGroup
button.searchPanes 	data-button 	Enable SearchPanes through a button. 	SearchPanes
columns.searchPanes 	data-columns 	Container for options for individual columns. 	SearchPanes
columns.searchPanes.className 	data-columns 	Add a custom class name to a pane. 	SearchPanes
columns.searchPanes.combiner 	data-columns 	Set the type of logic to be implemented on the pane. 	SearchPanes
columns.searchPanes.controls 	data-columns 	Hide the Control buttons and disable searching in the pane of a specific column. 	SearchPanes
columns.searchPanes.dtOpts 	data-columns 	Define properties of the DataTables being used for an individual pane. 	SearchPanes
columns.searchPanes.emptyMessage 	data-columns 	Set custom empty messages for specific panes. 	SearchPanes
columns.searchPanes.header 	data-columns 	Set the title of the SearchPane. 	SearchPanes
columns.searchPanes.hideCount 	data-columns 	Deprecated. Hide the count column in the pane of a specific column. 	SearchPanes
columns.searchPanes.name 	data-columns 	Set the name of the SearchPane. 	SearchPanes
columns.searchPanes.options 	data-columns 	Define custom search options. 	SearchPanes
columns.searchPanes.orderable 	data-columns 	Hide the ordering buttons in the pane of a specific column. 	SearchPanes
columns.searchPanes.orthogonal 	data-columns 	Set values of orthogonal data for rendering functions. 	SearchPanes
columns.searchPanes.preSelect 	data-columns 	Pre-selected options in a pane. 	SearchPanes
columns.searchPanes.show 	data-columns 	Force Panes to hide or show. 	SearchPanes
columns.searchPanes.threshold 	data-columns 	Set the minimum number of unique values needed in a specific column to display that pane. 	SearchPanes
columns.searchPanes.viewCount 	data-columns 	Hide the count column in the pane of a specific column. 	SearchPanes
language.searchPanes 	data-language 	Container for options for language. 	SearchPanes
searchPanes 	data-search-panes 	Enable Search Panes. 	SearchPanes
searchPanes.cascadePanes 	data-search-panes 	Allow panes to cascade under selection. 	SearchPanes
searchPanes.clear 	data-search-panes 	Disable buttons to allow quick clearing of selections in panes. 	SearchPanes
searchPanes.columns 	data-search-panes 	Select which columns should be considered when displaying panes. 	SearchPanes
searchPanes.controls 	data-search-panes 	Hide the control buttons and disable searching in all panes. 	SearchPanes
searchPanes.dtOpts 	data-search-panes 	Define properties of the DataTables being used as Panes. 	SearchPanes
searchPanes.emptyMessage 	data-search-panes 	Deprecated. Set custom empty message. 	SearchPanes
searchPanes.filterChanged 	data-search-panes 	Function to update title text when selections are made. 	SearchPanes
searchPanes.hideCount 	data-search-panes 	Deprecated. Hide the count column in all panes. 	SearchPanes
searchPanes.i18n 	data-search-panes 	Container for options for language. 	SearchPanes
searchPanes.i18n.clearMessage 	data-search-panes 	Set the message to be displayed in the Clear button. 	SearchPanes
searchPanes.i18n.collapse 	data-search-panes 	Set the message to be displayed in the SearchPanes Button. 	SearchPanes
searchPanes.i18n.count 	data-search-panes 	Set the message to be displayed in the count column when not searching. 	SearchPanes
searchPanes.i18n.countFiltered 	data-search-panes 	Set the message to be displayed in the count column when searching. 	SearchPanes
searchPanes.i18n.emptyMessage 	data-search-panes 	Add internationalisation to the empty message displayed as a pane option. 	SearchPanes
searchPanes.i18n.emptyPanes 	data-search-panes 	Add internationalisation to the message shown when no panes are displayed. 	SearchPanes
searchPanes.i18n.loadMessage 	data-search-panes 	Add internationalisation to the message shown when the panes are loading. 	SearchPanes
searchPanes.i18n.title 	data-search-panes 	Add internationalisation to the title showing how many panes are selected. 	SearchPanes
searchPanes.layout 	data-search-panes 	Set the layout of how the panes are displayed on the page. 	SearchPanes
searchPanes.order 	data-search-panes 	Set the order of the Panes. 	SearchPanes
searchPanes.orderable 	data-search-panes 	Hide the ordering buttons in all panes. 	SearchPanes
searchPanes.panes 	data-search-panes 	Define custom panes to filter across all columns. 	SearchPanes
searchPanes.panes.className 	data-search-panes 	Add a custom class for a custom pane. 	SearchPanes
searchPanes.panes.dtOpts 	data-search-panes 	Define the DataTables options for a custom pane. 	SearchPanes
searchPanes.panes.header 	data-search-panes 	Define the header for custom panes. 	SearchPanes
searchPanes.panes.options 	data-search-panes 	Define the options for custom panes. 	SearchPanes
searchPanes.panes.options.className	data-search-panes 	Add classes to specific options of a custom pane. 	SearchPanes
searchPanes.panes.options.label 	data-search-panes 	Define the label for an option of a custom pane. 	SearchPanes
searchPanes.panes.options.value 	data-search-panes 	Define the value for an option of a custom pane. 	SearchPanes
searchPanes.panes.preSelect 	data-search-panes 	Define any preSelections for the custom panes. 	SearchPanes
searchPanes.threshold 	data-search-panes 	Set the minimum ratio of unique values to total values needed in a column to display it's pane.	SearchPanes
searchPanes.viewCount 	data-search-panes 	Show the count column in all panes. 	SearchPanes
searchPanes.viewTotal 	data-search-panes 	Update the count column when searching to show visible count. 	SearchPanes
language.select 	data-language 	Container object for language strings used by Select. 	Select
language.select.cells 	data-language 	Table information summary string for the number of cells selected. 	Select
language.select.columns 	data-language 	Table information summary string for the number of columns selected. 	Select
language.select.rows 	data-language 	Table information summary string for the number of rows selected. 	Select
select 	data-select 	Select configuration object. 	Select
select.blurable 	data-select 	Indicate if the selected items will be removed when clicking outside of the table. 	Select
select.className 	data-select 	Set the class name that will be applied to selected items. 	Select
select.info 	data-select 	Enable / disable the display for item selection information in the table summary. 	Select
select.items 	data-select 	Set which table items to select (rows, columns or cells). 	Select
select.selector 	data-select 	Set the element selector used for mouse event capture to select items. 	Select
select.style 	data-select 	Set the selection style for end user interaction with the table. 	Select
select.toggleable 	data-select 	Disable the deselection of selected rows when clicked. 	Select
== Example ==
Here are some example configurations:
Links to examples are provided as placeholders until further examples can be written into this page.
=== Basic functions and layout ===
==== Paging ====
* Disable paging
* Page length
==== Sorting ====
* Default sort columns
* Sorting by multiple columns
==== Columns and headers ====
* Hiding columns
* Column and row header groups
* Complex headers with column visibility
==== Adding child rows ====
* Examples
=== Data with AJAX sources ===
: Note: This feature is not currently effective on FandomMobile.
* Examples
=== FixedColumns ===
FixedColumns "freezes" in place the left most columns in a scrolling DataTable, to provide a guide to the end user (for example an index column).
* Examples
=== Responsive ===
: Note: This feature is not currently effective on FandomMobile.
Responsive will automatically optimise the table's layout for different screen sizes through the dynamic column visibility control, making your tables useful on desktop and mobile screens.
* Examples
=== RowGroup ===
RowGroup provides a simple API to visually grouped sets of data in a DataTable. This grouping, which can be dynamically controlled with the API, can be used to provide customised aggregation of data, letting users quickly view a summary of like data.
* Examples
=== Scroller ===
A virtual renderer for DataTables, allowing the table to look like it scrolls for the full data set, but actually only drawing the rows required for the current display, for fast operation.
* Examples
=== SearchPanes ===
SearchPanes adds panes to the DataTable with the capability to search the DataTable by selecting rows in the panes. This is very useful when it comes to adding a more accessible searching feature and custom search capabilities.
* Examples
=== Select ===
Select adds item selection capabilities to a DataTable. Items can be rows, columns or cells, which can be selected independently, or together. Item selection can be particularly useful in interactive tables where users can perform some action on the table such as editing.
* Examples