Variable resizeHandleConst

Example

import Component from '@glimmer/component';
import { meta } from '@universal-ember/table/plugins';
import { resizeHandle, ColumnResizing } from '@universal-ember/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 '@universal-ember/table/plugins';
import { resizeHandle, ColumnResizing } from '@universal-ember/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