Custom content

While using ColumnControl you might find that you wish to create a custom content type to perform a specific action on a column which isn't covered by the built-in content types. This can readily be done by adding to the DataTable.ColumnControl.content object.

The keys for this object define the content type's name (i.e. what is used in the columnControl.content array) and must have two properties:

• defaults - an object that has a list of default properties for the content type. This could be empty if there are no customisable options.
• init - a function that is called when the content type is created. It takes a single parameter - a configuration object with the same structure as the defaults (ColumnControl will merge any defined properties with the defaults for you) and must return an HTML element which is inserted into the content list.

As a simple example:

DataTable.ColumnControl.content.myButton = {
    defaults: {
        text: 'My Button'
    },
    init: function (config) {
        let button = document.createElement('button');
        button.textContent = config.text;

        button.addEventListener('click', function () {
            alert('You have clicked my button!');
        });

        return button;
    }
};

This can then be used with the following:

new DataTable('#myTable', {
    columnControl: ['myButton']
});

// or with custom text:

new DataTable('#myTable', {
    columnControl: [
        {
            extend: 'myButton',
            text: 'This is my button'
        }
    ]
});

Built-in helpers

That's the basics, but if you want the custom component to seamlessly integrate with the other ColumnControl content, you need to consider the DOM structure and styling. ColumnControl has a number of built-in classes to help provide this consistent UI:

• Button - simple buttons that work in the header / footer and in dropdowns
• CheckList - A list of toggle buttons (used in colVis and searchList)
• SearchInput - A common search input class.

The APIs for these classes aren't documented here but are fully defined and described in the Typescript source for ColumnControl.

Icons

ColumnControl has icons for all of its built-in content types. These are SVG icons primarily from the Lucide project, which are open source and available under the ISC License. A few of the icons have been developed specifically for ColumnControl (e.g. adding and removing from the ordering state).

The icons are available in DataTable.ColumnControl.icons, which is a writeable object if you wish to modify one or more of the built-in icons (e.g. switch to FontAwesome icons), or if you wish to add an extra icon for a new custom button. Simply make sure that the icon added is valid SVG (the icons in ColumnControl use a view box of "0 0 24 24" and height / width of 16 by default).

Sharing

If you've created a plugin for ColumnControl, please consider sharing it with the community so others can benefit from your work as well. You might save someone else from developing the same feature!