Is it possible to render custom row if the screen size is smaller?

teemomr

Hi,

I wanted to know if it's possible to display a custom row format - i.e, a list of strings or something based on the row data if the table size is small (like on a mobile). I know about the responsive module that adds a button or adds a child row, but that is not the solution I'm looking for.

For example, if the original table is like the following on a normal full size display:

How can I make the rows display specific info like the following with only specific columns displayed? (I have only modified the first row)

Is this even possible? This would require me to edit the appearance of the row when the table reaches a specific size because I'm not sure if it's possible with the responsive module.

Can anyone help with this?

Thank you!

colin

Only if you have child rows - these can always be visible and the '+' removed. The reason being is that the data needs to be the same shape in all rows, i.e. the same number of columns, data type, etc, otherwise the ordering wouldn't make sense. With child rows, the child isn't considering for the ordering, only the parent is.

Colin

teemomr

@colin thank you for your suggestion. I do have childrows, but they are more like "view more info about this row" type of thing that is fetched from the server when the server wants to expand.

I was looking through the responsive documentation again and would what I ask for be possible with display: $.fn.dataTable.Responsive.display.childRowImmediate, ?

Right now the default behavior is that it displays all the remaining columns as immediate row, but would it be possible to display specific rows or completely override the render function of this?

colin

Yep, you can use display: $.fn.dataTable.Responsive.display.childRowImmediate with a custom renderer - see example here. That's taken the final example from responsive.details.renderer and joined both options together, so all unshown columns in the primary table are added to a responsive child table immediately. I also added responsive.details.type with none so that the + symbols aren't seen.

Colin

teemomr

@colin - Thank you! this should work for the problem I'm trying to solve!