Options
DataTables and its extensions are extremely configurable libraries and almost every aspect of the enhancements they make to HTML tables can be customised. Features can be enabled, disabled or customised to meet your exact needs for your table implementations. Customisation of these options are performed by defining options in the new DataTable()
constructor (or $().DataTable()
if you are using jQuery based code) - for example, in the following code the scrollY
and paging
options are used to enable scrolling and disable pagination:
new DataTable('#myTable', {
scrollY: 300,
paging: false
} );
There are a huge range of options to customise your tables, which are all fully documented below. For general information about how DataTables' initialisation options can be used, please refer to the options manual.
Library | Name | Summary |
---|---|---|
DataTables - Features | Feature control DataTables' smart column width handling | |
DataTables - Features | Set a caption for the table | |
DataTables - Features | Feature control deferred rendering for additional speed of initialisation. | |
DataTables - Features | Feature control table information display field | |
DataTables - Features | Feature control the end user's ability to change the paging display length of the table. | |
DataTables - Features | Feature control ordering (sorting) abilities in DataTables. | |
DataTables - Features | Enable or disable table pagination. | |
DataTables - Features | Feature control the processing indicator. | |
DataTables - Features | Horizontal scrolling | |
DataTables - Features | Vertical scrolling | |
DataTables - Features | Feature control search (filtering) abilities | |
DataTables - Features | Feature control DataTables' server-side processing mode. | |
DataTables - Features | State saving - restore table state on page reload | |
DataTables - Data | Load data for the table's content from an Ajax source | |
DataTables - Data | Add or modify data submitted to the server upon an Ajax request | |
DataTables - Data | Data property or manipulation method for table data | |
DataTables - Data | Data to use as the display data for the table. | |
DataTables - Callbacks | Callback for whenever a TR element is created for the table's body. | |
DataTables - Callbacks | Function that is called every time DataTables performs a draw. | |
DataTables - Callbacks | Footer display callback function. | |
DataTables - Callbacks | Number formatting callback function. | |
DataTables - Callbacks | Header display callback function. | |
DataTables - Callbacks | Table summary information display callback. | |
DataTables - Callbacks | Initialisation complete callback. | |
DataTables - Callbacks | Pre-draw callback. | |
DataTables - Callbacks | Row draw callback. | |
DataTables - Callbacks | Callback that defines where and how a saved state should be loaded. | |
DataTables - Callbacks | State loaded - data manipulation callback | |
DataTables - Callbacks | State loaded callback. | |
DataTables - Callbacks | Callback that defines how the table state is stored and where. | |
DataTables - Callbacks | State save - data manipulation callback | |
DataTables - Options | Destroy any existing table matching the selector and replace with the new options. | |
DataTables - Options | Initial paging start point | |
DataTables - Options | Define the table control elements to appear on the page and in what order | |
DataTables - Options | Define and position the table control elements to appear on the page | |
DataTables - Options | Change the options in the page length | |
DataTables - Options | Initial order (sort) to apply to the table | |
DataTables - Options | Control which cell the order event handler will be applied to in a column | |
DataTables - Options | Highlight the columns being ordered in the table's body | |
DataTables - Options | Ordering to always be applied to the table | |
DataTables - Options | Multiple column ordering ability control. | |
DataTables - Options | Change the initial page length (number of rows per page) | |
DataTables - Options | Pagination button display options | |
DataTables - Options | Display component renderer types | |
DataTables - Options | Retrieve an existing DataTables instance | |
DataTables - Options | Data property name that DataTables will use to set | |
DataTables - Options | Allow the table to reduce in height when a limited number of rows are shown. | |
DataTables - Options | Set an initial search in DataTables and / or search options. | |
DataTables - Options | Control case-sensitive filtering option. | |
DataTables - Options | Enable / disable escaping of regular expression characters in the search term. | |
DataTables - Options | Enable / disable DataTables' search on return | |
DataTables - Options | Set an initial filtering condition on the table. | |
DataTables - Options | Enable / disable DataTables' smart filtering | |
DataTables - Options | Define an initial search for individual columns. | |
DataTables - Options | Set a delay for search operations | |
DataTables - Options | Saved state validity duration | |
DataTables - Options | Tab index control for keyboard navigation | |
DataTables - Columns | Set column definition initialisation properties. | |
DataTables - Columns | Alias of | |
DataTables - Columns | Assign a column definition to one or more columns. | |
DataTables - Columns | Set column specific initialisation properties. | |
DataTables - Columns | Set the columns' | |
DataTables - Columns | Cell type to be created for a column | |
DataTables - Columns | Class to assign to each cell in the column | |
DataTables - Columns | Add padding to the text content used when calculating the optimal width for a table. | |
DataTables - Columns | Cell created callback to allow DOM manipulation | |
DataTables - Columns | Set the data source for the column from the rows data object / array | |
DataTables - Columns | Set default, static, content for a column | |
DataTables - Columns | Set the column footer text | |
DataTables - Columns | Set a descriptive name for a column | |
DataTables - Columns | Define multiple column ordering as the default order for a column | |
DataTables - Columns | Live DOM sorting type assignment | |
DataTables - Columns | Order direction application sequence | |
DataTables - Columns | Enable or disable ordering on this column | |
DataTables - Columns | Render (process) the data for use in the table | |
DataTables - Columns | Enable or disable search on the data in this column | |
DataTables - Columns | Set the column title | |
DataTables - Columns | Set the column type - used for filtering and sorting string processing | |
DataTables - Columns | Enable or disable the display of this column | |
DataTables - Columns | Column width assignment | |
DataTables - Internationalisation | Language configuration options for DataTables | |
DataTables - Internationalisation | Language strings used for WAI-ARIA specific attributes | |
DataTables - Internationalisation | Language string used for WAI-ARIA column orderable label | |
DataTables - Internationalisation | Language string used for WAI-ARIA column label to alter column's ordering | |
DataTables - Internationalisation | Language string used for WAI-ARIA column label to alter column's ordering | |
DataTables - Internationalisation | WAI-ARIA labels for pagination buttons | |
DataTables - Internationalisation | WAI-ARIA label for the first pagination button | |
DataTables - Internationalisation | WAI-ARIA label for the last pagination button | |
DataTables - Internationalisation | WAI-ARIA label for the next pagination button | |
DataTables - Internationalisation | WAI-ARIA label for the previous pagination button | |
DataTables - Internationalisation | Language strings used for WAI-ARIA specific attributes | |
DataTables - Internationalisation | Language strings used for WAI-ARIA specific attributes | |
DataTables - Internationalisation | Decimal place character | |
DataTables - Internationalisation | Table has no records string | |
DataTables - Internationalisation | Replacement pluralisation for table data type | |
DataTables - Internationalisation | Table summary information display string | |
DataTables - Internationalisation | Table summary information string used when the table is empty of records | |
DataTables - Internationalisation | Appended string to the summary information when the table is filtered | |
DataTables - Internationalisation | String to append to all other summary information strings | |
DataTables - Internationalisation | Page length options string | |
DataTables - Internationalisation | Loading information display string - shown when Ajax loading data | |
DataTables - Internationalisation | Pagination specific language strings | |
DataTables - Internationalisation | Pagination 'first' button string | |
DataTables - Internationalisation | Pagination 'last' button string | |
DataTables - Internationalisation | Pagination 'next' button string | |
DataTables - Internationalisation | Pagination 'previous' button string | |
DataTables - Internationalisation | Processing indicator string | |
DataTables - Internationalisation | Search input string | |
DataTables - Internationalisation | Search input element placeholder attribute | |
DataTables - Internationalisation | Thousands separator | |
DataTables - Internationalisation | Load language information from remote file | |
DataTables - Internationalisation | Table empty as a result of filtering string | |
DataTables - Static | Set how DataTables will report detected errors | |
AutoFill | Enable and configure the AutoFill extension for DataTables | |
AutoFill | Always ask the end user if an action should be taken or not | |
AutoFill | Select the columns that can be auto filled | |
AutoFill | Attach an Editor instance for database updating | |
AutoFill | Initial enablement state of AutoFill | |
AutoFill | Action that will cause the auto fill drag handle to appear in a cell | |
AutoFill | Enable / disable user ability to horizontally drag and fill | |
AutoFill | Control automatic update of data when a fill drag is completed | |
AutoFill | Enable / disable user ability to vertically drag and fill | |
AutoFill | Container object for language strings used by AutoFill | |
AutoFill | Multi-fill selector button text | |
AutoFill | Multi-fill selector cancel option message | |
AutoFill | Multi-fill selector message for the full fill fill type | |
AutoFill | Multi-fill selector message for the horizontal fill fill type | |
AutoFill | Multi-fill selector message for the vertical fill fill type | |
AutoFill | Multi-fill selector message for the increment fill type | |
AutoFill | Information message shown at the top of the fill type selector | |
Buttons | Buttons configuration object | |
Buttons | List of buttons to be created | |
Buttons | Action to take when the button is activated | |
Buttons | Indicate that a button's action processing should be performed asynchronously. | |
Buttons | Collection of attribute key / values to set for a button | |
Buttons | Ensure that any requirements have been satisfied before initialising a button | |
Buttons | Set the class name for the button | |
Buttons | Function that is called when the button is destroyed | |
Buttons | Set a button's initial enabled state | |
Buttons | Define which button type the button should be based on | |
Buttons | Initialisation function that can be used to add events specific to this button | |
Buttons | Define an activation key for a button | |
Buttons | Set a name for each selection | |
Buttons | Unique namespace for every button | |
Buttons | Split dropdown buttons | |
Buttons | Set the tag for the button | |
Buttons | The text to show in the button | |
Buttons | Button | |
Buttons | Set a name for the instance for the group selector | |
ColReorder | Enable and configure the ColReorder extension for DataTables | |
ColReorder | Select which columns can be reordered | |
ColReorder | Initial enablement state of ColReorder | |
ColReorder | Set a default order for the columns in the table | |
Editor | Define which field a column should trigger editing on | |
FixedColumns | Enable and configure the FixedColumns extension for DataTables | |
FixedColumns | Number of columns to fix to the end of the table | |
FixedColumns | Number of columns to fix to the left of the table | |
FixedColumns | Number of columns to fix to the left of the table | |
FixedColumns | Number of columns to fix to the right of the table | |
FixedColumns | Number of columns to fix to the right of the table | |
FixedColumns | Number of columns to fix to the start of the table | |
FixedColumns | Set FixedColumns button text | |
FixedHeader | FixedHeader configuration object | |
FixedHeader | Enable / disable fixed footer | |
FixedHeader | Offset the table's fixed footer | |
FixedHeader | Enable / disable fixed header | |
FixedHeader | Offset the table's fixed header | |
KeyTable | Enable and configure the KeyTable extension for DataTables | |
KeyTable | Allow KeyTable's focus to be blurred (removed) from a table | |
KeyTable | Set the class name used for the focused cell | |
KeyTable | Enable / disable clipboard interaction with KeyTable | |
KeyTable | Set the orthogonal data to copy to clipboard | |
KeyTable | Select the columns that can gain focus | |
KeyTable | Control if editing should be activated immediately upon focus | |
KeyTable | Attach an Editor instance for Excel like editing | |
KeyTable | Cell to receive initial focus in the table | |
KeyTable | Limit the keys that KeyTable will listen for and take action on | |
KeyTable | Set the table's tab index for when it will receive focus | |
Responsive | Set column's visibility priority | |
Responsive | Enable and configure the Responsive extension for DataTables | |
Responsive | Set the breakpoints for a Responsive instance | |
Responsive | Enable and configure the child rows shown by Responsive for collapsed tables | |
Responsive | Define how the hidden information should be displayed to the end user | |
Responsive | Define the renderer used to display the child rows | |
Responsive | Column / selector for child row display control when using | |
Responsive | Set the child row display control type | |
Responsive | Set the orthogonal data request type for the hidden information display | |
RowGroup | Enable and configure the RowGroup extension for DataTables | |
RowGroup | Set the class name to be used for the grouping rows | |
RowGroup | Set the data point to use as the grouping data source | |
RowGroup | Text to show for rows which have | |
RowGroup | Provides the ability to disable row grouping at initialisation | |
RowGroup | Set the class name to be used for the grouping end rows | |
RowGroup | Provide a function that can be used to control the data shown in the end grouping row. | |
RowGroup | Set the class name to be used for the grouping start rows | |
RowGroup | Provide a function that can be used to control the data shown in the start grouping row. | |
RowReorder | Enable and configure the RowReorder extension for DataTables | |
RowReorder | Enable / disable the canceling of the drag and drop interaction | |
RowReorder | Configure the data point that will be used for the reordering data | |
RowReorder | Attach an Editor instance for database updating | |
RowReorder | Enable / disable RowReorder's user interaction | |
RowReorder | Set the options for the Editor form when submitting data | |
RowReorder | Define the selector used to pick the elements that will start a drag | |
RowReorder | Horizontal position control of the row being dragged | |
RowReorder | Control automatic of data when a row is dropped | |
Scroller | Enable and configure the Scroller extension for DataTables | |
Scroller | Set the point at which new data will be loaded and drawn | |
Scroller | The amount of data that Scroller should pre-buffer to ensure smooth scrolling | |
Scroller | Set the row height, or how the row height is calculated | |
Scroller | Time delay before new data is requested when server-side processing is enabled | |
SearchBuilder | Button that is enabled when SearchBuilder is to be used through a button | |
SearchBuilder | Set a default condition for this column | |
SearchBuilder | Set values of orthogonal data for rendering functions | |
SearchBuilder | Set a custom title for a column in SearchBuilder | |
SearchBuilder | Set the SearchBuilder type to use for a column | |
SearchBuilder | Set the message to be displayed in the SearchBuilder add button | |
SearchBuilder | Set SearchBuilder button text | |
SearchBuilder | Text to be displayed in the SearchBuilder clear all button | |
SearchBuilder | Set the placeholder text for the SearchBuilder condition | |
SearchBuilder | Define custom condition names for SearchBuilder conditions | |
SearchBuilder | Set the condition names for columns that use arrays | |
SearchBuilder | Set the condition names for the date column type | |
SearchBuilder | Set the condition names for the number column type | |
SearchBuilder | Set the condition names for the string column type | |
SearchBuilder | The object containing the condition names for a specific type | |
SearchBuilder | Set the placeholder text for the SearchBuilder data | |
SearchBuilder | Set the html of the SearchBuilder delete criteria button | |
SearchBuilder | Set the | |
SearchBuilder | Set the text of the SearchBuilder left button | |
SearchBuilder | Set the title attribute of the SearchBuilder left button | |
SearchBuilder | Message to display when AND logic is in place | |
SearchBuilder | Message to display when OR logic is in place | |
SearchBuilder | Set the text of the SearchBuilder right button | |
SearchBuilder | Set the title attribute of the SearchBuilder right button | |
SearchBuilder | Set the SearchBuilder Title text | |
SearchBuilder | Set the placeholder text for the SearchBuilder value | |
SearchBuilder | Set the text between the value input elements where two are required | |
SearchBuilder | Enable and configure the SearchBuilder extension for DataTables | |
SearchBuilder | Restrict which columns can be filtered on | |
SearchBuilder | Define custom conditions for SearchBuilder | |
SearchBuilder | Impose a limit on the depth of the groups | |
SearchBuilder | Trigger a search on the enter key rather than every keypress | |
SearchBuilder | Function to update title text when selections are made. | |
SearchBuilder | Removes the colours from SearchBuilder | |
SearchBuilder | Control live search operation | |
SearchBuilder | Set the default logic operator | |
SearchBuilder | Set a predefined search query | |
SearchPanes | Enable SearchPanes through a button | |
SearchPanes | Container for options for individual columns | |
SearchPanes | Add a custom class name to a pane | |
SearchPanes | Allow the SearchPanes to be collapsed for specific columns | |
SearchPanes | Set the type of logic to be implemented on the pane | |
SearchPanes | Hide the Control buttons and disable searching in the pane of a specific column | |
SearchPanes | Define properties of the DataTables being used for an individual pane | |
SearchPanes | Set custom empty messages for specific panes | |
SearchPanes | Set the title of the SearchPane | |
SearchPanes | Deprecated. Hide the count column in the pane of a specific column | |
SearchPanes | Collapse Specific SearchPanes on initialisation | |
SearchPanes | Set the name of the SearchPane | |
SearchPanes | Define custom search options | |
SearchPanes | Hide the ordering buttons in the pane of a specific column | |
SearchPanes | Set values of orthogonal data for rendering functions | |
SearchPanes | Deprecated. Pre-selected options in a pane | |
SearchPanes | Force Panes to hide or show | |
SearchPanes | Set the minimum number of unique values needed in a specific column to display that pane | |
SearchPanes | Hide the count column in the pane of a specific column | |
SearchPanes | Container for options for language | |
SearchPanes | Set the message to be displayed in the Clear button | |
SearchPanes | Set the message to be displayed in the SearchPanes Button | |
SearchPanes | Set the message to be displayed in the Collapse button | |
SearchPanes | Set the message to be displayed in the count column when not searching | |
SearchPanes | Set the message to be displayed in the count column when searching | |
SearchPanes | Add internationalisation to the empty message displayed as a pane option | |
SearchPanes | Add internationalisation to the message shown when no panes are displayed | |
SearchPanes | Add internationalisation to the message shown when the panes are loading | |
SearchPanes | Set the message to be displayed in the Show button | |
SearchPanes | Add internationalisation to the title showing how many panes are selected | |
SearchPanes | Enable Search Panes | |
SearchPanes | Allow panes to cascade under selection | |
SearchPanes | Disable buttons to allow quick clearing of selections in panes | |
SearchPanes | Allow the SearchPanes to be collapsed | |
SearchPanes | Select which columns should be considered when displaying panes | |
SearchPanes | Hide the control buttons and disable searching in all panes | |
SearchPanes | Define properties of the DataTables being used as Panes | |
SearchPanes | Deprecated. Set custom empty message | |
SearchPanes | Function to update title text when selections are made. | |
SearchPanes | Hide the count column in all panes | |
SearchPanes | Container for options for language | |
SearchPanes | Set the message to be displayed in the Clear button | |
SearchPanes | Set the message to be displayed in the SearchPanes Button | |
SearchPanes | Set the message to be displayed in the Collapse button | |
SearchPanes | Set the message to be displayed in the count column when not searching | |
SearchPanes | Set the message to be displayed in the count column when searching | |
SearchPanes | Add internationalisation to the empty message displayed as a pane option | |
SearchPanes | Add internationalisation to the message shown when no panes are displayed | |
SearchPanes | Add internationalisation to the message shown when the panes are loading | |
SearchPanes | Set the message to be displayed in the Show button | |
SearchPanes | Add internationalisation to the title showing how many panes are selected | |
SearchPanes | Collapse the SearchPanes on initialisation | |
SearchPanes | Set the layout of how the panes are displayed on the page | |
SearchPanes | Set the order of the Panes | |
SearchPanes | Hide the ordering buttons in all panes | |
SearchPanes | Define custom panes to filter across all columns | |
SearchPanes | Add a custom class for a custom pane | |
SearchPanes | Define the DataTables options for a custom pane | |
SearchPanes | Define the header for custom panes | |
SearchPanes | Define the options for custom panes | |
SearchPanes | Add classes to specific options of a custom pane | |
SearchPanes | Define the label for an option of a custom pane | |
SearchPanes | Define the value for an option of a custom pane | |
SearchPanes | Deprecated. Define any preSelections for the custom panes | |
SearchPanes | Pre-selected options in a pane | |
SearchPanes | Set the minimum ratio of unique values to total values needed in a column to display it's pane | |
SearchPanes | Show the count column in all panes | |
SearchPanes | Update the count column when searching to show visible count | |
Select | Container object for language strings used by Select | |
Select | Text to use as the aria-label for the header checkbox | |
Select | Text to use as the aria-label for the row selection checkboxs | |
Select | Table information summary string for the number of cells selected | |
Select | Table information summary string for the number of columns selected | |
Select | Table information summary string for the number of rows selected | |
Select | Select configuration object | |
Select | Indicate if the selected items will be removed when clicking outside of the table | |
Select | Set the class name that will be applied to selected items | |
Select | Control automatic addition of header checkbox | |
Select | Enable / disable the display for item selection information in the table summary. | |
Select | Set which table items to select (rows, columns or cells) | |
Select | Set the element selector used for mouse event capture to select items | |
Select | Set the selection style for end user interaction with the table | |
Select | Disable the deselection of selected rows when clicked | |
StateRestore | Set the text within the StateRestore creation button | |
StateRestore | Set the text within the StateRestore remove all button | |
StateRestore | Set the text within the StateRestore remove button | |
StateRestore | Set the text within the StateRestore rename button | |
StateRestore | Set the text within the StateRestore | |
StateRestore | Set the text within the StateRestore | |
StateRestore | Set the text within the StateRestore update button | |
StateRestore | Container for options for language | |
StateRestore | Set the text for the elements that are shown within the creation modal | |
StateRestore | Set the text within the StateRestore creation modal button | |
StateRestore | Set the text for the label of the columns search checkbox within the creation modal | |
StateRestore | Set the text for the label of the column visibility checkbox within the creation modal | |
StateRestore | Set the text for the label of the page length checkbox within the creation modal | |
StateRestore | Set the text for the label of the name input within the creation modal | |
StateRestore | Set the text for the label of the order checkbox within the creation modal | |
StateRestore | Set the text for the label of the paging checkbox within the creation modal | |
StateRestore | Set the text for the label of the | |
StateRestore | Set the text for the label of the search checkbox within the creation modal | |
StateRestore | Set the text for the label of the | |
StateRestore | Set the text for the label of the | |
StateRestore | Set the text for the label of the | |
StateRestore | Set the text for the title of the creation modal | |
StateRestore | Set the label text shown beside the toggle check boxes | |
StateRestore | Set the error message shown when attempting to rename a state to one that already exists | |
StateRestore | Set the error message shown when incorrectly renaming a state to an empty string | |
StateRestore | Set the text that is shown in the savedStates collection when there are no saved states | |
StateRestore | Set the confirmation message shown within the StateRestore remove modal | |
StateRestore | Set the error message shown when incorrectly removing a state | |
StateRestore | Set the joiner used between states within the StateRestore remove modal | |
StateRestore | Set the text within the StateRestore remove button | |
StateRestore | Set the title shown in the StateRestore remove modal | |
StateRestore | Set the text within the StateRestore remove button | |
StateRestore | Set the label next to the input element within the StateRestore rename modal | |
StateRestore | Set the title shown in the StateRestore rename modal |