--- title: "Customizing DataTables Options in GravityView" date: 2026-04-23 author: "GravityKit" link: "https://www.gravitykit.com/docs/gravityview-pro/datatables/customizing-datatables-options-in-gravityview/" --- The DataTables layout in GravityView uses the powerful [DataTables JavaScript library](https://datatables.net/) to display your form entries in an interactive table. You can customize nearly every aspect of how DataTables behaves using filters. ## The Main Filter The `gravityview_datatables_js_options` filter allows you to modify DataTables configuration options. Here's the basic structure: ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config, $view_id, $post ) { // Modify $dt_config array here return $dt_config; }, 20, 3 ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config, $view_id, $post ) { // Modify $dt_config array here return $dt_config; }, 20, 3 ); ``` The filter provides three parameters: - **$dt\_config** (array) - The complete DataTables configuration - **$view\_id** (int) - The ID of the View being displayed - **$post** (WP\_Post) - The current post or page where the View is embedded ## Targeting Specific Views You can apply customizations to all Views or target specific ones: ### Single View ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config, $view_id, $post ) { // Only apply to View ID 123 if ( 123 !== $view_id ) { return $dt_config; } $dt_config['searching'] = false; return $dt_config; }, 20, 3 ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config, $view_id, $post ) { // Only apply to View ID 123 if ( 123 !== $view_id ) { return $dt_config; } $dt_config['searching'] = false; return $dt_config; }, 20, 3 ); ``` ### Multiple Views ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config, $view_id, $post ) { $target_views = [ 123, 456, 789 ]; if ( in_array( $view_id, $target_views, true ) ) { $dt_config['paging'] = false; } return $dt_config; }, 20, 3 ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config, $view_id, $post ) { $target_views = [ 123, 456, 789 ]; if ( in_array( $view_id, $target_views, true ) ) { $dt_config['paging'] = false; } return $dt_config; }, 20, 3 ); ``` ## Page Length Options The `lengthMenu` option controls which values appear in the "Show X entries" dropdown. The `pageLength` option sets the default. ### Using the Dedicated Filter (Recommended) The `gravityview_datatables_lengthmenu` filter is the easiest way to customize the dropdown. GravityView automatically handles the "All" label for `-1` : ``` add_filter( 'gravityview_datatables_lengthmenu', function( $values, $view_data ) { // Key = actual value, Value = displayed label // -1 means "show all entries" return [ 10 => 10, 25 => 25, 50 => 50, 100 => 100, 250 => 250, -1 => 'All', ]; }, 10, 2 ); ``` ``` add_filter( 'gravityview_datatables_lengthmenu', function( $values, $view_data ) { // Key = actual value, Value = displayed label // -1 means "show all entries" return [ 10 => 10, 25 => 25, 50 => 50, 100 => 100, 250 => 250, -1 => 'All', ]; }, 10, 2 ); ``` ### Using the Main Options Filter If you use `gravityview_datatables_js_options` to set `lengthMenu` , you must use DataTables' 2D array format for custom labels: ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // 2D array: [ [values], [labels] ] // -1 shows all entries, displayed as "All" $dt_config['lengthMenu'] = [ [ 10, 25, 50, 100, -1 ], // Actual values [ 10, 25, 50, 100, 'All' ] // Display labels ]; // Default to 25 entries per page $dt_config['pageLength'] = 25; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // 2D array: [ [values], [labels] ] // -1 shows all entries, displayed as "All" $dt_config['lengthMenu'] = [ [ 10, 25, 50, 100, -1 ], // Actual values [ 10, 25, 50, 100, 'All' ] // Display labels ]; // Default to 25 entries per page $dt_config['pageLength'] = 25; return $dt_config; } ); ``` **Important:** If you use a simple array like `[ 10, 25, 50, -1 ]` , the dropdown will show "-1" instead of "All". Always use the 2D array format when you need custom labels. ## Search and Filter The `searching` option controls the built-in DataTables search box (not the GravityView Search Bar widget): ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Disable the DataTables search box $dt_config['searching'] = false; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Disable the DataTables search box $dt_config['searching'] = false; return $dt_config; } ); ``` If you're using the GravityView Search Bar widget, you may want to disable the DataTables search box to avoid duplicate search inputs. See [How to disable the DataTables search box](https://www.gravitykit.com/docs/gravityview-pro/datatables/how-to-disable-the-datatables-search-filter/). ## Pagination Controls ### Disable Pagination ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Disable pagination (show all entries) $dt_config['paging'] = false; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Disable pagination (show all entries) $dt_config['paging'] = false; return $dt_config; } ); ``` ### Hide Page Length Dropdown ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Hide the "Show X entries" dropdown $dt_config['lengthChange'] = false; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Hide the "Show X entries" dropdown $dt_config['lengthChange'] = false; return $dt_config; } ); ``` ### Hide Table Information ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Hide the "Showing 1 to 10 of 50 entries" text $dt_config['info'] = false; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Hide the "Showing 1 to 10 of 50 entries" text $dt_config['info'] = false; return $dt_config; } ); ``` ## Column Sorting ### Disable All Sorting ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { $dt_config['ordering'] = false; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { $dt_config['ordering'] = false; return $dt_config; } ); ``` ### Disable Sorting on Specific Columns ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Initialize columnDefs if not set (important for merging) if ( ! isset( $dt_config['columnDefs'] ) ) { $dt_config['columnDefs'] = []; } // Append to existing columnDefs (don't override!) $dt_config['columnDefs'][] = [ 'targets' => 0, // First column (0-indexed) 'orderable' => false, ]; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Initialize columnDefs if not set (important for merging) if ( ! isset( $dt_config['columnDefs'] ) ) { $dt_config['columnDefs'] = []; } // Append to existing columnDefs (don't override!) $dt_config['columnDefs'][] = [ 'targets' => 0, // First column (0-indexed) 'orderable' => false, ]; return $dt_config; } ); ``` ### Set Default Sort Order ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Sort by third column (index 2) in descending order $dt_config['order'] = [ [ 2, 'desc' ] ]; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Sort by third column (index 2) in descending order $dt_config['order'] = [ [ 2, 'desc' ] ]; return $dt_config; } ); ``` ### Disable Default Sorting ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Disable default sorting entirely $dt_config['order'] = []; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Disable default sorting entirely $dt_config['order'] = []; return $dt_config; } ); ``` ## Column Configuration Use `columnDefs` to configure individual columns. **Important:** Always append to existing `columnDefs` rather than replacing them, as GravityView may have set columnDefs for hidden sort columns. ### Add Custom CSS Classes ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { if ( ! isset( $dt_config['columnDefs'] ) ) { $dt_config['columnDefs'] = []; } $dt_config['columnDefs'][] = [ 'targets' => 0, // First column 'className' => 'my-custom-class', // CSS class name ]; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { if ( ! isset( $dt_config['columnDefs'] ) ) { $dt_config['columnDefs'] = []; } $dt_config['columnDefs'][] = [ 'targets' => 0, // First column 'className' => 'my-custom-class', // CSS class name ]; return $dt_config; } ); ``` ### Hide Columns You can hide columns while keeping them available for search and export: ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config, $view_id ) { if ( 123 !== $view_id ) { return $dt_config; } if ( ! isset( $dt_config['columnDefs'] ) ) { $dt_config['columnDefs'] = []; } // Hide columns by index (0-based) $dt_config['columnDefs'][] = [ 'targets' => [ 1, 3 ], // Hide second and fourth columns 'visible' => false, ]; return $dt_config; }, 20, 2 ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config, $view_id ) { if ( 123 !== $view_id ) { return $dt_config; } if ( ! isset( $dt_config['columnDefs'] ) ) { $dt_config['columnDefs'] = []; } // Hide columns by index (0-based) $dt_config['columnDefs'][] = [ 'targets' => [ 1, 3 ], // Hide second and fourth columns 'visible' => false, ]; return $dt_config; }, 20, 2 ); ``` ### Set Column Widths ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { if ( ! isset( $dt_config['columnDefs'] ) ) { $dt_config['columnDefs'] = []; } $dt_config['columnDefs'][] = [ 'targets' => 0, 'width' => '100px', ]; $dt_config['columnDefs'][] = [ 'targets' => 2, 'width' => '30%', ]; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { if ( ! isset( $dt_config['columnDefs'] ) ) { $dt_config['columnDefs'] = []; } $dt_config['columnDefs'][] = [ 'targets' => 0, 'width' => '100px', ]; $dt_config['columnDefs'][] = [ 'targets' => 2, 'width' => '30%', ]; return $dt_config; } ); ``` ## Processing Message ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Disable the "Loading data..." message $dt_config['processing'] = false; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // Disable the "Loading data..." message $dt_config['processing'] = false; return $dt_config; } ); ``` To customize the loading text instead: ``` add_filter( 'gravityview_datatables_loading_text', function( $text, $view ) { return 'Please wait, loading entries...'; }, 10, 2 ); ``` ``` add_filter( 'gravityview_datatables_loading_text', function( $text, $view ) { return 'Please wait, loading entries...'; }, 10, 2 ); ``` See also: [How to disable the "Loading data" message](https://www.gravitykit.com/docs/gravityview-pro/datatables/how-to-disable-the-loading-data-message/). ## Export Buttons The `buttons` option adds export functionality. **First, enable "Buttons" in your View's DataTables settings.** ### CSV Export with UTF-8 ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { $dt_config['buttons'] = [ [ 'extend' => 'csv', 'charset' => 'UTF-8', 'bom' => true, // Byte Order Mark for Excel compatibility 'header' => true, // Include column headers ] ]; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { $dt_config['buttons'] = [ [ 'extend' => 'csv', 'charset' => 'UTF-8', 'bom' => true, // Byte Order Mark for Excel compatibility 'header' => true, // Include column headers ] ]; return $dt_config; } ); ``` ### PDF Export ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config, $view_id ) { if ( 123 !== $view_id ) { return $dt_config; } $dt_config['buttons'] = [ [ 'extend' => 'pdfHtml5', 'title' => 'My Custom Title' ] ]; return $dt_config; }, 20, 2 ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config, $view_id ) { if ( 123 !== $view_id ) { return $dt_config; } $dt_config['buttons'] = [ [ 'extend' => 'pdfHtml5', 'title' => 'My Custom Title' ] ]; return $dt_config; }, 20, 2 ); ``` For more PDF customization, use the dedicated filter: ``` add_filter( 'gravityview/datatables/button_pdf', function( $button_config, $view_id ) { if ( 123 !== $view_id ) { return $button_config; } $button_config['title'] = 'My PDF Report'; $button_config['filename'] = 'entries-export'; return $button_config; }, 10, 2 ); ``` ``` add_filter( 'gravityview/datatables/button_pdf', function( $button_config, $view_id ) { if ( 123 !== $view_id ) { return $button_config; } $button_config['title'] = 'My PDF Report'; $button_config['filename'] = 'entries-export'; return $button_config; }, 10, 2 ); ``` ### Multiple Export Buttons ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { $dt_config['buttons'] = [ [ 'extend' => 'csv', 'header' => false // CSV without headers ], [ 'extend' => 'pdfHtml5', 'title' => 'My Report' ], [ 'extend' => 'print' ] ]; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { $dt_config['buttons'] = [ [ 'extend' => 'csv', 'header' => false // CSV without headers ], [ 'extend' => 'pdfHtml5', 'title' => 'My Report' ], [ 'extend' => 'print' ] ]; return $dt_config; } ); ``` ### Print Selected Rows ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { $dt_config['select'] = true; // Enable row selection $dt_config['buttons'] = [ [ 'extend' => 'print', 'text' => 'Print all', 'exportOptions' => [ 'modifier' => [ 'selected' => null // Print all rows ] ] ], [ 'extend' => 'print', 'text' => 'Print selected' ] ]; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { $dt_config['select'] = true; // Enable row selection $dt_config['buttons'] = [ [ 'extend' => 'print', 'text' => 'Print all', 'exportOptions' => [ 'modifier' => [ 'selected' => null // Print all rows ] ] ], [ 'extend' => 'print', 'text' => 'Print selected' ] ]; return $dt_config; } ); ``` See also: [How to customize the CSV field separator](https://www.gravitykit.com/docs/gravityview-pro/datatables/how-to-customize-the-csv-field-separator/). ## Customizing Text and Labels ``` add_filter( 'gravityview/datatables/config/language', function( $labels ) { $labels['emptyTable'] = 'No entries found.'; $labels['zeroRecords'] = 'No matching entries found.'; $labels['info'] = 'Showing _START_ to _END_ of _TOTAL_ results'; $labels['infoEmpty'] = 'No entries available'; $labels['search'] = 'Search:'; return $labels; } ); ``` ``` add_filter( 'gravityview/datatables/config/language', function( $labels ) { $labels['emptyTable'] = 'No entries found.'; $labels['zeroRecords'] = 'No matching entries found.'; $labels['info'] = 'Showing _START_ to _END_ of _TOTAL_ results'; $labels['infoEmpty'] = 'No entries available'; $labels['search'] = 'Search:'; return $labels; } ); ``` See also: [How to customize the "No matching records found" text](https://www.gravitykit.com/docs/gravityview-pro/datatables/how-to-customize-the-no-data-available-in-table-text/). ## Field Filter Placeholders When using DataTables Field Filters, customize the placeholder text: ``` add_filter( 'gravityview/datatables/field_filters/placeholder', function( $placeholder, $field_label ) { return 'Search by ' . $field_label . '...'; }, 10, 2 ); ``` ``` add_filter( 'gravityview/datatables/field_filters/placeholder', function( $placeholder, $field_label ) { return 'Search by ' . $field_label . '...'; }, 10, 2 ); ``` ## Complete Examples ### Minimal Table (No Controls) ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config, $view_id ) { if ( 123 !== $view_id ) { return $dt_config; } $dt_config['searching'] = false; // No search box $dt_config['lengthChange'] = false; // No page length dropdown $dt_config['ordering'] = false; // No column sorting $dt_config['info'] = false; // No "Showing X of Y" text $dt_config['paging'] = false; // No pagination return $dt_config; }, 20, 2 ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config, $view_id ) { if ( 123 !== $view_id ) { return $dt_config; } $dt_config['searching'] = false; // No search box $dt_config['lengthChange'] = false; // No page length dropdown $dt_config['ordering'] = false; // No column sorting $dt_config['info'] = false; // No "Showing X of Y" text $dt_config['paging'] = false; // No pagination return $dt_config; }, 20, 2 ); ``` ### Large Dataset Configuration ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // 2D array format for proper "All" label display $dt_config['lengthMenu'] = [ [ 25, 50, 100, 250, 500, -1 ], [ 25, 50, 100, 250, 500, 'All' ] ]; $dt_config['pageLength'] = 100; return $dt_config; } ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config ) { // 2D array format for proper "All" label display $dt_config['lengthMenu'] = [ [ 25, 50, 100, 250, 500, -1 ], [ 25, 50, 100, 250, 500, 'All' ] ]; $dt_config['pageLength'] = 100; return $dt_config; } ); ``` ### Export-Ready Table ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config, $view_id ) { if ( 456 !== $view_id ) { return $dt_config; } $dt_config['buttons'] = [ [ 'extend' => 'csv', 'charset' => 'UTF-8', 'bom' => true ], [ 'extend' => 'pdfHtml5', 'title' => 'Entry Report' ], [ 'extend' => 'print' ] ]; $dt_config['order'] = []; // 2D array format for proper "All" label $dt_config['lengthMenu'] = [ [ 25, 50, 100, -1 ], [ 25, 50, 100, 'All' ] ]; $dt_config['pageLength'] = 50; return $dt_config; }, 20, 2 ); ``` ``` add_filter( 'gravityview_datatables_js_options', function( $dt_config, $view_id ) { if ( 456 !== $view_id ) { return $dt_config; } $dt_config['buttons'] = [ [ 'extend' => 'csv', 'charset' => 'UTF-8', 'bom' => true ], [ 'extend' => 'pdfHtml5', 'title' => 'Entry Report' ], [ 'extend' => 'print' ] ]; $dt_config['order'] = []; // 2D array format for proper "All" label $dt_config['lengthMenu'] = [ [ 25, 50, 100, -1 ], [ 25, 50, 100, 'All' ] ]; $dt_config['pageLength'] = 50; return $dt_config; }, 20, 2 ); ``` ## Options Reference | **Option** | **Type** | **Description** | |---|---|---| | `lengthMenu` | array | Page length options (use 2D array for custom labels) | | `pageLength` | int | Default entries per page | | `lengthChange` | bool | Show/hide page length dropdown | | `paging` | bool | Enable/disable pagination | | `searching` | bool | Enable/disable search box | | `ordering` | bool | Enable/disable column sorting | | `info` | bool | Show/hide table information | | `processing` | bool | Show/hide loading message | | `order` | array | Default sort column and direction | | `columnDefs` | array | Per-column configuration (always append, don't replace) | | `buttons` | array | Export button configuration | For all DataTables options, see the [DataTables Options Reference](https://datatables.net/reference/option/). ## Where to Add Code Add these code snippets to your site following the instructions in [Where to put code samples](https://www.gravitykit.com/docs/gravityview/customizing-your-views/where-to-put-code-samples/). **Important:** Always test code on a staging site before adding to production. ## Related Articles - [Getting Started With the DataTables Layout](https://www.gravitykit.com/docs/gravityview-pro/datatables/how-to-install-the-datatables-layout/) - [How to disable the DataTables search box](https://www.gravitykit.com/docs/gravityview-pro/datatables/how-to-disable-the-datatables-search-filter/) - [How to disable the "Loading data" message](https://www.gravitykit.com/docs/gravityview-pro/datatables/how-to-disable-the-loading-data-message/) - [How to customize the "No matching records found" text](https://www.gravitykit.com/docs/gravityview-pro/datatables/how-to-customize-the-no-data-available-in-table-text/) - [How to customize the CSV field separator](https://www.gravitykit.com/docs/gravityview-pro/datatables/how-to-customize-the-csv-field-separator/) - [My DataTables View is not sorting properly](https://www.gravitykit.com/docs/gravityview-pro/datatables/datatables-sorting/) - [Where to put code samples](https://www.gravitykit.com/docs/gravityview/customizing-your-views/where-to-put-code-samples/) - [Configuring the Search Bar](https://www.gravitykit.com/docs/gravityview/search/configuring-the-search-bar/)