Advanced interaction
features for your tables.

Comprehensive editing
library for DataTables.

Manual

Download

≡ Show site navigation

Search

75946 results 1821-1830

Examples

RowGroup › Bootstrap 4
This example shows DataTables and the RowGroup extension being used with Bootstrap 4 providing the styling. The DataTables / Bootstrap 4 integration provides seamless integration for DataTables to be used in a Bootstrap 4 page.
RowGroup › Bootstrap 3
This example shows DataTables and the RowGroup extension being used with the Bootstrap framework providing the styling. The DataTables / Bootstrap integration provides seamless integration for DataTables to be used in a Bootstrap page.
RowGroup › Start and end grouping
It can often be useful to have grouping rows at the start and the end of a group to show different summary information about the group. RowGroup provides two rendering options - rowGroup.startRender and rowGroup.endRender - as the naming implies, one for the group start and one for the group end, allowing them to be configured independently. This example shows the rowGroup.startRender left with its default state, while the rowGroup.endRender shows a summary of the information in the group - in this case an average salary.
RowGroup › Simple initialisation
The RowGroup extension for DataTables provides an easy to use row grouping feature for DataTables (the clue is in the name!). It can be configured via the rowGroup parameter and you will almost always wish to use the rowGroup.dataSrc option to tell the software what data point in the table's source data to use to get the grouping information. In this example the Office column (column index 2) is used.
RowGroup › Integration with Responsive
This example shows RowGroup being used with the Responsive extension for DataTables. Responsive allows the table to dynamically grow and shrink as the page is resized, or loaded on browsers with different sizes of display. As can be seen with this example, RowGroup and Responsive interact together exactly as would be expected, combining their respective functionality.
RowGroup › Group with a range of values
The other examples in this section groups the rows based on specific values in the columns. This example demonstrates how you can group by any criteria, such as an age range, by implementing rowGroup.dataSrc as a function to return a customised grouping for the rows.
RowGroup › Multi-level grouping
RowGroup provides the ability to group data a multiple levels. This example shows the rowGroup.dataSrc option being used as an array to specify the Office as the top level group and Position as the second level. A little CSS is used to indent the first column to reflect the visual nesting of data (click the "CSS" tab below to view).
RowGroup › Initialisation
The examples in this section demonstrate how RowGroup can be initialised in DataTables and how the options for the software can be configured.
RowGroup › Indenting to aid grouping
This example uses a simple padding-left on the first column of the table to aid with visual identification of the grouping that RowGroup provides. The effect is subtle, but it helps draw the eye to the hierarchy that is applied.
RowGroup › Fixed ordering
Grouped information typically makes most sense when the table is also ordered by the data point that is being used to group the rows. In DataTables the orderFixed option can be used to define an ordering condition that will always be applied before the end user's own ordering. In this example the table is always ordered by the Office column first, but the end user has the option to order the data inside those groups as they required.

Forum

Page navigation