Skip to content

ember-headless-table@1.4.0

Choose a tag to compare

@github-actions github-actions released this 09 Jan 20:09
8e9b644

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:

    1. invoke the styleStringFor helper in the template, and set the result to the style attribute for the th and td 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>
    2. when configuring the StickyColumns plugin in headlessTable, configure the the workaroundForModifierTimingUpdateRFC883 flag to true. 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 the key 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()).