sticky headers for list view

packages/list/src/ListView.tsx

@@ -37,11 +37,11 @@ export default class ListView extends DateComponent<ViewProps> {
 
 
   render(props: ViewProps, state: {}, context: ComponentContext) {
-    let extraClassNames = [ 'fc-list' ]
-    let themeClassName = context.theme.getClass('bordered')
-    if (themeClassName) {
-      extraClassNames.push(themeClassName)
-    }
+    let extraClassNames = [
+      'fc-list',
+      context.theme.getClass('bordered'),
+      context.options.stickyHeader !== false ? 'fc-list-sticky' : ''
+    ]
 
     let { dayDates, dayRanges } = this.computeDateVars(props.dateProfile)
     let eventSegs = this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges)

packages/list/src/main.scss

@@ -23,13 +23,21 @@
 
   tr > * {
     padding: 8px 14px;
-    border-left: 0;
-    border-right: 0;
-    border-bottom: 0;
+    border-left: 0 !important; // OVERCOME BOOTSTRAP
+    border-right: 0 !important; // OVERCOME BOOTSTRAP
+    border-top: 0 !important; // OVERCOME BOOTSTRAP
   }
 
-  tr:first-child > * {
-    border-top: 0;
+  tr:last-child > * {
+    border-bottom: 0 !important; // OVERCOME BOOTSTRAP
+  }
+}
+
+.fc-list-sticky {
+  .fc-list-day > * {
+    position: sticky; // TODO: browser prefix?
+    z-index: 2; // TODO: var
+    top: 0;
   }
 }