Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Finish™ Docs #16

Merged
merged 9 commits into from
Oct 16, 2022
1 change: 1 addition & 0 deletions docs/adding-style.md
Original file line number Diff line number Diff line change
@@ -35,6 +35,7 @@ export class TailwindDemo extends Component {
});

<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>
23 changes: 19 additions & 4 deletions docs/plugins/writing-your-own.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
# Writing your own

Plugins are a good way to provide functionality to every part of a table without needing to add branching logic to a particular table's implementation.
`ember-headless-table` provides hooks in to the plugin system in a way that allows for unlimited plugin use with 0 change to the template markup.
`ember-headless-table` provides hooks in to the plugin system in a way that allows for unlimited plugin use without any changes to the template markup.


This document is an overview of the plugin system. For details, see the _[Plugin API Documentation][docs-plugins]_.

<small>Note that the documentation generation tool includes the internal file path of each module, which is useful for finding where to contribute, but this file path does not represent the public/private visibility of the APIs within (the import paths would though)</small>

[docs-plugins]: /api/modules/plugins
[docs-table-option-plugins]: /api/interfaces/index.TableConfig#plugins
@@ -30,9 +29,18 @@ The key properties to look at are:
- modifiers -- for interacting with and providing behavior to specific elements
- `containerModifier` - for the table's container div
- `headerCellModifier` - for each `<th>`
- `rowCellModifier` - **coming soon** - for each `<td>`
- `rowModifier` - **coming soon** - for each `<tr>`
- `reset` -- a hook that the table will call on your plugin if you have state to revert to

With these capabilities, features for tables may be built in a way that relieves implementation complexity on the consumer, such as:

- grouped rows
- editing data
- pagination
- column resizing
- sticky columns / column pinning
- drag and droppable rows

## Managing state

A plugin may manage state for the whole table and/or for each column.
@@ -123,7 +131,8 @@ tablePreferences.set('some-key', 'someValue');
tablePreferences.delete('some-key');
```

Note that the data key in preferences must be serializable to JSON via JSON.stringify.
Note that the data in preferences must be serializable to JSON
via JSON.stringify -- so sticking to vanilla objects and arrays will result in the best compatibility between serialization and de-serialization.


## Recommended plugin file / project Layout
@@ -143,3 +152,9 @@ Ultimately, you can do whatever you want, but this is the structure that `ember-
// Types
export type { ColumnOptions, TableOptions } from './plugin';
```


-----------------------------------------------


<small>Note that the documentation generation tool includes the internal file path of each module, which is useful for finding where to contribute, but this file path does not represent the public/private visibility of the APIs within (the import paths would though)</small>