{hero}

searchClear

Since: ColumnControl 1.0.0

Clear any search from ColumnControl applied to the host column.
Please note - this property requires the ColumnControl extension for DataTables.

Description

This content type adds a button that, when triggered, will clear any search terms that have been applied to the host column by ColumnControl (e.g. search, searchList, etc).

Once the search terms have been cleared, the table will automatically be redrawn.

Display

The button added by this control will display as a simple icon button at the top level, or as a button with icon and text in a dropdown. It is generally expected that it will be used in a dropdown to avoid cluttering the UI.

Options

This button can have the following options set in its configuration object to customise its actions and display, in addition to those options which are available for all buttons (e.g. buttons.buttons.text):

className

  • Type: string
  • Default: dtcc-button_searchClear

Class name applied to the trigger button. Please note that a custom class name provided here will always have dtcc-button_ prefixed to it.

icon

  • Type: string
  • Default: searchClear

Button icon. Can take the name of any icon available in DataTable.ColumnControl.icons (which is a writeable object containing SVG icons).

text

  • Type: string
  • Default: Clear search

Trigger button text (shown when in a dropdown). Can also be set by the searchClear key of language.columnControl, which will take priority if set.

Example

Show an ordering icon and column click and drag icon in each header cell.:

new DataTable('#example', {
    columnControl: [
		'order',
		[
			'search',
			'searchClear'
		]
	],
    ordering: {
        indicators: false,
        handler: false
    }
});