Releases: CrowdStrike/ember-headless-table
[email protected]
Patch Changes
-
#121
2175782
Thanks @NullVoxPopuli! - Add new util for the resizing plugin to help styles cells in non-header rows in non-tables (such as grids).To use it,
import { styleStringFor } from 'ember-headless-table/plugins/column-resizing'; // ... // rows.gjs <template> {{#each @table.rows as |row|}} <div role="row"> {{#each @table.columns as |column|}} <div role="cell" style={{styleStringFor column}}>{{column.getValueForRow row}}</div> {{/each}} </div> {{/each}} </template>
[email protected]
Minor Changes
-
#110
a9c19c7
Thanks @NullVoxPopuli! - Add new "query" util:hasPlugin
, allowing consumers of the headlessTable to
ask if a plugin is active and get a boolean response.Example:
import { headlessTable } from 'ember-headless-table'; import { hasPlugin } from 'ember-headless-table/plugins'; import { DataSorting } from 'ember-headless-table/plugins/data-sorting'; // ... ✂️ ... let table = headlessTable(this, { columns: () => [], data: () => [], plugins: [DataSorting], }); hasPlugin(table, DataSorting); // => true
Patch Changes
-
#108
40649c9
Thanks @NullVoxPopuli! -deserializeSorts
now will gracefully return an empty array upon receiving empty input.Example:
import { deserializeSorts } from 'ember-headless-table'; deserializeSorts(''); // => []
Previously, an error would be reported:
No key found for input: `` using `.` as a separator
which wasn't all that helpful.
When using the data-sorting plugin with this util, it is perfectly safe to "deserialize sorts" to an empty array
and have that empty array be equivelant to no sorting being applied at all.
Minor Changes
-
#94
310a6e0
Thanks @NullVoxPopuli! - An alternative, yet more verbose, option is now available for the sticky / pinnable columns plugin.This is, in part, due to waiting on
RFC#883: add new timing capabilities to modifier manager.But also, as an escape hatch for performance sensitive situations where one would want to avoid altering any style attributes during render (as is one of the primary use cases of RFC#883) as this causes repaint calculations and degraded performance in the browser.
This new technique for the sticky/pinnable colums plugin allows you to set the
style
attribute so that the browser can calculate layout in a single pass.To opt in to this, two things must be done:
-
invoke the
styleStringFor
helper in the template, and set the result to thestyle
attribute for theth
andtd
cells.import { styleStringFor } from 'ember-headless-table/plugins/sticky-columns' // ... <template> <div class="h-full overflow-auto"> <table> <thead> <tr class="relative"> {{#each @table.columns as |column|}} <th style="{{styleStringFor column}}"> {{column.name}} </th> {{/each}} </tr> </thead> <tbody> {{#each @table.rows as |row|}} <tr class="relative"> {{#each @table.columns as |column|}} <td style="{{styleStringFor column}}"> {{column.getValueForRow row}} </td> {{/each}} </tr> {{/each}} </tbody> </table> </div> </template>
-
when configuring the
StickyColumns
plugin inheadlessTable
, configure the theworkaroundForModifierTimingUpdateRFC883
flag totrue
. This allows td and th cells to have modifiers without causing repaints due to style changes caused by the sticky columns plugin.
class Example { table = headlessTable(this, { columns: () => [ // ... ], // ... plugins: [ StickyColumns.with(() => ({ workaroundForModifierTimingUpdateRFC883: true, })), ], }); }
-
Patch Changes
-
#81
57c22d4
Thanks @NullVoxPopuli! - Prevent hard-to-debug issues that occur with incorrect column configs.
One such way problems can occur is when thekey
property is duplicated
for multiple column configs.This is now eagerly prevented via dev-time Error.
All the column config validity checking code is removed in production builds
via@embroider/macros
macroCondition(isDevelopingApp())
.
[email protected]
Minor Changes
-
#94
310a6e0
Thanks @NullVoxPopuli! - An alternative, yet more verbose, option is now available for the sticky / pinnable columns plugin.This is, in part, due to waiting on
RFC#883: add new timing capabilities to modifier manager.But also, as an escape hatch for performance sensitive situations where one would want to avoid altering any style attributes during render (as is one of the primary use cases of RFC#883) as this causes repaint calculations and degraded performance in the browser.
This new technique for the sticky/pinnable colums plugin allows you to set the
style
attribute so that the browser can calculate layout in a single pass.To opt in to this, two things must be done:
-
invoke the
styleStringFor
helper in the template, and set the result to thestyle
attribute for theth
andtd
cells.import { styleStringFor } from 'ember-headless-table/plugins/sticky-columns' // ... <template> <div class="h-full overflow-auto"> <table> <thead> <tr class="relative"> {{#each @table.columns as |column|}} <th style="{{styleStringFor column}}"> {{column.name}} </th> {{/each}} </tr> </thead> <tbody> {{#each @table.rows as |row|}} <tr class="relative"> {{#each @table.columns as |column|}} <td style="{{styleStringFor column}}"> {{column.getValueForRow row}} </td> {{/each}} </tr> {{/each}} </tbody> </table> </div> </template>
-
when configuring the
StickyColumns
plugin inheadlessTable
, configure the theworkaroundForModifierTimingUpdateRFC883
flag totrue
. This allows td and th cells to have modifiers without causing repaints due to style changes caused by the sticky columns plugin.
class Example { table = headlessTable(this, { columns: () => [ // ... ], // ... plugins: [ StickyColumns.with(() => ({ workaroundForModifierTimingUpdateRFC883: true, })), ], }); }
-
Patch Changes
-
#81
57c22d4
Thanks @NullVoxPopuli! - Prevent hard-to-debug issues that occur with incorrect column configs.
One such way problems can occur is when thekey
property is duplicated
for multiple column configs.This is now eagerly prevented via dev-time Error.
All the column config validity checking code is removed in production builds
via@embroider/macros
macroCondition(isDevelopingApp())
.
[email protected]
Minor Changes
-
#58
f885ebb
Thanks @NullVoxPopuli! - New Metadata plugin, for allowing arbitrary data to be stored for each column as well as the whole table.
This can be useful eliminating prop-drilling in a UI Table implementation consuming the
headlessTable.For example, setting up the table can be done like:
import { headlessTable } from 'ember-headless-table'; class Example { /* ... */ table = headlessTable(this, { columns: () => [ { name: 'A', key: 'A' }, { name: 'B', key: 'B', pluginOptions: [ Metadata.forColumn(() => ({ isBulkSelectable: false, })), ], }, { name: 'D', key: 'D', pluginOptions: [Metadata.forColumn(() => ({ isRad: this.dRed }))], }, ], data: () => DATA, plugins: [ Metadata.with(() => ({ onBulkSelectionChange: (...args) => this.doSomething(...args), })), ], }); }
To allow "bulk selection" behaviors to be integrated into how the Table is rendered --
which for fancier tables, my span multiple components.For example: rows may be their own component
// Two helpers are provided for accessing your Metadata import { forColumn /*, forTable */ } from 'ember-headless-table/plugins/metadata'; const isBulkSelectable = (column) => forColumn(column, 'isBulkSelectable'); export const Row = <template> <tr> {{#each @table.columns as |column|}} {{#if (isBulkSelectable column)}} ... render some checkbox UI ... {{else}} <td> {{column.getValueForRow @datum}} </td> {{/if}} {{/each}} </tr> </template>;
-
#66
3075a5c
Thanks @NullVoxPopuli! - Add a new API for the column-reordering plugin that allows for
managing column order independently of the table's column order,
for example, in a configuration UI / preview, one may want to
see how their changes will look before applying them to the table.To use this new API, there are two relevant imports:
import { ColumnOrder, setColumnOrder, } from 'ember-headless-table/plugins/column-reordering';
To manage the "preview column order",
you'll want to instantiate theColumnOrder
class,
and then once your changes are done, callsetColumnOrder
and pass
both the table and theColumnOrder
instance:class Demo { @tracked pendingColumnOrder; changeColumnOrder = () => { this.pendingColumnOrder = new ColumnOrder({ columns: () => this.columns, }); }; handleReconfigure = () => { setColumnOrder(this.table, this.pendingColumnOrder); this.pendingColumnOrder = null; }; }
In this example, when working with
this.pendingColumnOrder
, you may use
familiar "moveLeft" and "moveRight" behaviors,
Patch Changes
-
#63
ecb68ff
Thanks @NullVoxPopuli! - Previously, ember-headless-table's releases were managed by semantic-release.
Now, they are managed by changesets, which is a bit more manual, but has far better
monorepo support and allows catering to humans when it comes to changelogs. -
#61
0356997
Thanks @NullVoxPopuli! - Fixes the issue reported in #60
Where the column reordering and visibility plugins were not integrating well together.
In short, moving column, then hiding that same column, then moving a column "over the gap"
between the columns resulted in all column reordering no longer working.
Using both of the plugins together should now work as intuitively expected.
Features
- plugin, resizing: add helper for knowing if a column has a resize handle (f525f50)
v1.1.0
v1.0.1
v1.0.0
1.0.0 (2022-11-02)
Bug Fixes
- column-reordering: reordering reactivity restored (bf8153c)
- columnReordering: rework how order state is maintained (39ae71e)
- columnResizing: fix the resize-handle modifier (e17c232)
- columnResizing: resizeHandle modifier needs to be an ember-modifier (90f7577)
- columnVisibility: bug where default hidden could not be unhidden (e6b7239)
- columnVisibility: work around a bug with tracked-built-ins' delete not being reactive (ce62498)
- columnVisibilty: bug where default / preferences clearing calculation was incorrect (e3e8480)
- deps: update dependency @ember/test-waiters to ^3.0.2 (dcb45d1)
- resizing: resizing depends on column order, not just visibility (6ac95ef)
Features
- columnReordering: preferences are now persisted and read from (96e13c1)
- initial implementation (0fc2cbc)
- plugin: implement row selection plugin (e46ce50)
- plugins: simplify working with columns among plugins (48ef0bb)
- plugin: sticky columns (b9b8bfa)
- table: support @use (6561c30)
BREAKING CHANGES
- brand new addon
- copied code from internal project
- successful build
This is an incremental step, as there is some dev work yet to complete
- finish plugins work
- rename
@crowdstrike/ember-headless-table
toember-headless-table
- Button up C.I.
- Create docs site with lots of examples, how to write plugins, etc