Angular Data tables multiple row section headers

Question

I have a table that is already listed in ascending desired order with two distinct sections and I want to add headers for each section but I'm not quite sure how to do so. I am using the directive Angular datatables and would like to have the end result have row titles like the "Status:New" and "Status:Open" in the example image below.

It's not clear what the solution would look like. Do you have an example? — jonmrich
– jonmrich, Commented Jul 14, 2016 at 19:34
@jonmrich See the row names "Status: New" and "Status:Open"? I want to add titles like that to my data table. I am using angular-datatables. Do you see the image? — Kandianne Pierre
– Kandianne Pierre, Commented Jul 14, 2016 at 19:37
Got it...so the image is what you want, not what you have now. Correct? — jonmrich
– jonmrich, Commented Jul 14, 2016 at 19:37
Currently there is no supported way to fix rows in the middle of your table. Your best bet is to create two tables, like @jonmrich suggests in his answer. The only other way is to manually mess with the <tr> and <td> elements, but that's complicated and risks messing up some dataTables features. Another potential option is to add a column to each row that holds its status (icon/text/whatever) and sort by those. In fact, now that I think of it, if you're willing to fix the sort order you could add a special row that "pretends" to be a divider, although that's a bit hack-y. — Chris H.
– Chris H., Commented Jul 14, 2016 at 23:19

Kandianne Pierre · Accepted Answer · 2016-08-23 01:51:55Z

1

After much research, currently there is no supported way to fix rows in the middle of the specific table I'm working with.

answered Aug 23, 2016 at 1:51

Kandianne Pierre

3241 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jonmrich · Accepted Answer · 2016-07-15 14:37:17Z

0

Add something like this after your initial code for your table. Assuming you're using 2 tables.

var table1 = $("#your_top_table").DataTable({});
$(table.table().header()).append('<tr><td>Status: New</td></tr>');

var table2 = $("#your_bottom_table").DataTable({});
$(table2.table().header()).append('<tr><td>Status: Open</td></tr>');

edited Jul 15, 2016 at 14:37

answered Jul 14, 2016 at 19:49

jonmrich

4,3738 gold badges52 silver badges96 bronze badges

2 Comments

Kandianne Pierre Over a year ago

I am not using two tables. I am just getting back one array of data that is already sorted in a specific order. @jonmrich

jonmrich Over a year ago

Are you able to add a fixed row to the top of the table for starters? Dividing this with another fixed row at some dynamically determined position is going to be very difficult.

Collectives™ on Stack Overflow

Angular Data tables multiple row section headers

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related