Variable resizeHandleConst

Modifier to attach to the column resize handles. This provides both keyboard and mouse support for resizing columns. (provided the resize handle element is focusable -- so consider using a button for the resize element)

Example

import Component from '@glimmer/component';
import { meta } from 'ember-headless-table/plugins';
import { resizeHandle, ColumnResizing } from 'ember-headless-table/plugins/column-resizing';

export default class TableHead extends Component {
  /* ✂️  */

  <template>
    <thead>
      <tr>
        {{#each this.columns as |column|}}
          <th>
            <span>{{column.name}}</span>
            <button {{resizeHandle column}}></button>
          </th>
        {{/each}}
      </tr>
    </thead>
  </template>
}
Copy

Width and isResizing state is maintained on the "meta" class so that the users may choose per-column stylings for isResizing and dragging behaviors.

For example, while dragging, the user may add a class based on the isDragging property.

Example

import Component from '@glimmer/component';
import { meta } from 'ember-headless-table/plugins';
import { resizeHandle, ColumnResizing } from 'ember-headless-table/plugins/column-resizing';

export default class TableHead extends Component {
  /* ✂️  */

  isDragging = (column) => {
    return meta.forColumn(column, ColumnResizing).isDragging;
  }

  <template>
    <thead>
      <tr>
        {{#each this.columns as |column|}}
          <th class="header {{if (this.isDragging column) 'blue'}}">
            <span>{{column.name}}</span>
            <button {{resizeHandle column}}></button>
          </th>
        {{/each}}
      </tr>
    </thead>
  </template>
}
Copy

Note

The logic here is copied from the drag slider in https://limber.glimdown.com/ See: "resize-handle" on Limber's GitHub