Adding an item to the ColumnControl?

frankyy

Link to test case: https://coffee-chickie-94.tiiny.site/

Description of problem:

I was looking at the adding custom control page in the documentation :
but I couldn't add a button to the columncontrol hamburger menu. How can I do that?

This is my code: https://beige-lenna-71.tiiny.site/

frankyy

Also, in the menu, how can I get the current column? I want to add a 'Group by' option to the menu, so when it's selected, the table will be grouped by the current column.

allan

There is a Button class in ColumControl which you could use - new DataTable.ColumnControl.Button(...).

It would probably be best to take a look at how some of the other buttons operate - e.g. the orderAsc one.

Excellent idea about row grouping! I reckon that should be a built in option that.

I can take a look at adding that, or would welcome a pull request if you want to take a crack at it.

Allan

frankyy

@allan I had time this morning and I tried to build the project in macos but building the ColumnControl extension gave error and examples didn't render corectly, so I need to make it using button.

I tried like that but couldn't make it work. Any hints?

            let table;
            DataTable.ColumnControl.content.myButton = new DataTable.ColumnControl.Button(

                { text: 'Group by', action: function (e, dt, node, config, column) { const dataSrc = column.dataSrc(); toggleGroup(dataSrc); } }
            );

            table = new $('#myGrid').DataTable({
                data: tableData,
                columns: columnDefs.map(c => ({ data: c.data, title: c.title, width: c.width, className: c.className, render: c.render, orderable: c.orderable })),
                columnDefs: columnDefs,
                columnControl: ['myButton'],
                ...

I can update the docs with the working example if I can successfully make it

allan

ColumControl's Button class doesn't accept a constructor like you have there. It expects a single argument - a DataTables API instance. You then use methods such as handler to add the event handler function. See the orderAsc link I gave above for how it should be used.

Allan