ngx-datatable Rowspan and Colspan

I checked all documentation for ngx-datatable.

Can someone show me how to to do it or help me to build table with rowspan and colspan

Thanks in advanced Vishal

Feb 16 '17 09:02 vishd

I think there is now possibility to do that. One column header is for one row column. Coincidentally I would open right now a feature request to have the possibility to group columns and set and grouping header for the columns. Something like the screenshot here

I think this would fit with the pinning functionality?

@vishd is that fitting with your request?

Feb 16 '17 11:02 mburger81

Row/Column spanning is not supported. I do not have any plans to support it right now but open to provide feedback if you wish to embark on that.

Feb 21 '17 23:02 amcdnl

(background: my project needs the multi-column header @mburger81 mentioned)

@amcdnl can you provide some guidance for would-be contributors?

Have you thought about an interface for (1) multi-column header or (2) for generic colspan/rowspan?
Is (1) significantly easier than (2)?
Do you foresee any architectural roadblocks (for (1) or (2)) on the contrary do you see the piece of code we should start looking that?

Apr 04 '17 15:04 eddy-geek

I have not, perhaps some type of attr on the column / rows you describe on the input of the table.
I don't think one would be easier would be easier than the other.
I do not

As you implement, please keep us in the loop and I can help :)

Apr 07 '17 15:04 amcdnl

@eddy-geek was you you able to implemented this feature? Or are there any progress on this feature?

May 01 '17 08:05 mburger81

@eddy-geek Any progress on this?

Aug 14 '17 08:08 tscislo

Any updates?

Aug 25 '17 07:08 nerdmax

@mburger81 @tscislo, no, IIRC we've used a crappy workaround instead.

Sep 05 '17 09:09 eddy-geek

I think a simple function passed to the TableColumn like span: number | ((row) => number) could be used to enable this. If the property is ever changed, then the view is refreshed, otherwise a cache is kept along with the cache of expanded rows, and not refreshed till the property is updated. CSS could be used to combine borders, etc.

Sep 05 '17 13:09 wizarrc

Oh, and as for the cache, I think a combined row/column index dictionary approach would be suitable, something that can take a row and column's index and return a boolean, which simply means skip over that cell cause it's part of a span.

Update Instead of returning a boolean, it could return some cell context containing more data such as cell width

Sep 05 '17 13:09 wizarrc

I hope to have this feature too

Nov 15 '17 14:11 sekaiga

+1

Nov 21 '17 17:11 jkon

I have achieved this using [columnMode]="'flex'" and the ngx-datatable-cell-template directive. For example you have a column that you need to be colspan=3.. Add to this cell [flexGrow]="3" and to the other cells [flexGrow]="1"

Mar 22 '18 10:03 ErvinLlojku

How to merge cells vertically (rowspan)?

Aug 10 '18 16:08 mazdik

@ErvinLlojku how did you achieve this? apparently ngx-datatable-cell-template directive doesn't have a property flexGrow — at least it's what the browser console is telling me.