Why is 'dom' marked deprecated?

gitzi

Can someone clarify for me. Is creating custom layouts harder now with 'layout'? With 'dom' it is easy to align two default elements to the left (e.g. search box and page info) and add id and classes to containers. With 'layout' I can't add two elements into one container, right? (Container e.g. topX, topStartX, bottomStartX)

I know dom is still available in Version 2 but I read it will be removed in Version 3, so I'm concerned this will make custom layouting harder. I think the 'layout' feature makes things easier when it comes to rendering html, but I'm not sure if I was able to render two default elements together into one container.

allan

With 'dom' it is easy to align two default elements to the left (e.g. search box and page info)

You can do that with layout as well - use an array for the position:

topStart: [
  'search',
  'info'
]

And a little CSS:

div.dt-container div.dt-layout-row:first-child div.dt-layout-cell:first-child div {
  display: inline-block;
  margin-right: 1em;
}

https://live.datatables.net/qeviboqo/1/edit

You are right that you cannot currently add an id or class name to a "cell" in the container. If that is something that the community needs, then I can certainly look at adding it in.

You are right that there is less flexibility with layout than with dom, but it is also so much more manageable, particularly if you are using a styling framework such as Bootstrap. It is a trade off, and one that I think is worth it, given that it should cover 99% of use cases.

Allan

gitzi

Oh good, thanks for clarification. Guess, I missed that info. Thank you

miken32

You are right that you cannot currently add an id or class name to a "cell" in the container. If that is something that the community needs, then I can certainly look at adding it in.

@allan I would like to see this ability added back in as well; the CSS frameworks like Bootstrap and Tailwind really get one into the habit of using classes instead of working with CSS directly.

My first thought is a simple className property on the layout options so we could do, e.g. layout = {topStart: {search: {className: "myclass"}}}; and have this class name added to (in this case) div.dt-search. Getting more complicated, a wrapper property that would accept a jQuery object would bring things closer to the flexibility of the old dom option. So we could do like layout = {topStart: {search: {wrapper: $("<div>").addClass("myclass")}}}; and then have div.dt-search placed inside that element.

Also helpful would be automatic addition of end margins for any block put into *Start sections, and start margins for any block put into *End sections. They would not affect the layout by default, but would be helpful when users want to add additional blocks without having to deal with CSS.

gitzi

@miken32 My current solution is, I use only 'top' or 'bottom' (not Start or End). I render my whole custom layout into this one box with layout : { 'top': [{function() {return '<mybootstrapstuff>';}, 'search', 'search', 'info']}, then in the post process function of datatables (initComplete) I move the trailing default elements ('search', 'search', 'info') into the correct wrapper of my bootstrap structure.

@allan So yes, adding classes and id like in 'dom' would be very nice again, but also this workaround is enough or me so far.