Customizing DataTables Options in GravityView

The DataTables layout in GravityView uses the powerful DataTables JavaScript library 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 );

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 );

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 );

Page Length Options

The lengthMenu  option controls which values appear in the "Show X entries" dropdown. The pageLength  option sets the default.

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 );

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;
} );

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;
} );

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.

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;
} );

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;
} );

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;
} );

Column Sorting

Disable All Sorting

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;
} );

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;
} );

Disable Default Sorting

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;
} );

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 );

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;
} );

Processing Message

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 );

See also: 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;
} );

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 );

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 );

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['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.

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;
} );

See also: How to customize the "No matching records found" 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 );

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 );

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;
} );

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 );

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.

Where to Add Code

Add these code snippets to your site following the instructions in Where to put code samples.

Important: Always test code on a staging site before adding to production.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us