Merge pull request #112 from CrowdStrike/document-default-values

Add demo about default values

docs/demos/default-value/demo/demo-a.md

@@ -0,0 +1,49 @@
+```hbs template
+<div class="h-full overflow-auto" {{this.table.modifiers.container}}>
+  <table>
+    <thead>
+      <tr>
+        {{#each this.table.columns as |column|}}
+          <th>
+            {{column.name}}
+          </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>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+import { headlessTable } from 'ember-headless-table';
+import { DATA } from 'docs-app/sample-data';
+
+import { hbs } from 'ember-cli-htmlbars';
+import { setComponentTemplate } from '@ember/component';
+
+export default class extends Component {
+  table = headlessTable(this, {
+    columns: () => [
+      { name: 'Column A', key: 'missing', options: () => ({ defaultValue: '???' }) },
+      { name: 'column B', key: 'B' },
+      { name: 'column C', key: 'alsoMissing' },
+      { name: 'column D', key: 'D' },
+      { name: 'column E', key: 'E' },
+    ],
+    data: () => DATA,
+  });
+}
+```

docs/demos/default-value/index.md

@@ -0,0 +1,44 @@
+# Default values
+
+The default value can be changed in the column config.
+
+
+## Using strict mode
+
+In strict mode, specifying a default value can be done like this:
+```js
+import Component from '@glimmer/component';
+import { headlessTable } from 'ember-headless-table';
+
+export default class Demo extends Component {
+  table = headlessTable(this, {
+    columns: () => [
+      {
+        name: 'Background color',
+        key: 'bgColor'
+        options: () => {
+          return {
+            defaultValue: '???',
+          };
+        }
+      }
+      /* ... */
+    ],
+    /* ... */
+  });
+
+  <template>
+    {{#each this.table.rows as |row|}}
+      <tr>
+        {{#each this.table.columns as |column|}}
+
+          <td>
+            {{column.getValueForRow row}}
+          </td>
+
+        {{/each}}
+      </tr>
+    {{/each}}
+  </template>
+}
+```

ember-headless-table/src/-private/interfaces/column.ts

@@ -14,7 +14,12 @@ type ColumnPluginOption<P = Plugin> = P extends BasePlugin
   ? [Constructor<P>, () => ColumnOptionsFor<SignatureFrom<P>>]
   : [P | Constructor<P>, () => unknown];
 
-export type CellOptions = Record<string, unknown>;
+export type CellOptions = {
+  /**
+   * when no value is present for a given set of data for the given column config
+   */
+  defaultValue?: string;
+} & Record<string, unknown>;
 
 export interface ColumnConfig<T = unknown> {
   /**