Finish™ Docs

.gitignore

@@ -1,4 +1,5 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
+.DS_Store
 
 # compiled output
 dist/

README.md

@@ -38,6 +38,6 @@ See the [Documentation][docs-app] for examples.
 
 [API Reference][docs-api] can be found [here][docs-api].
 
-[docs-app]: https://link-tbd
-[docs-api]: https://link-tbd
+[docs-app]: https://ember-headless-table.pages.dev/
+[docs-api]: https://ember-headless-table.pages.dev/api/modules/
 

docs-app/package.json

@@ -114,7 +114,7 @@
     "edition": "octane"
   },
   "dependencies": {
-    "@crowdstrike/ember-oss-docs": "^1.0.25",
+    "@crowdstrike/ember-oss-docs": "^1.0.29",
     "@ember/test-waiters": "^3.0.0",
     "@embroider/router": "^1.9.0",
     "dompurify": "^2.4.0",

docs/adding-style.md

@@ -1 +1,158 @@
 # Adding style
+
+ember-headless-table supports any and all styling techniques.
+- Traditional [CSS Stylesheets][css-stylesheets]
+- [CSS Modules][css-modules]
+- [Tailwind][css-tailwind]
+- [CSS-in-JS][css-in-js]
+- any combination of the above, or any styling technique not on this list
+
+If you use embroider + tailwind, and maybe also want CSS Modules, we recommend [this guide on discuss.ember.js.com][guide-modern-css]
+
+[css-stylesheets]: https://developer.mozilla.org/en-US/docs/Web/CSS
+[css-modules]: https://github.com/css-modules/css-modules
+[css-tailwind]: https://tailwindcss.com/
+[css-in-js]: https://github.com/rajasegar/ember-csz
+
+[guide-modern-css]: https://discuss.emberjs.com/t/ember-modern-css/19614
+
+<hr />
+
+Since ember-headless-table allows you to _bring your own markup_.
+There is one caveat that we require a wrapper div so that the table can install a modifier that observes container resizes, ather container-related events.
+
+
+## Example using Tailwind
+
+```gjs
+import Component from '@glimmer/component';
+import { headlessTable } from 'ember-headless-table';
+
+export class TailwindDemo extends Component {
+  table = headlessTable(this, {
+    columns: () => [ /* ... */ ] ,
+    data: () => [ /* ... */ ],
+  });
+
+  <template>
+    {{! This wrapper div is required, along with applying of table.modifiers.container }}
+    <div class="h-full overflow-auto" {{this.table.modifiers.container}}>
+      <table>
+        <thead>
+          <tr>
+            {{#each this.table.columns as |column|}}
+              <th {{this.table.modifiers.columnHeader column}}>
+                <span class="font-bold">{{column.name}}</span><br>
+              </th>
+            {{/each}}
+          </tr>
+        </thead>
+        <tbody>
+          {{#each this.table.rows as |row|}}
+            <tr>
+              {{#each this.table.columns as |column|}}
+                <td>{{column.getValueForRow row}}</td>
+              {{/each}}
+            </tr>
+          {{/each}}
+        </tbody>
+      </table>
+    </div>
+  </template>
+}
+```
+
+## Example using CSS
+
+
+Using co-located CSS in embroider following [this guide on discuss.ember.js.com][guide-modern-css].
+
+```css
+/* c-s-s-demo/styles.css */
+.my-table {
+  height: 100%;
+  overflow: auto;
+}
+
+.my-table th span {
+  font-weight: bold;
+}
+```
+```gjs
+/* c-s-s-demo/index.gjs */
+import Component from '@glimmer/component';
+import { headlessTable } from 'ember-headless-table';
+
+export class CSSDemo extends Component {
+  table = headlessTable(this, {
+    columns: () => [ /* ... */ ] ,
+    data: () => [ /* ... */ ],
+  });
+
+  <template>
+    <div class=".my-table" {{this.table.modifiers.container}}>
+      <table>
+        <thead>
+          <tr>
+            {{#each this.table.columns as |column|}}
+              <th {{this.table.modifiers.columnHeader column}}>
+                <span>{{column.name}}</span><br>
+              </th>
+            {{/each}}
+          </tr>
+        </thead>
+        <tbody>
+          {{#each this.table.rows as |row|}}
+            <tr>
+              {{#each this.table.columns as |column|}}
+                <td>{{column.getValueForRow row}}</td>
+              {{/each}}
+            </tr>
+          {{/each}}
+        </tbody>
+      </table>
+    </div>
+  </template>
+}
+```
+
+## Styling and UX
+
+With CSS / Tailwind / etc, some styling of certain ui elements, such as a resize-handle, may be a smidge tricky.
+
+All demos throughout the these docs will include the tailwind version of how to style these elements.
+
+For example, in the [column resizing demo](/docs/plugins/column-resizing),
+the way the resizing indicator is done requires a couple tricks:
+
+```glimmer
+<button
+  {{! resizeHandle is provided by the column-resizing plugin }}
+  {{resizeHandle column}}
+  {{!--
+    styling for this button to be slightly left of the column so that the button looks
+    like it's the boundary between the columns
+  --}}
+  class="reset-styles absolute -left-4 cursor-col-resize focusable group-first:hidden"
+>
+  ↔
+</button>
+
+{{!--
+  boolean whos return value is managed by the plugin, but used to optionally show a div
+  when this particular column is being resized
+--}}
+{{#if (isResizing column)}}
+  <div
+    {{!--
+      using absolute positioning requires *relative* positioning on the `th`
+      that contains this div + button combo
+    --}}
+    class="absolute -left-3 -top-4 bg-focus w-0.5 transition duration-150"
+    {{!--
+      resizeHeight is the calculation of the container height (the div around the table)
+      + some arbitrary value in pixels for visual offset of the line drawn by this div.
+    --}}
+    style="height: {{this.resizeHeight}}"></div>
+{{/if}}
+```

docs/demos/kitchen-sink/demo/demo-a.md

@@ -1,5 +1,5 @@
 ```hbs template
-<div class="flex gap-2">
+<div class="flex gap-2 flex-wrap">
   {{#each this.table.columns as |column|}}
     <span>
       {{column.name}}:
@@ -13,11 +13,14 @@
   {{/each}}
 </div>
 <div class="h-full overflow-auto" {{this.table.modifiers.container}}>
-  <table>
+  <table class="w-[150%]">
     <thead>
       <tr>
         {{#each this.columns as |column|}}
-          <th {{this.table.modifiers.columnHeader column}} class="relative group">
+          <th
+            {{this.table.modifiers.columnHeader column}}
+            class="{{if (this.isSticky column) 'bg-basement' 'bg-ground-floor'}} relative group"
+          >
             <button {{this.resizeHandle column}} class="reset-styles absolute -left-4 cursor-col-resize focusable group-first:hidden">
               ↔
             </button>
@@ -55,7 +58,10 @@
       {{#each this.table.rows as |row|}}
         <tr>
           {{#each this.columns as |column|}}
-            <td>
+            <td
+              {{this.table.modifiers.columnHeader column}}
+              class="{{if (this.isSticky column) 'bg-basement' 'bg-ground-floor'}}"
+            >
               {{column.getValueForRow row}}</td>
           {{/each}}
         </tr>
@@ -87,6 +93,9 @@ import {
 import {
   DataSorting, sort, isAscending, isDescending
 } from 'ember-headless-table/plugins/data-sorting';
+import {
+  StickyColumns, isSticky
+} from 'ember-headless-table/plugins/sticky-columns';
 
 import { DATA } from 'docs-app/sample-data';
 
@@ -96,20 +105,30 @@ export default class extends Component {
   table = headlessTable(this, {
     columns: () => [
       { name: 'column A', key: 'A',
-        pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 200 }))]
+        pluginOptions: [
+          ColumnResizing.forColumn(() => ({ minWidth: 200 })),
+          StickyColumns.forColumn(() => ({ sticky: 'left' })),
+        ]
       },
       { name: 'column B', key: 'B',
         pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 200 }))]
       },
       { name: 'column C', key: 'C',
         pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 200 }))]
       },
+      { name: 'column D', key: 'D',
+        pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 200 }))]
+      },
+      { name: 'column E', key: 'E',
+        pluginOptions: [ColumnResizing.forColumn(() => ({ minWidth: 200 }))]
+      },
     ],
     data: () => this.data,
     plugins: [
       ColumnReordering,
       ColumnVisibility,
       ColumnResizing,
+      StickyColumns,
       DataSorting.with(() => ({
         sorts: this.sorts,
         onSort: (sorts) => this.sorts = sorts,
@@ -153,6 +172,8 @@ export default class extends Component {
   isDescending = isDescending;
 
   isResizing = isResizing;
+
+  isSticky = isSticky;
 }
 
 /**

docs/index.md

@@ -13,9 +13,9 @@ title: Usage
 * ember-auto-import >= v2
 * ember-source >= 3.28
 * embroider safe + optimized
-* typescript >= 4.5<br>
-  Note that types changes will be considered bugfixes until Glint support is added to ember-headless-table
-* Glint -- not yet<br>
+* typescript >= 4.5
+* Glint >= 0.9
+
   All Glint changes will be considered bugfixes until Glint 1.0 is released.
 
 ## Installation

docs/plugins/column-reordering/index.md

@@ -2,7 +2,7 @@
 
 API Documentation available [here][api-docs]
 
-[api-docs]: link://tbd
+[api-docs]: /api/modules/plugins_column_reordering
 
 ## Usage
 

docs/plugins/column-resizing/index.md

@@ -1,10 +1,8 @@
 # Column resizing
 
-
-
 API Documentation available [here][api-docs]
 
-[api-docs]: link://tbd
+[api-docs]: /api/modules/plugins_column_resizing
 
 ## Usage
 

docs/plugins/column-visibility/index.md

@@ -2,16 +2,40 @@
 
 API Documentation available [here][api-docs]
 
-[api-docs]: link://tbd
+[api-docs]: /api/modules/plugins_column_visibility
 
 ## Usage
 
 ### ColumnOptions
 
+Columns can be individually configured
+
+```js
+table = headlessTable(this, {
+  columns: () => [
+    {
+      name: 'column A',
+      key: 'A',
+      pluginOptions: [
+        ColumnVisibility.forColumn(() => ({ isVisible: false }))
+      ]
+    },
+    /* ... */
+  ],
+  /* ... */
+})
+```
+
+See the API Documentation [here][api-docs] for the full list of options and descriptions.
+
 ### TableOptions
 
+None
+
 ### Preferences
 
+The visibility state will be stored in preferences, per column.
+
 ### Helpers + StrictMode
 
 There are convenience helpers for aiding in more ergonomic template usage when using this plugin.

docs/plugins/data-sorting/index.md

@@ -2,16 +2,22 @@
 
 API Documentation available [here][api-docs]
 
-[api-docs]: link://tbd
+[api-docs]: /api/modules/plugins_data_sorting
 
 ## Usage
 
 ### ColumnOptions
 
+None
+
 ### TableOptions
 
+None
+
 ### Preferences
 
+None
+
 ### Helpers + StrictMode
 
 There are convenience helpers for aiding in more ergonomic template usage when using this plugin.

docs/plugins/sticky-column/demo/demo-a.md

@@ -34,7 +34,7 @@
 import Component from '@glimmer/component';
 
 import { headlessTable } from 'ember-headless-table';
-import { StickyColumns, isSticky, styleFor } from 'ember-headless-table/plugins/sticky-columns';
+import { StickyColumns, isSticky } from 'ember-headless-table/plugins/sticky-columns';
 import { ColumnResizing } from 'ember-headless-table/plugins/column-resizing';
 import { ColumnVisibility } from 'ember-headless-table/plugins/column-visibility';
 
@@ -70,7 +70,6 @@ export default class extends Component {
    *   [property on this component] = [variable in scope]
    */
   isSticky = isSticky;
-  styleFor = styleFor;
 }
 ```
 

docs/plugins/sticky-column/index.md

@@ -2,7 +2,7 @@
 
 API Documentation available [here][api-docs]
 
-[api-docs]: link://tbd
+[api-docs]: /api/modules/plugins_sticky_columns
 
 ## Usage