* dtable: support to set elements for responsive.

easysoft · Oct 10, 2023 · faedb22 · faedb22
1 parent a1653b4
commit faedb22
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/lib/dtable/src/components/dtable.tsx b/lib/dtable/src/components/dtable.tsx
@@ -143,13 +143,18 @@ export class DTable extends Component<DTableOptions, DTableState> {
             this.on('mouseleave', this.#handleMouseleave as DTableEventListener);
         }
 
-        if (options.responsive) {
-            if (typeof ResizeObserver !== 'undefined') {
-                const {parent} = this;
-                if (parent) {
-                    const rob = new ResizeObserver(this.updateLayout);
-                    rob.observe(parent);
-                    this.#rob = rob;
+        const {responsive} = options;
+        if (responsive) {
+            if (typeof ResizeObserver !== 'undefined' && responsive !== 'window') {
+                const rob = new ResizeObserver(this.updateLayout);
+                this.#rob = rob;
+                if (typeof responsive === 'string' && responsive !== 'parent') {
+                    $(responsive).each((_, element) => rob.observe(element));
+                } else {
+                    const {parent} = this;
+                    if (parent) {
+                        rob.observe(parent);
+                    }
                 }
             } else {
                 this.on('window_resize', this.updateLayout);

diff --git a/lib/dtable/src/types/options.ts b/lib/dtable/src/types/options.ts
@@ -28,7 +28,7 @@ export interface DTableLayoutOptions {
     footer?: boolean | CustomRenderResultList<[layout: DTableLayout], DTable> | ((this: DTable, layout: DTableLayout) => CustomRenderResultList<[layout: DTableLayout], DTable>);
     headerHeight: number;
     footerHeight: number;
-    responsive: boolean;
+    responsive: boolean | string;
     scrollbarHover: boolean;
     scrollbarSize?: number;
     horzScrollbarPos?: 'inside' | 'outside';