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
Installation
Configuration
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 }'
- Examples:
| 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
Sorting
Columns and headers
Adding child rows
Data with AJAX sources
- Note: This feature is not currently effective on FandomMobile.
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).
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.
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.
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.
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.
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.
Text above can be found here (edit)