Introducing ColumnControl

Please welcome the latest member of the DataTables family: ColumnControl! This new extension adds column-specific controls to the header and footer cells of a table and has a comprehensive set of built-in content types that provide control over columns - e.g. search, ordering and visibility. This new extension has been my primary focus for the last three months and it gives me real pleasure to introduce it to you.

Example table

Let's take a look at a table with ColumnControl configured:

Name	Position	Office	Salary
Tiger Nixon	System Architect	Edinburgh	$320,800
Garrett Winters	Accountant	Tokyo	$170,750
Ashton Cox	Junior Technical Author	San Francisco	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	$433,060
Airi Satou	Accountant	Tokyo	$162,700
Brielle Williamson	Integration Specialist	New York	$372,000
Herrod Chandler	Sales Assistant	San Francisco	$137,500
Rhona Davidson	Integration Specialist	Tokyo	$327,900
Colleen Hurst	Javascript Developer	San Francisco	$205,500
Sonya Frost	Software Engineer	Edinburgh	$103,600
Jena Gaines	Office Manager	London	$90,560
Quinn Flynn	Support Lead	Edinburgh	$342,000
Charde Marshall	Regional Director	San Francisco	$470,600
Haley Kennedy	Senior Marketing Designer	London	$313,500
Tatyana Fitzpatrick	Regional Director	London	$385,750
Michael Silva	Marketing Designer	London	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	$725,000
Gloria Little	Systems Administrator	New York	$237,500
Bradley Greer	Software Engineer	London	$132,000
Dai Rios	Personnel Lead	Edinburgh	$217,500
Jenette Caldwell	Development Lead	New York	$345,000
Yuri Berry	Chief Marketing Officer (CMO)	New York	$675,000
Caesar Vance	Pre-Sales Support	New York	$106,450
Doris Wilder	Sales Assistant	Sydney	$85,600
Angelica Ramos	Chief Executive Officer (CEO)	London	$1,200,000
Gavin Joyce	Developer	Edinburgh	$92,575
Jennifer Chang	Regional Director	Singapore	$357,650
Brenden Wagner	Software Engineer	San Francisco	$206,850
Fiona Green	Chief Operating Officer (COO)	San Francisco	$850,000
Shou Itou	Regional Marketing	Tokyo	$163,000
Michelle House	Integration Specialist	Sydney	$95,400
Suki Burks	Developer	London	$114,500
Prescott Bartlett	Technical Author	London	$145,000
Gavin Cortez	Team Leader	San Francisco	$235,500
Martena Mccray	Post-Sales support	Edinburgh	$324,050
Unity Butler	Marketing Designer	San Francisco	$85,675
Howard Hatfield	Office Manager	San Francisco	$164,500
Hope Fuentes	Secretary	San Francisco	$109,850
Vivian Harrell	Financial Controller	San Francisco	$452,500
Timothy Mooney	Office Manager	London	$136,200
Jackson Bradshaw	Director	New York	$645,750
Olivia Liang	Support Engineer	Singapore	$234,500
Bruno Nash	Software Engineer	London	$163,500
Sakura Yamamoto	Support Engineer	Tokyo	$139,575
Thor Walton	Developer	New York	$98,540
Finn Camacho	Support Engineer	San Francisco	$87,500
Serge Baldwin	Data Coordinator	Singapore	$138,575
Zenaida Frank	Software Engineer	New York	$125,250
Zorita Serrano	Software Engineer	San Francisco	$115,000
Jennifer Acosta	Junior Javascript Developer	Edinburgh	$75,650
Cara Stevens	Sales Assistant	New York	$145,600
Hermione Butler	Regional Director	London	$356,250
Lael Greer	Systems Administrator	London	$103,500
Jonas Alexander	Developer	San Francisco	$86,500
Shad Decker	Regional Director	Edinburgh	$183,000
Michael Bruce	Javascript Developer	Singapore	$183,000
Donna Snider	Customer Support	New York	$112,000

The features displayed over a plain DataTable are an order control button and dropdown in the first row of the header and search in the second row.

If you are keen to get started with ColumnControl, it is available immediately and can be configured with the download builder for installation via the DataTables CDN, download, NPM or Nuget.

A clean, configurable UI

The primary goal I had with ColumnControl was to provide arbitrarily complex interaction controls for individual columns but to do so without cluttering the UI. I also recognise that every table's data is different and it should be easy to customise the display for your data and users.

ColumnControl sets out to do this by providing a core framework which works with plugins to define specific inputs and actions. If you have used Buttons for DataTables this will be immediately familiar to you, as will the initialisation structures used for ColumnControl. A common set of classes are used to provide a consistent UI, and keep the code size small.

Icons are a great way to provide a clean UI which takes up very little space, and for that reason, ColumnControl makes more extensive use of icons than any other DataTables extension. Many of the icons are from the excellent Lucide library (ISC license, so compatible with ColumnControl's MIT license), with a number of custom additions for DataTables specific operations. The icons are SVG, so look great at any size.

Features

ColumnControl's headline features include:

• 100% configurable buttons / search - easily create the UI that suits your data
• Customisable dropdowns to provide a clean UI for your end users
• A complete set of buttons to control ordering in the DataTable
• Extensive search capabilities, including logic conditions suitable for a column's data type
• Search lists with Ajax integration
• Integration with other extensions such as ColReorder, FixedHeader and more
• Seamless state-saving integration with DataTables.

It, of course, also has all the usual features of a first-class DataTables extension, including support for all language strings to be localised, comprehensive documentation, and styling integration with all of the DataTables supported styling libraries (e.g. Bootstrap, Bulma, Fomantic UI and others).

It also has a full suite of unit tests and support for ColumnControl is included in the support plans for DataTables.

Initialisation

Full details on configuration are available in the documentation, but to demonstrate how simple it is to configure ColumnControl, consider the case where you simply want to add search inputs to the table header:

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

The initialisation of ColumnControl is done with the columnControl option. Here you can see that columnControl.target is set to 1 which targets the second row in the header (it will be created automatically if it doesn't already exist), and columnControl.content is used to define what you want to show - in this case search.

If you want to have the ColumnControl ordering controls in the header you can have multiple targets through an array:

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

In this case order is used to display the icon in the first row of the header, and ordering.handler / ordering.indicators are used to turn off DataTables' built-in ordering icons and click listener (you'll see those options used in a number of ColumnControl examples!).

You might want to extend the above and provide individual buttons for controlling a column's ordering in a dropdown - that is readily done with ColumnControl. A dropdown can be defined using an inner array in columnControl.content:

new DataTable('#myTable', {
    columnControl: [
        {
            target: 0,
            content: ['order', ['title', 'orderAsc', 'orderDesc']]
        },
        {
            target: 1,
            content: ['search']
        }
    ],
    ordering: {
        handler: false,
        indicators: false
    }
});

In this case, I've used title to show the column name at the top of the dropdown and orderAsc plus orderDesc buttons after it. This example code is close to what is used to run the example at the top of this page, although it uses columns.columnControl to provide a specific configuration for the two middle columns (adding searchList).

This discussion just scratches the surface of what is possible with ColumnControl. I'm sure you can see that with the content array you can build up any set of controls that you want. For a fuller picture of what ColumnControl can do, including search lists and column visibility](/extensions/columncontrol/examples/columnVisibility/dropdown.html), please see the ColumnControl examples.

Future work

Software is never completed, and although this 1.0 release of ColumnControl has a solid set of controls, there are items that I would like to add, including:

• Support for specifying if a column should be exported
• Server-side processing support
• Dynamic row grouping content types

If you have ideas for what would be useful additions to ColumnControl, please let me know! You can also create plugins for ColumnControl and if you do so, I'd encourage you to share them with the community.

Support DataTables

I'm delighted to make ColumnControl free open-source software under the MIT license - i.e. it is free for you to use, even for commercial applications. It does take a long time to develop this software, write the examples, tests and documentation though, so please help support the future of DataTables by purchasing Editor, or picking up a support package. You can also sponsor DataTables development via Github sponsors.

I hope you enjoy using ColumnControl - I look forward to seeing how you use it!