### Initialize ColumnControl with Shorthand Content Array

Source: https://context7.com/datatables/columncontrol/llms.txt

Use a simple array of control keys for basic initialization applied to all columns in the first header row. Ensure the DataTable is initialized with the '#example' selector.

```javascript
new DataTable('#example', {
  columnControl: ['order', 'searchDropdown']
});
```

--------------------------------

### Initialize ColumnControl with Multiple Header Rows

Source: https://context7.com/datatables/columncontrol/llms.txt

Configure different controls for multiple header rows by providing an array of configuration objects. This example sets up sorting controls in the first row and search in the second.

```javascript
new DataTable('#example', {
  columnControl: [
    { target: 0, content: ['order'] },
    { target: 1, content: ['search'] }
  ],
  ordering: { indicators: false, handler: false }
});
```

--------------------------------

### Add Spacer Control

Source: https://context7.com/datatables/columncontrol/llms.txt

Insert a visual separator using the `spacer` control, rendered with `role="separator"`. This example groups search and ordering controls.

```javascript
new DataTable('#example', {
  columnControl: [
    'order',
    ['search', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']
  ]
});
```

--------------------------------

### Add Title and Other Controls

Source: https://context7.com/datatables/columncontrol/llms.txt

Use the `title` control to render column headers as divs, useful for labels in dropdowns. This example also includes spacer, ordering, and search controls.

```javascript
new DataTable('#example', {
  columnControl: [['title', 'spacer', 'orderAsc', 'orderDesc', 'searchText']]
});
```

--------------------------------

### ColumnControl with Advanced Multi-Sort UI

Source: https://context7.com/datatables/columncontrol/llms.txt

Create an advanced multi-sort UI by grouping granular ordering controls within a dropdown. This example includes 'order' for the primary sort, and a dropdown with options for adding, removing, and clearing sorts.

```javascript
new DataTable('#example', {
  columnControl: [
    'order',
    ['spacer', 'orderAddAsc', 'orderAddDesc', 'orderRemove', 'orderClear']
  ],
  ordering: { indicators: false, handler: false }
});
```

--------------------------------

### Search List Input (searchList)

Source: https://context7.com/datatables/columncontrol/llms.txt

Implements a checkbox-style list for filtering options. Options can be derived automatically from table data (client-side), provided via an Ajax JSON response (server-side), or defined statically at initialization. This example shows client-side, Ajax, and static option configurations.

```javascript
// Client-side – options built from column data automatically
new DataTable('#example', {
  columnControl: ['order', ['searchList']],
  ordering: { indicators: false, handler: false }
});
```

```javascript
// Ajax table – server provides options in JSON response
// Server JSON: { "data": [...], "columnControl": { "status": ["Active","Inactive"] } }
new DataTable('#example', {
  ajax: '/api/employees',
  columns: [
    { data: 'name' },
    { data: 'status', name: 'status' }  // name matches JSON key
  ],
  columnControl: [
    'order',
    [{ extend: 'searchList', ajaxOnly: true, hidable: true }]
  ]
});
```

```javascript
// Static options provided at init time
new DataTable('#example', {
  columnControl: [{
    extend: 'searchList',
    options: [
      { label: 'Active',   value: 'active' },
      { label: 'Inactive', value: 'inactive' }
    ],
    select: true,
    search: false
  }]
});
```

--------------------------------

### Date/Time Search Input (searchDateTime)

Source: https://context7.com/datatables/columncontrol/llms.txt

Enables date/time searching, automatically detecting column formats. Supports Moment.js and Luxon for custom rendering and uses a DataTable.DateTime picker if available. This example shows setting a specific format and mask.

```javascript
new DataTable('#example', {
  columnControl: [{
    extend: 'searchDateTime',
    format: 'DD/MM/YYYY',   // optional – auto-detected if omitted
    mask: 'YYYY-MM-DD',     // only compare by date, ignoring time component
    placeholder: 'YYYY-MM-DD'
  }]
});
```

--------------------------------

### ColumnControl with Granular Ordering Controls

Source: https://context7.com/datatables/columncontrol/llms.txt

Utilize granular ordering controls like `orderAsc`, `orderDesc`, and `orderClear` for specific sorting actions. This example sets up basic single-direction sorting and a clear all sorts button.

```javascript
new DataTable('#example', {
  columnControl: ['orderAsc', 'orderDesc', 'orderClear'],
  ordering: { indicators: false, handler: false }
});
```

--------------------------------

### Dropdown Content Wrapper (dropdown)

Source: https://context7.com/datatables/columncontrol/llms.txt

Renders a button that opens a floating panel containing other content types. An array shorthand automatically wraps its children in a dropdown. This example shows both the shorthand and an explicit dropdown with custom text and icon.

```javascript
// Array shorthand – anything in a nested array becomes a dropdown
new DataTable('#example', {
  columnControl: [
    'order',
    ['search', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']
  ]
});
```

```javascript
// Explicit dropdown with custom text and icon
new DataTable('#example', {
  columnControl: [{
    extend: 'dropdown',
    icon: 'menu',
    text: 'Options',
    content: ['searchText', 'spacer', 'orderAsc', 'orderDesc']
  }]
});
```

--------------------------------

### Numeric Search Input (searchNumber)

Source: https://context7.com/datatables/columncontrol/llms.txt

Provides a numeric search input with comparison operators. It automatically strips currency symbols and formatted separators before performing comparisons. This example demonstrates excluding specific logic operators.

```javascript
new DataTable('#example', {
  columnControl: [{
    extend: 'searchNumber',
    placeholder: '0',
    excludeLogic: ['notEqual', 'empty', 'notEmpty']
  }]
});
```

--------------------------------

### Search Dropdown Shorthand (searchDropdown)

Source: https://context7.com/datatables/columncontrol/llms.txt

A convenient shorthand for wrapping a search input within a dropdown button, commonly used for compact headers. The example shows both the shorthand and its equivalent explicit form.

```javascript
new DataTable('#example', {
  columnControl: ['searchDropdown']
});
```

```javascript
// Equivalent explicit form
new DataTable('#example', {
  columnControl: [{
    extend: 'dropdown',
    content: ['search']
  }]
});
```

--------------------------------

### Per-Column ColumnControl Overrides

Source: https://context7.com/datatables/columncontrol/llms.txt

Apply specific ColumnControl configurations to individual columns using `columnDefs`. This example sets a complex control set for columns 1 and 2, and disables controls for the last column.

```javascript
new DataTable('#example', {
  columnControl: ['searchDropdown'],
  columnDefs: [
    {
      targets: [1, 2],
      columnControl: ['order', ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']]
    },
    {
      targets: -1,
      columnControl: []
    }
  ]
});
```

--------------------------------

### Internationalize ColumnControl Text

Source: https://context7.com/datatables/columncontrol/llms.txt

Customize the text for all ColumnControl elements using the `language.columnControl` option. This example shows French translations for various controls.

```javascript
new DataTable('#example', {
  columnControl: ['order', ['search', 'spacer', 'orderAsc', 'orderDesc']],
  language: {
    columnControl: {
      order: 'Trier',
      orderAsc: 'Croissant',
      orderDesc: 'Décroissant',
      orderClear: 'Effacer le tri',
      searchList: '[title]',
      list: {
        add: 'Tout sélectionner',
        none: 'Désélectionner',
        search: 'Rechercher…'
      },
      search: {
        text: {
          equal: 'Égal à',
          notEqual: 'Différent de',
          starts: 'Commence par',
          ends: 'Se termine par',
          empty: 'Vide',
          notEmpty: 'Non vide'
        }
      }
    }
  }
});
```

```javascript
// Or load from the DataTables community translation file
new DataTable('#example', {
  columnControl: ['order', 'searchDropdown'],
  language: { url: '/i18n/fr-FR.json' }
});
```

--------------------------------

### Column Visibility Toggle (colVis)

Source: https://context7.com/datatables/columncontrol/llms.txt

Provides a checkbox list to toggle column visibility. Can be restricted to a subset of columns using selectors. This example excludes the first column from the visibility list and sets a custom title.

```javascript
new DataTable('#example', {
  columnControl: [{
    extend: 'colVis',
    columns: ':not(:first-child)',  // exclude the first column from the list
    search: true,
    select: true,
    title: 'Show/hide columns'
  }]
});
```

--------------------------------

### Auto-detect Search Input with ColumnControl

Source: https://context7.com/datatables/columncontrol/llms.txt

ColumnControl inspects column data types to automatically render appropriate search inputs (searchText, searchNumber, searchDateTime, searchList). This example shows basic auto-detection and enabling searchList for Ajax columns.

```javascript
new DataTable('#example', {
  columnControl: [
    { target: 0, content: ['orderStatus'] },
    { target: 1, content: ['search'] }   // auto-detects per-column type
  ],
  ordering: { indicators: false }
});
```

```javascript
// Allow searchList to be shown for Ajax columns
new DataTable('#example', {
  columnControl: [{
    extend: 'search',
    allowSearchList: true
  }]
});
```

--------------------------------

### Add Left/Right Column Reorder Controls

Source: https://context7.com/datatables/columncontrol/llms.txt

Implement click-to-move buttons for reordering columns left or right using `reorderLeft` and `reorderRight`. Requires the ColReorder extension.

```javascript
new DataTable('#example', {
  columnControl: ['order', ['reorderLeft', 'reorderRight']],
  ordering: { indicators: false, handler: false }
});
```

--------------------------------

### Initialize ColumnControl with Object Configuration

Source: https://context7.com/datatables/columncontrol/llms.txt

Specify the target header row (0-indexed) and the content array for controls. This allows for more precise placement of controls, such as in the second header row.

```javascript
new DataTable('#example', {
  columnControl: {
    target: 1,
    content: ['search']
  }
});
```

--------------------------------

### ColumnControl with Basic Order Control

Source: https://context7.com/datatables/columncontrol/llms.txt

Enable the basic 'order' control, which provides a single toggle button for cycling through ascending, descending, and no-order states for the column. Ensure `ordering: { indicators: false, handler: false }` is set to let ColumnControl manage sorting.

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

--------------------------------

### Styling with SCSS

Source: https://context7.com/datatables/columncontrol/llms.txt

ColumnControl provides SCSS files for integration with various CSS frameworks. Users should import the appropriate file alongside DataTables' own styles.

```APIDOC
## Styling with SCSS

ColumnControl ships SCSS files for every supported CSS framework. Import the appropriate file alongside DataTables' own styles.

```scss
// DataTables default styling
@use 'node_modules/datatables.net-dt/css/dataTables.dataTables.css';
@use 'path/to/columncontrol/css/columnControl.dataTables.scss';

// Bootstrap 5
@use 'bootstrap/dist/css/bootstrap.min.css';
@use 'path/to/columncontrol/css/columnControl.bootstrap5.scss';
```

Available integration files: `columnControl.dataTables.scss`, `columnControl.bootstrap.scss`, `columnControl.bootstrap4.scss`, `columnControl.bootstrap5.scss`, `columnControl.bulma.scss`, `columnControl.foundation.scss`, `columnControl.jqueryui.scss`, `columnControl.semanticui.scss`.
```

--------------------------------

### Import ColumnControl SCSS styles

Source: https://context7.com/datatables/columncontrol/llms.txt

Import the necessary SCSS files for ColumnControl styling, choosing the appropriate integration file for your CSS framework (e.g., Bootstrap 5). Ensure DataTables' default styles are also included.

```scss
// DataTables default styling
@use 'node_modules/datatables.net-dt/css/dataTables.dataTables.css';
@use 'path/to/columncontrol/css/columnControl.dataTables.scss';

// Bootstrap 5
@use 'bootstrap/dist/css/bootstrap.min.css';
@use 'path/to/columncontrol/css/columnControl.bootstrap5.scss';
```

--------------------------------

### Register custom content plugin for ColumnControl

Source: https://context7.com/datatables/columncontrol/llms.txt

Extend ColumnControl by registering custom content types. The plugin requires `defaults` and an `init` method that returns a DOM element. This allows for unique header elements.

```javascript
DataTable.ColumnControl.content.myBadge = {
  defaults: { text: 'New' },
  init(config) {
    const dt = this.dt();
    const span = document.createElement('span');
    span.className = 'dtcc-badge';
    span.textContent = dt.i18n('columnControl.myBadge', config.text);
    return span;
  }
};

// Use the custom content type
new DataTable('#example', {
  columnControl: ['order', 'myBadge']
});
```

--------------------------------

### Add Column Reorder Control

Source: https://context7.com/datatables/columncontrol/llms.txt

Integrate drag-and-drop column reordering using the `reorder` control type. The ColReorder extension is automatically initialized if not present.

```javascript
new DataTable('#example', {
  columnControl: ['order', 'reorder'],
  ordering: { indicators: false, handler: false }
  // ColReorder is auto-initialised when 'reorder' content is used
});
```

--------------------------------

### Custom content plugin registration

Source: https://context7.com/datatables/columncontrol/llms.txt

Allows for the registration of third-party or project-specific content types within `DataTable.ColumnControl.content`. A plugin requires a `defaults` property and an `init(config)` method.

```APIDOC
## Custom content plugin registration

Third-party or project-specific content types can be added to `DataTable.ColumnControl.content`. A plugin is an object with a `defaults` property and an `init(config)` method (called with `this` as the `ColumnControl` instance) that returns a DOM element.

```js
DataTable.ColumnControl.content.myBadge = {
  defaults: { text: 'New' },
  init(config) {
    const dt = this.dt();
    const span = document.createElement('span');
    span.className = 'dtcc-badge';
    span.textContent = dt.i18n('columnControl.myBadge', config.text);
    return span;
  }
};

// Use the custom content type
new DataTable('#example', {
  columnControl: ['order', 'myBadge']
});
```
```

--------------------------------

### ColumnControl Order Control with Custom Options

Source: https://context7.com/datatables/columncontrol/llms.txt

Configure the 'order' control with custom options, such as `statusOnly: true`. This option displays the sort icon but relies on the default header click handler for sorting, useful when integrating with other sorting mechanisms.

```javascript
new DataTable('#example', {
  columnControl: [{ extend: 'order', statusOnly: true }],
  ordering: { indicators: false }
});
```

--------------------------------

### Add Row Grouping Control

Source: https://context7.com/datatables/columncontrol/llms.txt

Toggle row grouping by column data using the `rowGroup` control. Clicking adds the column as a grouping key, clicking again removes it. The RowGroup extension must be loaded.

```javascript
new DataTable('#example', {
  columnControl: ['rowGroup', 'order'],
  ordering: { indicators: false, handler: false }
  // RowGroup extension must be loaded
});
```

```javascript
new DataTable('#example', {
  columnControl: [['rowGroupAdd', 'rowGroupRemove', 'rowGroupClear']],
});
```

--------------------------------

### Free-Text Search Input (searchText)

Source: https://context7.com/datatables/columncontrol/llms.txt

Implements a free-text search input with various logic modes. Uses DataTables' fixed search for client-side filtering. Options include placeholder text, column title replacement, a clear icon, and excluding specific logic operators.

```javascript
new DataTable('#example', {
  columnControl: [{
    extend: 'searchText',
    placeholder: 'Filter…',
    title: '[title]',         // replaced with the column's header text
    clear: true,              // show ✕ clear icon
    excludeLogic: ['ends', 'starts']  // hide unused operators
  }]
});
```

--------------------------------

### Target Specific Header/Footer Rows for ColumnControl

Source: https://context7.com/datatables/columncontrol/llms.txt

Specify the target row for ColumnControl content using the `target` option. Accepts an integer for `<thead>` rows or strings like `'tfoot'` or `'tfoot:N'` for footer rows. Non-existent rows are auto-created.

```javascript
// Header row 1 (second row, auto-created if not in HTML)
new DataTable('#example', {
  columnControl: { target: 1, content: ['search'] }
});
```

```javascript
// Footer row 0
new DataTable('#example', {
  columnControl: { target: 'tfoot', content: ['searchText'] }
});
```

```javascript
// Multiple rows via array
new DataTable('#example', {
  columnControl: [
    { target: 'thead:0', content: ['order'] },
    { target: 'thead:1', content: ['search'] }
  ]
});
```

--------------------------------

### Add Column Visibility Dropdown Control

Source: https://context7.com/datatables/columncontrol/llms.txt

Use `colVisDropdown` to add a button with a dropdown for controlling column visibility. Ensure the `colVis` functionality is available.

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

--------------------------------

### column().columnControl.searchList() API

Source: https://context7.com/datatables/columncontrol/llms.txt

Refreshes or replaces the options displayed in a `searchList` for the selected column. This method accepts `'refresh'` to re-read options from the table, a plain string array, or an array of `{label, value}` objects.

```APIDOC
## `column().columnControl.searchList()` API

Refreshes or replaces the options displayed in a `searchList` for the selected column. Accepts `'refresh'` (re-reads from the table), a plain string array, or an array of `{label, value}` objects.

```js
const table = new DataTable('#example', {
  columnControl: ['order', ['searchList']],
  ordering: { indicators: false, handler: false }
});

// Re-read options from the current table data
document.querySelector('#refresh').addEventListener('click', () => {
  table.column(1).columnControl.searchList('refresh');
});

// Replace with a static string list
table.column(2).columnControl.searchList(['Alice', 'Bob', 'Carol']);

// Replace with label/value pairs
table.column(3).columnControl.searchList([
  { label: 'Active',   value: 'active' },
  { label: 'Inactive', value: 'inactive' },
  { label: 'Pending',  value: 'pending' }
]);
```
```

--------------------------------

### Refresh or replace search list options

Source: https://context7.com/datatables/columncontrol/llms.txt

The `searchList()` API method can refresh options from table data, replace them with a static string array, or use an array of label/value objects. This is useful for dynamic updates to filterable columns.

```javascript
const table = new DataTable('#example', {
  columnControl: ['order', ['searchList']],
  ordering: { indicators: false, handler: false }
});

// Re-read options from the current table data
document.querySelector('#refresh').addEventListener('click', () => {
  table.column(1).columnControl.searchList('refresh');
});

// Replace with a static string list
table.column(2).columnControl.searchList(['Alice', 'Bob', 'Carol']);

// Replace with label/value pairs
table.column(3).columnControl.searchList([
  { label: 'Active',   value: 'active' },
  { label: 'Inactive', value: 'inactive' },
  { label: 'Pending',  value: 'pending' }
]);
```

--------------------------------

### Clear search on a column or all columns

Source: https://context7.com/datatables/columncontrol/llms.txt

Use `searchClear()` to programmatically remove search filters from a specific column or all columns. Remember to call `.draw()` separately to update the table.

```javascript
const table = new DataTable('#example', {
  columnControl: [
    { target: 0, content: ['orderStatus'] },
    { target: 1, content: ['search'] }
  ]
});

// Clear search on column index 0 when a button is clicked
document.querySelector('#clearCol0').addEventListener('click', () => {
  table.column(0).columnControl.searchClear().draw();
});

// Clear all columns at once
document.querySelector('#clearAll').addEventListener('click', () => {
  table.columns().columnControl.searchClear().draw();
});
```

--------------------------------

### column().columnControl.searchClear() API

Source: https://context7.com/datatables/columncontrol/llms.txt

Programmatically clears any ColumnControl search applied to the selected column. This includes `searchList` selections and text/number/date inputs. Note that this method does not redraw the table; `.draw()` must be called separately.

```APIDOC
## `column().columnControl.searchClear()` API

Programmatically clears any ColumnControl search applied to the selected column — both `searchList` selections and text/number/date inputs. Does not redraw the table; call `.draw()` separately.

```js
const table = new DataTable('#example', {
  columnControl: [
    { target: 0, content: ['orderStatus'] },
    { target: 1, content: ['search'] }
  ]
});

// Clear search on column index 0 when a button is clicked
document.querySelector('#clearCol0').addEventListener('click', () => {
  table.column(0).columnControl.searchClear().draw();
});

// Clear all columns at once
document.querySelector('#clearAll').addEventListener('click', () => {
  table.columns().columnControl.searchClear().draw();
});
```
```

--------------------------------

### Add CSS Classes to ColumnControl Target Rows

Source: https://context7.com/datatables/columncontrol/llms.txt

Apply custom CSS classes to the target `<tr>` row using the `className` option. This is useful for styling specific rows, like dedicated search rows.

```javascript
new DataTable('#example', {
  columnControl: [
    { target: 0, content: ['order'] },
    {
      target: 1,
      className: ['dt-search-row', 'no-sort'],
      content: ['search']
    }
  ]
});
```

--------------------------------

### ccSearchClear Buttons extension button

Source: https://context7.com/datatables/columncontrol/llms.txt

A Buttons extension button that clears all ColumnControl searches, including the global search, when clicked. This button automatically disables itself when no searches are active.

```APIDOC
## `ccSearchClear` Buttons extension button

A Buttons extension button that clears all ColumnControl searches (and the global search) when clicked. Automatically disables itself when no searches are active.

```js
new DataTable('#example', {
  columnControl: [
    { target: 0, content: ['orderStatus'] },
    { target: 1, content: ['search'] }
  ],
  layout: {
    topStart: { buttons: ['pageLength', 'ccSearchClear'] }
  },
  ordering: { indicators: false }
});
```
```

--------------------------------

### ccSearchClear Buttons extension button

Source: https://context7.com/datatables/columncontrol/llms.txt

Integrate the `ccSearchClear` button into your DataTables layout to provide a simple way to clear all ColumnControl searches and the global search. It automatically disables when no searches are active.

```javascript
new DataTable('#example', {
  columnControl: [
    { target: 0, content: ['orderStatus'] },
    { target: 1, content: ['search'] }
  ],
  layout: {
    topStart: { buttons: ['pageLength', 'ccSearchClear'] }
  },
  ordering: { indicators: false }
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.