ember-headless-table 0.0.0 → 1.0.1

package/dist/plugins/column-resizing/handle.js

@@ -0,0 +1,251 @@
+import { _ as _defineProperty } from '../../defineProperty-a0196711.js';
+import { registerDestructor } from '@ember/destroyable';
+import { buildWaiter } from '@ember/test-waiters';
+import Modifier from 'ember-modifier';
+import { meta } from '../-private/base.js';
+import { ColumnResizing } from './plugin.js';
+
+let waiter = buildWaiter('ColumnResizing#ResizeHandle');
+/**
+ * - why are mouse events used instead of drag events?
+ * - why not use the "draggable" attribute?
+ *
+ * It seems drag events are more for files and/or moving images around on a page
+ * dragging an image, for example, has a ghost of that image until it is dropped.
+ * The same thing happens with text.
+ * This prevents us from having total control of the styling of how dragging works.
+ *
+ *
+ *
+ */
+
+class ResizeHandle extends Modifier {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "pointerStartX", 0);
+
+    _defineProperty(this, "pointerStartY", 0);
+
+    _defineProperty(this, "pointerX", 0);
+
+    _defineProperty(this, "pointerY", 0);
+
+    _defineProperty(this, "keyDistance", 0);
+
+    _defineProperty(this, "token", void 0);
+
+    _defineProperty(this, "isSetup", false);
+
+    _defineProperty(this, "setup", () => {
+      this.dragHandle.addEventListener('touchstart', this.dragStartHandler);
+      this.dragHandle.addEventListener('mousedown', this.dragStartHandler);
+      this.dragHandle.addEventListener('keydown', this.keyHandler);
+      registerDestructor(this, () => {
+        this.meta.isResizing = false;
+
+        if (this.token) {
+          waiter.endAsync(this.token);
+          this.token = undefined;
+        }
+
+        this.dragHandle.removeEventListener('touchstart', this.dragStartHandler);
+        this.dragHandle.removeEventListener('mousedown', this.dragStartHandler);
+        window.removeEventListener('touchmove', this.dragMove);
+        window.removeEventListener('touchend', this.dragEndHandler);
+        window.removeEventListener('mousemove', this.dragMove);
+        window.removeEventListener('mouseup', this.dragEndHandler);
+        this.dragHandle.removeEventListener('keydown', this.keyHandler);
+      });
+    });
+
+    _defineProperty(this, "setPosition", event => {
+      if (!(event instanceof PointerEvent || event instanceof MouseEvent)) return;
+
+      if ('TouchEvent' in window && event instanceof TouchEvent) {
+        let firstTouch = event.touches[0];
+        if (!firstTouch) return;
+        this.pointerX = firstTouch.clientX;
+        this.pointerY = firstTouch.clientY;
+      } else {
+        this.pointerX = event.clientX;
+        this.pointerY = event.clientY;
+      }
+    });
+
+    _defineProperty(this, "setStartPosition", event => {
+      if (!(event instanceof PointerEvent || event instanceof MouseEvent)) return;
+
+      if ('TouchEvent' in window && event instanceof TouchEvent) {
+        let firstTouch = event.touches[0];
+        if (!firstTouch) return;
+        this.pointerStartX = firstTouch.clientX;
+        this.pointerStartY = firstTouch.clientY;
+      } else {
+        this.pointerStartX = event.clientX;
+        this.pointerStartY = event.clientY;
+      }
+    });
+
+    _defineProperty(this, "queueUpdate", () => {
+      cancelAnimationFrame(this.dragFrame);
+      this.dragFrame = requestAnimationFrame(() => {
+        this.meta.resize(this.pointerX - this.pointerStartX);
+        this.pointerStartX = this.pointerX;
+      });
+    });
+
+    _defineProperty(this, "dragEndHandler", () => {
+      this.meta.isResizing = false;
+      this.queueUpdate();
+
+      if (this.token) {
+        waiter.endAsync(this.token);
+        this.token = undefined;
+      }
+      /**
+       * No need to listen if we aren't dragging
+       */
+
+
+      window.removeEventListener('touchmove', this.dragMove);
+      window.removeEventListener('touchend', this.dragEndHandler);
+      window.removeEventListener('mousemove', this.dragMove);
+      window.removeEventListener('mouseup', this.dragEndHandler);
+    });
+
+    _defineProperty(this, "dragMove", event => {
+      if (!this.meta.isResizing) return;
+      this.setPosition(event);
+      this.queueUpdate();
+    });
+
+    _defineProperty(this, "dragStartHandler", event => {
+      if (!(event instanceof PointerEvent || event instanceof MouseEvent)) return;
+      this.meta.isResizing = true;
+      if (event.target !== this.dragHandle) return;
+
+      if (this.token) {
+        waiter.endAsync(this.token);
+      }
+
+      this.token = waiter.beginAsync();
+      this.setPosition(event);
+      this.setStartPosition(event);
+      window.addEventListener('touchend', this.dragEndHandler);
+      window.addEventListener('touchmove', this.dragMove);
+      window.addEventListener('mousemove', this.dragMove);
+      window.addEventListener('mouseup', this.dragEndHandler);
+    });
+
+    _defineProperty(this, "keyHandler", event => {
+      let deltaT = new Date().getTime() - this.lastKey;
+      let isRapid = deltaT < 50;
+
+      if (event.code === 'ArrowDown' || event.code === 'ArrowRight') {
+        this.keyDistance += isRapid ? 8 : 1;
+        this.lastKey = new Date().getTime();
+      }
+
+      if (event.code === 'ArrowUp' || event.code === 'ArrowLeft') {
+        this.keyDistance -= isRapid ? 8 : 1;
+        this.lastKey = new Date().getTime();
+      }
+
+      cancelAnimationFrame(this.keyFrame);
+      this.keyFrame = requestAnimationFrame(() => {
+        this.meta.resize(this.keyDistance);
+        this.keyDistance = 0;
+      });
+    });
+  }
+
+  modify(element, [column]) {
+    this.column = column;
+    this.meta = meta.forColumn(column, ColumnResizing);
+    this.dragHandle = element;
+
+    if (!this.isSetup) {
+      this.isSetup = true;
+      this.setup();
+    }
+  }
+
+}
+/**
+ * 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
+ * ```js
+ * 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>
+ * }
+ * ```
+ *
+ * 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
+ * ```js
+ * 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>
+ * }
+ * ```
+ *
+ *
+ * @note
+ * The logic here is copied from the drag slider in
+ * https://limber.glimdown.com/
+ * See: "resize-handle" on Limber's GitHub
+ */
+
+
+const resizeHandle = ResizeHandle;
+
+export { resizeHandle };
+//# sourceMappingURL=handle.js.map

package/dist/plugins/column-resizing/handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handle.js","sources":["../../../src/plugins/column-resizing/handle.ts"],"sourcesContent":["import { registerDestructor } from '@ember/destroyable';\nimport { buildWaiter } from '@ember/test-waiters';\n\nimport Modifier from 'ember-modifier';\n\nimport { meta } from '../-private/base';\nimport { ColumnResizing } from './plugin';\n\nimport type { ColumnMeta } from './plugin';\nimport type { Column } from '#/column';\n\nlet waiter = buildWaiter('ColumnResizing#ResizeHandle');\n\n/**\n * - why are mouse events used instead of drag events?\n * - why not use the \"draggable\" attribute?\n *\n * It seems drag events are more for files and/or moving images around on a page\n * dragging an image, for example, has a ghost of that image until it is dropped.\n * The same thing happens with text.\n * This prevents us from having total control of the styling of how dragging works.\n *\n *\n *\n */\n\nclass ResizeHandle extends Modifier<{ Args: { Positional: [Column] } }> {\n  declare dragHandle: HTMLElement;\n  declare column: Column;\n  declare meta: ColumnMeta;\n\n  // Pointer\n  pointerStartX = 0;\n  pointerStartY = 0;\n  pointerX = 0;\n  pointerY = 0;\n  declare dragFrame: number;\n\n  // Keyboard\n  keyDistance = 0;\n  declare keyFrame: number; // ha\n  declare lastKey: number;\n\n  // waiter\n  token?: unknown;\n\n  isSetup = false;\n  modify(element: Element, [column]: [Column]) {\n    this.column = column;\n    this.meta = meta.forColumn(column, ColumnResizing);\n    this.dragHandle = element as HTMLElement;\n\n    if (!this.isSetup) {\n      this.isSetup = true;\n      this.setup();\n    }\n  }\n\n  setup = () => {\n    this.dragHandle.addEventListener('touchstart', this.dragStartHandler);\n    this.dragHandle.addEventListener('mousedown', this.dragStartHandler);\n    this.dragHandle.addEventListener('keydown', this.keyHandler);\n\n    registerDestructor(this, () => {\n      this.meta.isResizing = false;\n\n      if (this.token) {\n        waiter.endAsync(this.token);\n        this.token = undefined;\n      }\n\n      this.dragHandle.removeEventListener('touchstart', this.dragStartHandler);\n      this.dragHandle.removeEventListener('mousedown', this.dragStartHandler);\n      window.removeEventListener('touchmove', this.dragMove);\n      window.removeEventListener('touchend', this.dragEndHandler);\n      window.removeEventListener('mousemove', this.dragMove);\n      window.removeEventListener('mouseup', this.dragEndHandler);\n      this.dragHandle.removeEventListener('keydown', this.keyHandler);\n    });\n  };\n\n  setPosition = (event: Event) => {\n    if (!(event instanceof PointerEvent || event instanceof MouseEvent)) return;\n\n    if ('TouchEvent' in window && event instanceof TouchEvent) {\n      let firstTouch = event.touches[0];\n\n      if (!firstTouch) return;\n\n      this.pointerX = firstTouch.clientX;\n      this.pointerY = firstTouch.clientY;\n    } else {\n      this.pointerX = event.clientX;\n      this.pointerY = event.clientY;\n    }\n  };\n\n  setStartPosition = (event: Event) => {\n    if (!(event instanceof PointerEvent || event instanceof MouseEvent)) return;\n\n    if ('TouchEvent' in window && event instanceof TouchEvent) {\n      let firstTouch = event.touches[0];\n\n      if (!firstTouch) return;\n\n      this.pointerStartX = firstTouch.clientX;\n      this.pointerStartY = firstTouch.clientY;\n    } else {\n      this.pointerStartX = event.clientX;\n      this.pointerStartY = event.clientY;\n    }\n  };\n\n  queueUpdate = () => {\n    cancelAnimationFrame(this.dragFrame);\n    this.dragFrame = requestAnimationFrame(() => {\n      this.meta.resize(this.pointerX - this.pointerStartX);\n      this.pointerStartX = this.pointerX;\n    });\n  };\n\n  dragEndHandler = () => {\n    this.meta.isResizing = false;\n    this.queueUpdate();\n\n    if (this.token) {\n      waiter.endAsync(this.token);\n      this.token = undefined;\n    }\n\n    /**\n     * No need to listen if we aren't dragging\n     */\n    window.removeEventListener('touchmove', this.dragMove);\n    window.removeEventListener('touchend', this.dragEndHandler);\n    window.removeEventListener('mousemove', this.dragMove);\n    window.removeEventListener('mouseup', this.dragEndHandler);\n  };\n\n  dragMove = (event: Event) => {\n    if (!this.meta.isResizing) return;\n    this.setPosition(event);\n    this.queueUpdate();\n  };\n\n  dragStartHandler = (event: Event) => {\n    if (!(event instanceof PointerEvent || event instanceof MouseEvent)) return;\n\n    this.meta.isResizing = true;\n    if (event.target !== this.dragHandle) return;\n\n    if (this.token) {\n      waiter.endAsync(this.token);\n    }\n\n    this.token = waiter.beginAsync();\n\n    this.setPosition(event);\n    this.setStartPosition(event);\n\n    window.addEventListener('touchend', this.dragEndHandler);\n    window.addEventListener('touchmove', this.dragMove);\n    window.addEventListener('mousemove', this.dragMove);\n    window.addEventListener('mouseup', this.dragEndHandler);\n  };\n\n  keyHandler = (event: KeyboardEvent) => {\n    let deltaT = new Date().getTime() - this.lastKey;\n    let isRapid = deltaT < 50;\n\n    if (event.code === 'ArrowDown' || event.code === 'ArrowRight') {\n      this.keyDistance += isRapid ? 8 : 1;\n      this.lastKey = new Date().getTime();\n    }\n\n    if (event.code === 'ArrowUp' || event.code === 'ArrowLeft') {\n      this.keyDistance -= isRapid ? 8 : 1;\n      this.lastKey = new Date().getTime();\n    }\n\n    cancelAnimationFrame(this.keyFrame);\n    this.keyFrame = requestAnimationFrame(() => {\n      this.meta.resize(this.keyDistance);\n\n      this.keyDistance = 0;\n    });\n  };\n}\n\n/**\n * Modifier to attach to the column resize handles.\n * This provides both keyboard and mouse support for resizing columns.\n * (provided the resize handle element is focusable -- so consider using\n * a button for the resize element)\n *\n * @example\n * ```js\n * import Component from '@glimmer/component';\n * import { meta } from 'ember-headless-table/plugins';\n * import { resizeHandle, ColumnResizing } from 'ember-headless-table/plugins/column-resizing';\n *\n * export default class TableHead extends Component {\n *   /* ✂️  *\\/\n *\n *   <template>\n *     <thead>\n *       <tr>\n *         {{#each this.columns as |column|}}\n *           <th>\n *             <span>{{column.name}}</span>\n *             <button {{resizeHandle column}}></button>\n *           </th>\n *         {{/each}}\n *       </tr>\n *     </thead>\n *   </template>\n * }\n * ```\n *\n * Width and isResizing state is maintained on the \"meta\"\n * class so that the users may choose per-column stylings for\n * isResizing and dragging behaviors.\n *\n * For example, while dragging, the user may add a class based on the\n * isDragging property.\n *\n * @example\n * ```js\n * import Component from '@glimmer/component';\n * import { meta } from 'ember-headless-table/plugins';\n * import { resizeHandle, ColumnResizing } from 'ember-headless-table/plugins/column-resizing';\n *\n * export default class TableHead extends Component {\n *   /* ✂️  *\\/\n *\n *   isDragging = (column) => {\n *     return meta.forColumn(column, ColumnResizing).isDragging;\n *   }\n *\n *   <template>\n *     <thead>\n *       <tr>\n *         {{#each this.columns as |column|}}\n *           <th class=\"header {{if (this.isDragging column) 'blue'}}\">\n *             <span>{{column.name}}</span>\n *             <button {{resizeHandle column}}></button>\n *           </th>\n *         {{/each}}\n *       </tr>\n *     </thead>\n *   </template>\n * }\n * ```\n *\n *\n * @note\n * The logic here is copied from the drag slider in\n * https://limber.glimdown.com/\n * See: \"resize-handle\" on Limber's GitHub\n */\nexport const resizeHandle = ResizeHandle;\n"],"names":["waiter","buildWaiter","ResizeHandle","Modifier","dragHandle","addEventListener","dragStartHandler","keyHandler","registerDestructor","meta","isResizing","token","endAsync","undefined","removeEventListener","window","dragMove","dragEndHandler","event","PointerEvent","MouseEvent","TouchEvent","firstTouch","touches","pointerX","clientX","pointerY","clientY","pointerStartX","pointerStartY","cancelAnimationFrame","dragFrame","requestAnimationFrame","resize","queueUpdate","setPosition","target","beginAsync","setStartPosition","deltaT","Date","getTime","lastKey","isRapid","code","keyDistance","keyFrame","modify","element","column","forColumn","ColumnResizing","isSetup","setup","resizeHandle"],"mappings":"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"}

package/dist/plugins/column-resizing/helpers.d.ts

@@ -0,0 +1,17 @@
+import { Column } from "../../index";
+/**
+ * The column actively being resized by the user.
+ *
+ * Note that during resizing, multiple columns are resized at once,
+ * dependending on the boundaries of the resize events.
+ *
+ * The other columns being resized as a consequence of "this" column will not
+ * be marked as isResizing, because this is a user-scoped question:
+ *   "Is the user directly resizing this column?"
+ */
+declare const isResizing: (column: Column) => boolean;
+/**
+ * Does the column have room to shrink?
+ */
+declare const canShrink: (column: Column) => boolean | 0;
+export { isResizing, canShrink };

package/dist/plugins/column-resizing/helpers.js

@@ -0,0 +1,22 @@
+import { meta } from '../-private/base.js';
+import { ColumnResizing } from './plugin.js';
+
+/**
+ * The column actively being resized by the user.
+ *
+ * Note that during resizing, multiple columns are resized at once,
+ * dependending on the boundaries of the resize events.
+ *
+ * The other columns being resized as a consequence of "this" column will not
+ * be marked as isResizing, because this is a user-scoped question:
+ *   "Is the user directly resizing this column?"
+ */
+const isResizing = column => meta.forColumn(column, ColumnResizing).isResizing;
+/**
+ * Does the column have room to shrink?
+ */
+
+const canShrink = column => meta.forColumn(column, ColumnResizing).canShrink;
+
+export { canShrink, isResizing };
+//# sourceMappingURL=helpers.js.map

package/dist/plugins/column-resizing/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../../src/plugins/column-resizing/helpers.ts"],"sourcesContent":["import { meta } from '../-private/base';\nimport { ColumnResizing } from './plugin';\n\nimport type { Column } from '[public-types]';\n\n/**\n * The column actively being resized by the user.\n *\n * Note that during resizing, multiple columns are resized at once,\n * dependending on the boundaries of the resize events.\n *\n * The other columns being resized as a consequence of \"this\" column will not\n * be marked as isResizing, because this is a user-scoped question:\n *   \"Is the user directly resizing this column?\"\n */\nexport const isResizing = (column: Column) => meta.forColumn(column, ColumnResizing).isResizing;\n\n/**\n * Does the column have room to shrink?\n */\nexport const canShrink = (column: Column) => meta.forColumn(column, ColumnResizing).canShrink;\n"],"names":["isResizing","column","meta","forColumn","ColumnResizing","canShrink"],"mappings":";;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,MAAAA,UAAU,GAAIC,MAAD,IAAoBC,IAAI,CAACC,SAAL,CAAeF,MAAf,EAAuBG,cAAvB,EAAuCJ,WAA9E;AAEP;AACA;AACA;;AACaK,MAAAA,SAAS,GAAIJ,MAAD,IAAoBC,IAAI,CAACC,SAAL,CAAeF,MAAf,EAAuBG,cAAvB,EAAuCC;;;;"}

package/dist/plugins/column-resizing/index.d.ts

@@ -0,0 +1,4 @@
+export { resizeHandle } from "./handle";
+export * from "./helpers";
+export { ColumnResizing, ColumnResizing as Plugin } from "./plugin";
+export type { ColumnOptions, TableOptions } from "./plugin";

package/dist/plugins/column-resizing/index.js

@@ -0,0 +1,4 @@
+export { resizeHandle } from './handle.js';
+export { canShrink, isResizing } from './helpers.js';
+export { ColumnResizing, ColumnResizing as Plugin } from './plugin.js';
+//# sourceMappingURL=index.js.map

package/dist/plugins/column-resizing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/plugins/column-resizing/plugin.d.ts

@@ -0,0 +1,144 @@
+import { BasePlugin } from "../-private/base";
+import { ColumnApi } from "../index";
+import { Column, Table } from "../../index";
+interface ColumnOptions {
+    /**
+     * Force a starting width
+     * This may not be less than the minWidth
+     */
+    width?: number;
+    /**
+     * Default: 128px
+     */
+    minWidth?: number;
+    /**
+     * Flip if the column is resizable or not.
+     * The default is whatever the table's plugin option is set to
+     * (and then yet again true, if not set at all)
+     */
+    isResizable?: boolean;
+}
+interface TableOptions {
+    /**
+     * Toggle whether the table is able to be resized at all
+     *
+     * default :true
+     */
+    enabled?: boolean;
+    /**
+     * By default, each column's "handle" position is on the
+     * left-hand side of the column.
+     *
+     * If, for style-reasons, you want to move it to the right,
+     * this option should reflect that so that the calculations can be
+     * updated to match the expected behavior of which column(s) grow/shrink
+     *
+     * Valid values are 'left' or 'right'
+     */
+    handlePosition?: string;
+}
+interface Signature {
+    Meta: {
+        Column: ColumnMeta;
+        Table: TableMeta;
+    };
+    Options: {
+        Plugin: TableOptions;
+        Column: ColumnOptions;
+    };
+}
+/**
+ * One instance of a plugin exists per table
+ * but a plugin can have a "Meta" for each column
+ */
+declare class ColumnResizing extends BasePlugin<Signature> {
+    name: string;
+    static features: string[];
+    meta: {
+        column: typeof ColumnMeta;
+        table: typeof TableMeta;
+    };
+    headerCellModifier: (element: HTMLElement, { column }: ColumnApi) => void;
+    /**
+     * This is what ends up calling resize when the browesr changes
+     * (assuming that the containing element's styles stretch to fill the space)
+     *
+     * Later, when container queries are more broadly supported, we'll want to watch
+     * the container instead of the window to prevent unneeded updates (as a window can change
+     * size without the container changing size)
+     */
+    containerModifier: typeof resizeObserver;
+    reset(): void;
+}
+/**
+ * @private
+ *
+ * Contains resizable information for a particular column
+ */
+declare class ColumnMeta {
+    private column;
+    constructor(column: Column);
+    _width?: number;
+    isResizing: boolean;
+    get tableMeta(): TableMeta;
+    get options(): {
+        /**
+         * Force a starting width
+         * This may not be less than the minWidth
+         */
+        width?: number | undefined;
+        minWidth: number;
+        /**
+         * Flip if the column is resizable or not.
+         * The default is whatever the table's plugin option is set to
+         * (and then yet again true, if not set at all)
+         */
+        isResizable?: boolean | undefined;
+    };
+    get minWidth(): number;
+    get initialWidth(): number | undefined;
+    get canShrink(): boolean | 0;
+    get roomToShrink(): number;
+    get isResizable(): boolean;
+    get hasResizeHandle(): boolean;
+    get width(): number;
+    set width(value: number);
+    get style(): Partial<Pick<CSSStyleDeclaration, "minWidth" | "width">>;
+    resize(delta: number): void;
+}
+/**
+ * @private
+ *
+ * Contains resizable and width information regarding the table as a whole
+ */
+declare class TableMeta {
+    #private;
+    private table;
+    constructor(table: Table);
+    scrollContainerHeight?: number;
+    scrollContainerWidth?: number;
+    get options(): Partial<TableOptions>;
+    get isResizable(): boolean;
+    get defaultColumnWidth(): number | undefined;
+    get visibleColumnMetas(): ColumnMeta[];
+    get totalInitialColumnWidths(): number;
+    get columnsWithoutInitialWidth(): ColumnMeta[];
+    get totalVisibleColumnsWidth(): number;
+    reset(): void;
+    onTableResize(entry: ResizeObserverEntry): void;
+    resizeColumn(column: Column, delta: number): void;
+}
+/**
+ * @private
+ * included in the same file as the plugin due to circular dependency
+ *
+ * This goes on the containing element
+ *
+ * @example
+ * ```hbs
+ *  <div {{resizeObserver @table}}>
+ *    <table>
+ * ```
+ */
+declare function resizeObserver(element: HTMLElement, table: Table): () => void;
+export { ColumnOptions, TableOptions, ColumnResizing, ColumnMeta, TableMeta };