Skip to content

Commit 46bc57a

Browse files
lubber-delubber-de
authored
feat(table): all scroll stuck head foot first last variant
This PR adds a stuck variant which supports to have the head, foot, first column and last column of a table being stuck while scrolling (using position sticky) You can freely stick any combination like head first stuck, foot first last stuck, head foot first stuck, first last stuck, etc. This feature needs to have the table being wrapped by a overflowing container having a fixed height (and/or optional width). That said, i also added a new scrolling container and scrolling segment variant, which can be used for that purpose. Why stuck instead of sticky or fixed? Because the other classnames already exists and provide different functionality Why not use classnames "header, footer, top, bottom, left, right" ? Because the other classnames (beside "footer") already exists and provide different functionality What about the already merged scrolling table #2134 ? Why another approach? Unfortunately the other approach cannot properly support having the first or last column fixed (I tried some very ugly approaches which needed a fixed width of the columns and especially were not able to fill the background color into the whole cell.) The new stuck variant makes use of sticky positioning which supports using a usual table element and does not have the above mentioned issues. The scrolling table works in any browser, while stuck needs modern browsers with position:sticky support to table elements . stuck possibly needs a wrapper when horizontal scrolling is not needed, while scrolling does not. That said, i also added new scrolling container and scrolling segment variants, which can be used for that purpose. If you don't want to have an extra wrapper, you can use overflowing stuck table. However, this only works if your overall table columns exceed available width. Each new variant of scrolling container, scrolling segment or overflowing table support predefined heights using short, very short, long and very long See comparison table for details. Comparison Feature stuck table scrolling table Supports fixed thead ✔️ ✔️ Supports fixed tfoot ✔️ ✔️ Supports fixed left column ✔️ Supports fixed right column ✔️ Supports combinations ✔️ Supports column sizing (wide)1 ✔️ Supports (single line) ✔️ Supports vertical scrolling ✔️ ✔️ Supports horizontal scrolling ✔️ Needs wrapper2 ✔️ Needs modern browser ✔️ Scrollbar only for tbody ✔️
1 parent f14cf4b commit 46bc57a

File tree

7 files changed

+531
-0
lines changed

7 files changed

+531
-0
lines changed

‎src/definitions/collections/table.less

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,31 @@
288288
}
289289
}
290290
}
291+
& when (@variationTableOverflowing) {
292+
& when (@variationTableOverflowingShort) {
293+
.ui.overflowing.table.short {
294+
max-height: @overflowingMobileMaxHeight * 0.75;
295+
}
296+
}
297+
& when (@variationTableOverflowingVeryShort) {
298+
.ui.overflowing.table[class*="very short"] {
299+
max-height: @overflowingMobileMaxHeight * 0.5;
300+
}
301+
}
302+
.ui.overflowing.table {
303+
max-height: @overflowingMobileMaxHeight;
304+
}
305+
& when (@variationTableOverflowingLong) {
306+
.ui.overflowing.table.long {
307+
max-height: @overflowingMobileMaxHeight * 2;
308+
}
309+
}
310+
& when (@variationTableOverflowingVeryLong) {
311+
.ui.overflowing.table[class*="very long"] {
312+
max-height: @overflowingMobileMaxHeight * 3;
313+
}
314+
}
315+
}
291316
}
292317
& when (@variationTableScrolling) {
293318
/*--------------
@@ -461,6 +486,90 @@
461486
}
462487

463488
}
489+
& when (@variationTableOverflowing) {
490+
/*--------------
491+
Overflowing
492+
---------------*/
493+
.ui.overflowing.table {
494+
display: block;
495+
overflow: auto;
496+
}
497+
@media only screen and (min-width: @tabletBreakpoint) {
498+
& when (@variationTableOverflowingShort) {
499+
.ui.overflowing.table.short {
500+
max-height: @overflowingTabletMaxHeight * 0.75;
501+
}
502+
}
503+
& when (@variationTableOverflowingVeryShort) {
504+
.ui.overflowing.table[class*="very short"] {
505+
max-height: @overflowingTabletMaxHeight * 0.5;
506+
}
507+
}
508+
.ui.overflowing.table {
509+
max-height: @overflowingTabletMaxHeight;
510+
}
511+
& when (@variationTableOverflowingLong) {
512+
.ui.overflowing.table.long {
513+
max-height: @overflowingTabletMaxHeight * 2;
514+
}
515+
}
516+
& when (@variationTableOverflowingVeryLong) {
517+
.ui.overflowing.table[class*="very long"] {
518+
max-height: @overflowingTabletMaxHeight * 3;
519+
}
520+
}
521+
}
522+
@media only screen and (min-width: @computerBreakpoint) {
523+
& when (@variationTableOverflowingShort) {
524+
.ui.overflowing.table.short {
525+
max-height: @overflowingComputerMaxHeight * 0.75;
526+
}
527+
}
528+
& when (@variationTableOverflowingVeryShort) {
529+
.ui.overflowing.table[class*="very short"] {
530+
max-height: @overflowingComputerMaxHeight * 0.5;
531+
}
532+
}
533+
.ui.overflowing.table {
534+
max-height: @overflowingComputerMaxHeight;
535+
}
536+
& when (@variationTableOverflowingLong) {
537+
.ui.overflowing.table.long {
538+
max-height: @overflowingComputerMaxHeight * 2;
539+
}
540+
}
541+
& when (@variationTableOverflowingVeryLong) {
542+
.ui.overflowing.table[class*="very long"]{
543+
max-height: @overflowingComputerMaxHeight * 3;
544+
}
545+
}
546+
}
547+
@media only screen and (min-width: @widescreenMonitorBreakpoint) {
548+
& when (@variationTableOverflowingShort) {
549+
.ui.overflowing.table.short {
550+
max-height: @overflowingWidescreenMaxHeight * 0.75;
551+
}
552+
}
553+
& when (@variationTableOverflowingVeryShort) {
554+
.ui.overflowing.table[class*="very short"] {
555+
max-height: @overflowingWidescreenMaxHeight * 0.5;
556+
}
557+
}
558+
.ui.overflowing.table {
559+
max-height: @overflowingWidescreenMaxHeight;
560+
}
561+
& when (@variationTableOverflowingLong) {
562+
.ui.overflowing.table.long {
563+
max-height: @overflowingWidescreenMaxHeight * 2;
564+
}
565+
}
566+
& when (@variationTableOverflowingVeryLong) {
567+
.ui.overflowing.table[class*="very long"] {
568+
max-height: @overflowingWidescreenMaxHeight * 3;
569+
}
570+
}
571+
}
572+
}
464573

465574

466575
/*******************************
@@ -1638,6 +1747,150 @@
16381747
}
16391748
}
16401749

1750+
& when (@variationTableStuck) {
1751+
/*--------------
1752+
Stuck
1753+
---------------*/
1754+
1755+
.ui.stuck.table:not(.inverted) {
1756+
background: @stuckBackground;
1757+
& > thead > tr {
1758+
background: @stuckHeaderBackground;
1759+
}
1760+
& > tbody > tr {
1761+
background: @stuckBackground;
1762+
}
1763+
& > tfoot > tr {
1764+
background: @stuckFooterBackground;
1765+
}
1766+
&.basic when (@variationTableBasic) {
1767+
& > thead > tr,
1768+
> tfoot > tr {
1769+
background: @stuckBackground;
1770+
}
1771+
}
1772+
}
1773+
.ui.inverted.stuck.table when (@variationTableInverted) {
1774+
& > thead > tr {
1775+
background: @invertedStuckHeaderBackground;
1776+
}
1777+
& > tbody > tr {
1778+
background: @invertedStuckBackground;
1779+
}
1780+
& > tfoot > tr {
1781+
background: @invertedStuckFooterBackground;
1782+
}
1783+
&.basic when (@variationTableBasic){
1784+
& > thead > tr,
1785+
> tfoot > tr {
1786+
background: @invertedStuckBackground;
1787+
}
1788+
}
1789+
}
1790+
& when (@variationTableStuckHead) or (@variationTableStuckFoot) {
1791+
.ui.head.stuck.table > thead,
1792+
.ui.foot.stuck.table > tfoot {
1793+
position: -webkit-sticky;
1794+
position: sticky;
1795+
z-index: @stuckZIndex;
1796+
}
1797+
}
1798+
.ui.head.stuck.table when (@variationTableStuckHead) {
1799+
border-top: 0;
1800+
& > thead {
1801+
top: 0;
1802+
bottom: auto;
1803+
& > tr:first-child > th {
1804+
border-top: @cellBorder;
1805+
}
1806+
}
1807+
&.inverted > thead > tr:first-child > th when (@variationTableInverted) {
1808+
border-top: @invertedCellBorder;
1809+
}
1810+
}
1811+
.ui.foot.stuck.table when (@variationTableStuckFoot) {
1812+
border-bottom: 0;
1813+
& > tfoot {
1814+
top: auto;
1815+
bottom: 0;
1816+
& > tr:last-child > td,
1817+
> tr:last-child > th {
1818+
border-bottom: @cellBorder;
1819+
}
1820+
}
1821+
& when (@variationTableInverted) {
1822+
&.inverted > tfoot > tr:first-child > td,
1823+
&.inverted > tfoot > tr:first-child > th {
1824+
border-top: @invertedCellBorder;
1825+
}
1826+
}
1827+
}
1828+
1829+
.ui.first.stuck.table when (@variationTableStuckFirst) {
1830+
border-left: 0;
1831+
& th:first-child,
1832+
td:first-child {
1833+
position: -webkit-sticky;
1834+
position: sticky;
1835+
left: 0;
1836+
border-left: @cellBorder;
1837+
background: inherit;
1838+
}
1839+
& when (@variationTableInverted) {
1840+
&.inverted th:first-child,
1841+
&.inverted td:first-child {
1842+
border-left: @invertedCellBorder;
1843+
}
1844+
}
1845+
}
1846+
1847+
.ui.last.stuck.table when (@variationTableStuckLast) {
1848+
border-right: 0;
1849+
& th:last-child,
1850+
td:last-child {
1851+
position: -webkit-sticky;
1852+
position: sticky;
1853+
right: 0;
1854+
border-right: @cellBorder;
1855+
background: inherit;
1856+
}
1857+
& when (@variationTableInverted) {
1858+
&.inverted th:last-child,
1859+
&.inverted td:last-child {
1860+
border-right: @invertedCellBorder;
1861+
}
1862+
}
1863+
}
1864+
& when (@variationTableCelled) {
1865+
& when (@variationTableStuckFirst) {
1866+
.ui.celled.first.stuck.table th:first-child,
1867+
.ui.celled.first.stuck.table td:first-child {
1868+
border-right: @cellBorder;
1869+
}
1870+
}
1871+
& when (@variationTableStuckLast) {
1872+
.ui.celled.last.stuck.table th:last-child,
1873+
.ui.celled.last.stuck.table td:last-child {
1874+
border-left: @cellBorder;
1875+
}
1876+
}
1877+
& when (@variationTableInverted) {
1878+
& when (@variationTableStuckFirst) {
1879+
.ui.inverted.celled.first.stuck.table th:first-child,
1880+
.ui.inverted.celled.first.stuck.table td:first-child {
1881+
border-right: @invertedCellBorder;
1882+
}
1883+
}
1884+
& when (@variationTableStuckLast) {
1885+
.ui.inverted.celled.last.stuck.table th:last-child,
1886+
.ui.inverted.celled.last.stuck.table td:last-child {
1887+
border-left: @invertedCellBorder;
1888+
}
1889+
}
1890+
}
1891+
}
1892+
}
1893+
16411894
/*--------------
16421895
Sizes
16431896
---------------*/

‎src/definitions/elements/container.less

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,5 +164,115 @@
164164
hyphens: auto;
165165
}
166166
}
167+
& when (@variationContainerScrolling) {
168+
/*--------------
169+
Scrolling
170+
---------------*/
171+
.ui.scrolling.container {
172+
overflow: auto;
173+
}
174+
@media only screen and (max-width : @largestMobileScreen) {
175+
& when (@variationContainerScrollingShort) {
176+
.ui.scrolling.container.short {
177+
max-height: @scrollingMobileMaxHeight * 0.75;
178+
}
179+
}
180+
& when (@variationContainerScrollingVeryShort) {
181+
.ui.scrolling.container[class*="very short"] {
182+
max-height: @scrollingMobileMaxHeight * 0.5;
183+
}
184+
}
185+
.ui.scrolling.container {
186+
max-height: @scrollingMobileMaxHeight;
187+
}
188+
& when (@variationContainerScrollingLong) {
189+
.ui.scrolling.container.long {
190+
max-height: @scrollingMobileMaxHeight * 2;
191+
}
192+
}
193+
& when (@variationContainerScrollingVeryLong) {
194+
.ui.scrolling.container[class*="very long"] {
195+
max-height: @scrollingMobileMaxHeight * 3;
196+
}
197+
}
198+
}
199+
200+
@media only screen and (min-width: @tabletBreakpoint) {
201+
& when (@variationContainerScrollingShort) {
202+
.ui.scrolling.container.short {
203+
max-height: @scrollingTabletMaxHeight * 0.75;
204+
}
205+
}
206+
& when (@variationContainerScrollingVeryShort) {
207+
.ui.scrolling.container[class*="very short"] {
208+
max-height: @scrollingTabletMaxHeight * 0.5;
209+
}
210+
}
211+
.ui.scrolling.container {
212+
max-height: @scrollingTabletMaxHeight;
213+
}
214+
& when (@variationContainerScrollingLong) {
215+
.ui.scrolling.container.long {
216+
max-height: @scrollingTabletMaxHeight * 2;
217+
}
218+
}
219+
& when (@variationContainerScrollingVeryLong) {
220+
.ui.scrolling.container[class*="very long"] {
221+
max-height: @scrollingTabletMaxHeight * 3;
222+
}
223+
}
224+
}
225+
@media only screen and (min-width: @computerBreakpoint) {
226+
& when (@variationContainerScrollingShort) {
227+
.ui.scrolling.container.short {
228+
max-height: @scrollingComputerMaxHeight * 0.75;
229+
}
230+
}
231+
& when (@variationContainerScrollingVeryShort) {
232+
.ui.scrolling.container[class*="very short"] {
233+
max-height: @scrollingComputerMaxHeight * 0.5;
234+
}
235+
}
236+
.ui.scrolling.container {
237+
max-height: @scrollingComputerMaxHeight;
238+
}
239+
& when (@variationContainerScrollingLong) {
240+
.ui.scrolling.container.long {
241+
max-height: @scrollingComputerMaxHeight * 2;
242+
}
243+
}
244+
& when (@variationContainerScrollingVeryLong) {
245+
.ui.scrolling.container[class*="very long"]{
246+
max-height: @scrollingComputerMaxHeight * 3;
247+
}
248+
}
249+
}
250+
@media only screen and (min-width: @widescreenMonitorBreakpoint) {
251+
& when (@variationContainerScrollingShort) {
252+
.ui.scrolling.container.short {
253+
max-height: @scrollingWidescreenMaxHeight * 0.75;
254+
}
255+
}
256+
& when (@variationContainerScrollingVeryShort) {
257+
.ui.scrolling.container[class*="very short"] {
258+
max-height: @scrollingWidescreenMaxHeight * 0.5;
259+
}
260+
}
261+
.ui.scrolling.container {
262+
max-height: @scrollingWidescreenMaxHeight;
263+
}
264+
& when (@variationContainerScrollingLong) {
265+
.ui.scrolling.container.long {
266+
max-height: @scrollingWidescreenMaxHeight * 2;
267+
}
268+
}
269+
& when (@variationContainerScrollingVeryLong) {
270+
.ui.scrolling.container[class*="very long"] {
271+
max-height: @scrollingWidescreenMaxHeight * 3;
272+
}
273+
}
274+
}
275+
}
276+
167277

168278
.loadUIOverrides();

0 commit comments

Comments
 (0)