This snippet displays the complete example of Datatables of JS Library with pagination. This uses the Bootstrap 4 and Jquery 3.3, to create the table using a .table-fluid class which is responsible for the responsive nature of this table. Check out this table on various screen display, this would make the table display its responsive nature. The grid displays the 3 columns with sorting enabled in ascending and descending order. It has the search with the setting for the number of records to display be displayed in the grid. Notice the number of pages displayed according to the settings and number of records. This example uses the jquery.datatables.min.css file for styling but you can have your custom styling for each element.
This is an example of Nested Accordion with verticle steps inside each accordion. Here the panel is created inside the panel to create a nested view. To create this nested view we have a super accordion defined as panel-group and then the panels containing the header and body for each accordion. Now each of these panel-body defines a new panel which would create a new group of the accordion. The data-toggle is set to collapse to give a collapsible behavior to each accordion. The innermost body contains some listed information; You would rarely see, but this could be useful in website for educational to display large content or on the sites which deals with different variety yet categories under one particular menu. You can use this on your website.