Complex datatable

Complex datatable

nikhaldennnikhaldenn Posts: 7Questions: 1Answers: 0

Hello guys,
how can we build table like this? is it possible? i checked website source, it was build-in with datatable.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 19,891Questions: 26Answers: 4,691

    There is a FixedColumns extension which it sounds like you are referring to. Here are some examples. Is this what you are looking for?

    Kevin

  • nikhaldennnikhaldenn Posts: 7Questions: 1Answers: 0

    thank you for your answer. But also there is a button on the image to collapse header columns. how may i do it? it looks like it splits datatable into 2. is there any example for this too?

  • kthorngrenkthorngren Posts: 19,891Questions: 26Answers: 4,691
    edited November 2023

    But also there is a button on the image to collapse header columns.

    Not sure exactly what this means but it doesn't sound like a Datatables feature. I would look for the button's click event handler to see what its doing.

    it looks like it splits datatable into 2.

    I assumed that's the FixedColumns extension. If not I'm not sure hwat you are referring to.

    Can you post a link to the page so we can take a look at what its doing?

    Maybe you can post the Datatables initialization code.

    Kevin

  • nikhaldennnikhaldenn Posts: 7Questions: 1Answers: 0

    thank you for answer. Anyone could help?

  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin

    We might be able to if you can post a link to a page showing the issue, as Kevin requested. It is very hard to debug an image :)

    Allan

  • nikhaldennnikhaldenn Posts: 7Questions: 1Answers: 0

    sitechecker.pro/app/main/dashboard

    this is the website i show, on rank tracker page. you can sign up with trial no need cc and check the table.

  • kthorngrenkthorngren Posts: 19,891Questions: 26Answers: 4,691
    edited November 2023

    This is not using the Datatables library supplied by this site. It looks like its using a library called Ngx-Datatable. This is the table on that page:

    <ngx-datatable _ngcontent-fsm-c335="" ngxdatatableoverridescroll="" trackbyprop="id" class="ngx-datatable keywords-advanced-table material without-shadow pined-columns fixed-header fixed-row scroll-horz selectable checkbox-selection" ngx-datatable-override-scroll="2b4f489e">
    ....
    </ngx-datatable>
    

    Searching for ngx-datatable pulls up this article:
    https://www.c-sharpcorner.com/article/how-to-use-ngx-datatable-to-show-the-data-in-grid-view-using-angular-8/

    However you can do the same things with Datatables from this site. Use the FixedColumns extension to fix the left most columns.

    The Basic and Advanced buttons reload the table data with different column configurations. Maybe from a different data source, not sure. You can load ajax data like this example and define the columns. When one of the buttons is clicked you can reinitialize Datatables with the new column config and reload the data, like the example.

    Its doing some data rendering for the Advanced button, like this example.

    Datatables also supports exporting the data like the page you linked. See this example.

    Kevin

  • nikhaldennnikhaldenn Posts: 7Questions: 1Answers: 0

    thank you you are such a good help. one last thing, if you notice there is a icon in the middle to collapse columns titles. also it can resize the rows. It looks like it split each row into 2. how may i do this with datatable?

  • kthorngrenkthorngren Posts: 19,891Questions: 26Answers: 4,691

    Do you mean the Manage columns button to show and hide columns? Use Column Visibility like this example.

    Kevin

  • nikhaldennnikhaldenn Posts: 7Questions: 1Answers: 0

    I mean this one (red)

  • kthorngrenkthorngren Posts: 19,891Questions: 26Answers: 4,691
    edited November 2023 Answer ✓

    It looks like that button hides or shows the Volume, Trend, Pos and 1 Day columns. There is nothing built into Datatables to show a button like this. One option is to use Column Visibility like this example. Another option is to create your own button then use the columns().visible() API to show/hide the columns.

    Kevin

  • nikhaldennnikhaldenn Posts: 7Questions: 1Answers: 0

    ok i'll check all out. You're the best, thank you sir.

Sign In or Register to comment.