DataTables header with layout API
DataTables header with layout API
sespler
Posts: 26Questions: 13Answers: 0
So recently I have been updating some tables to 2.x, and as such migrating to the new layout API from the older sDom/Dom option.
My question is about grouping items using the layout. My desired behavior is something like a combination of the top2 and top5 shown here: https://datatables.net/examples/layout/grid.html. Id like to have something on the far left, something in the middle, and 2 things on the far right.
Is there a way for me to accomplish this?
I tried something like this:
// Layout
layout: {
topStart: null,
topEnd: null,
top: {
rowClass: 'dt-layout-row table_title',
features: [
'pageLength',
{
div: {
text: this.getAttribute('title'),
}
},
{
features: [
'search',
colVisTemplate
]
}
]
},
},
with colVisTemplate as a cloned element - but this produces the 4 elements evenly distributed across the header.
Is there a way I can create a div, and then add the standard 'search' inside of it?
Also I noticed that when I add the rowClass option, it removes the default dt-layout-row class from the row - is that intended behavour?
Thanks,
Seth.
This question has an accepted answers - jump to answer
Answers
Unfortunately, that is a combination that
layoutdoesn't currently support. When using a full row (e.g.top) it usesjustify-content: space-between;and places the items at the same level, regardless of nesting, so unfortunately the 2 things on the right are going to trip up.The the moment, what I think you would have to do is manipulate the created DOM after initialisation. Put an extra
divin and then move the two items into it. That would get the layout you want, but it is a pain to need to do that.I've just been pondering if this might be a way to resolve the first issue - allow
divto accept an array of features. That isn't possible at the moment, but it might be the right way forward. Let me ponder that a bit.Yes. The idea was to make it completely custom.
Allan
Hi Allan,
Thanks very much for your thoughts. If you ever end up allowing a list of features inside the div feature that would be a great solution (imo).