Use the soc-table class when you need to style a standard html table. The table is, like the panels themed by using the extra classes 'secondary', 'accent' or 'heavy' on the surrounding div element. Optionally striping can be provided by adding the 'striped' class.
When selectable rows are required a checkbox can be added to the first column, it is recommended to use the font awesome checkbox icons and handling visibility of the correct one using javascript. When your table contains selection, add the 'select' class to the surrounding div element as well.
Table elements can also be styled, for example the header elements can be styled to show they are sortable by adding 'soc-sort' to the th element. Rows itself can be given a 'filter' class to show them with a subtle border on the left side matching the color of the filter, this will add a visual reference to the kind of record aiding users in finding the right data quicker. A row can have an 'active' style applied to it which can be used as an extra selected visual for example.
More table elements will be added later containing sort / search / page functionality.
Header | Header | Header | Actions | |
---|---|---|---|---|
cell 1 | cell 2 | cell 3 |
|
|
cell 1 | cell 2 | cell 3 |
|
|
cell 1 | cell 2 | cell 3 |
|
|
cell 1 | cell 2 | cell 3 |
|
|
cell 1 | cell 2 | cell 3 |
|
.soc-table.select>table>(thead>tr>th{Header $}*5)+(tbody>(tr>th{Cell $}*4+(th.soc-table-action>.action>i.fa.fa-bookmark[aria-hidden="true"]))*6)