Dynamic Grid Column

Uzairkhan92

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Can I add a searchable option in thead? and in the left column, I want to add a dynamic column when clicking on the desired option.

allan

Can I add a searchable option in thead?

Like this? (see the comments for how to move the search to the header).

and in the left column, I want to add a dynamic column when clicking on the desired option.

Perhaps you explain this further please. What column should be dynamic? Do you mean add a new column which you click a row? DataTables doesn't allow dynamically adding and removing columns from a table.

Allan

Uzairkhan92

Yes, I want to add columns and remove columns dynamically by clicking on check box.

Uzairkhan92

One more thing, Can I make draggable columns in DT?
For instance, I want to move the first column into the last. will DT allow me to do that?

allan

Yes, I want to add columns and remove columns dynamically by clicking on check box.

You could do that with column visibility. Example.

Can I make draggable columns in DT?

See the ColReorder extension.

Allan

Uzairkhan92

Can you plz share any JSFilddle example for ColReorder extension?

kthorngren

Click on the examples link of the ColReorder extension docs Allan linked to:
https://datatables.net/extensions/colreorder/examples

Kevin

Uzairkhan92

I want to hide the sorting icon by default, when the user Hover over the table head then I want to show the sorting arrow on a specific column.

allan

You'll need to modify the default CSS in that case. This is the SCSS source for the ordering icons. That's probably the easiest way to modify it.

Allan

Uzairkhan92

I need horizontal scroll in datatable like in the picture over the screen.

Is this possible in DT?

kthorngren

Use scrolllX to enable horizontal scrolling.

Kevin

Uzairkhan92

I used ScrollX but Scroll is coming to the bottom of the table, I need to scroll over the screen. Like I shared in Pic.

allan

You mean you don't want the DataTable to fit into the browser viewport, but rather expand to take what width it needs? If so, add nowrap to the class of the table and that will stop it wrapping. You might also need to assign a width to the table container.

If that doesn't please, please link to a test case showing the issue.

Allan

Uzairkhan92

Hi,
How Can i use animation in DT grid? I want to add slide In effect the grid after loading.

kthorngren

Use the initComplete option to execute the code needed to apply the slide effect for the table. You may need to use columns.adjust() to resize the columns once the slide effect is complete.

Kevin