dap-design-system 0.61.10 → 0.62.0

package/dist/components/datatable/datatable.component.d.ts

@@ -33,6 +33,7 @@ type LoadingType = 'spinner' | 'skeleton';
  * @event {{ selection: RowSelectionState }} dds-selection-change - Fired when the selection of the table changes.
  * @event {{ pagination: PaginationState }} dds-pagination-change - Fired when the pagination of the table changes.
  * @event {{ row: Row<T> }} dds-row-click - Fired when a row is clicked.
+ * @event {{ columnSizing: Record<string, number> }} dds-column-sizing-change - Fired when the user resizes a column (at the end of a drag, on each resize-handle key press, and when a double-click resets the column).
  *
  * @slot loading - The loading content of the table.
  * @slot empty - The empty content of the table.
@@ -41,6 +42,7 @@ type LoadingType = 'spinner' | 'skeleton';
  * @csspart header - The header of the table.
  * @csspart header-row - The header row of the table.
  * @csspart header-cell - All cells of the header.
+ * @csspart resize-handle - The column resize handle at the right edge of a resizable header cell.
  * @csspart body - The body of the table.
  * @csspart empty - The empty content of the table.
  * @csspart loading - The loading content of the table.
@@ -77,6 +79,7 @@ type LoadingType = 'spinner' | 'skeleton';
  * @cssproperty --dds-datatable-max-height - Maximum height of the table. (default: none)
  * @cssproperty --dds-datatable-overflow-x - Horizontal overflow behavior. (default: auto)
  * @cssproperty --dds-datatable-overflow-y - Vertical overflow behavior. (default: auto)
+ * @cssproperty --dds-datatable-resize-handle-color - Color of the column resize indicator line on hover, focus and drag. (default: var(--dds-border-brand-base))
  */
 export default class DapDSDataTable<T> extends DdsElement {
     static tagName: string;
@@ -106,6 +109,11 @@ export default class DapDSDataTable<T> extends DdsElement {
     stickySelectionColumn: boolean;
     /** Enable sorting on the table */
     enableSorting: boolean;
+    /** Let the user resize columns by dragging (or arrow-keying) a handle at the
+     * right edge of each header cell. A column opts out with `enableResizing: false`
+     * in its definition; `minSize` / `maxSize` bound the width. Read the result from
+     * `dds-column-sizing-change` and pass it back through `columnSizing` to restore it. */
+    enableColumnResizing: boolean;
     /** Enable manual sorting on the table */
     manualSorting: boolean;
     /** Enables manual pagination. If this option is set to true, the table will not automatically paginate rows and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation. */
@@ -198,7 +206,8 @@ export default class DapDSDataTable<T> extends DdsElement {
     pagination: PaginationState;
     /** @ignore */
     private _pagination;
-    /** Column sizing state of the table */
+    /** Column sizing state of the table: column id -> width in pixels. Overrides the
+     * column definition's `size`; columns missing from it keep their defined width. */
     columnSizing?: Record<string, number>;
     /** @ignore */
     private _columnSizing;
@@ -215,6 +224,7 @@ export default class DapDSDataTable<T> extends DdsElement {
     /** @ignore */
     debug: boolean;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected willUpdate(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /**
      * Cleanup resize observer
@@ -224,6 +234,16 @@ export default class DapDSDataTable<T> extends DdsElement {
     private computeStickyOffsets;
     private getStickyStyle;
     private renderHeaderCell;
+    private getHeaderCellId;
+    private getCanResize;
+    private getResizeBounds;
+    private getStartWidth;
+    private setColumnWidth;
+    private emitColumnSizingChange;
+    private handleResizePointerDown;
+    private handleResizeKeydown;
+    private handleResizeReset;
+    private renderResizeHandle;
     private renderHeaderCellContent;
     private getHeaderCellStyle;
     private getSortIcon;