@uibit/table 0.1.1 → 0.2.0

package/dist/frameworks/angular/index.ts

@@ -1,99 +1,119 @@
 import { Component, ChangeDetectionStrategy, ElementRef, input, effect, booleanAttribute } from '@angular/core';
 import '@uibit/table';
 import type { Table as HTMLElementClass } from '@uibit/table';
-
 @Component({
-  selector: 'uibit-table',
-  template: '<ng-content></ng-content>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true
+    selector: 'uibit-table',
+    template: '<ng-content></ng-content>',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true
 })
 export class NgxTable {
-  constructor(private el: ElementRef<HTMLElementClass>) {
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.searchable = this.searchable();
-      }
+    constructor(private el: ElementRef<HTMLElementClass>){
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.searchable = this.searchable();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.paginated = this.paginated();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.exportable = this.exportable();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.selectable = this.selectable();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.filterable = this.filterable();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.resizable = this.resizable();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.columnChooser = this.columnChooser();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.striped = this.striped();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.stickyHeader = this.stickyHeader();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.pageSizes = this.pageSizes();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.controlsLayout = this.controlsLayout();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.infiniteScroll = this.infiniteScroll();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.loading = this.loading();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.locale = this.locale();
+            }
+        });
+    }
+    readonly searchable = input<boolean, any>(true, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.paginated = this.paginated();
-      }
+    readonly paginated = input<boolean, any>(true, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.exportable = this.exportable();
-      }
+    readonly exportable = input<boolean, any>(true, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.selectable = this.selectable();
-      }
+    readonly selectable = input<boolean, any>(false, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.filterable = this.filterable();
-      }
+    readonly filterable = input<boolean, any>(false, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.resizable = this.resizable();
-      }
+    readonly resizable = input<boolean, any>(false, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.columnChooser = this.columnChooser();
-      }
+    readonly columnChooser = input<boolean, any>(false, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.striped = this.striped();
-      }
+    readonly striped = input<boolean, any>(false, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.stickyHeader = this.stickyHeader();
-      }
+    readonly stickyHeader = input<boolean, any>(false, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.pageSizes = this.pageSizes();
-      }
+    readonly pageSizes = input<string>('10,25,50,100');
+    readonly controlsLayout = input<'inline' | 'menu'>('inline');
+    readonly infiniteScroll = input<boolean, any>(false, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.controlsLayout = this.controlsLayout();
-      }
+    readonly loading = input<boolean, any>(false, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.infiniteScroll = this.infiniteScroll();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.loading = this.loading();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.locale = this.locale();
-      }
-    });
-  }
-
-  readonly searchable = input<boolean, any>(true, { transform: booleanAttribute });
-  readonly paginated = input<boolean, any>(true, { transform: booleanAttribute });
-  readonly exportable = input<boolean, any>(true, { transform: booleanAttribute });
-  readonly selectable = input<boolean, any>(false, { transform: booleanAttribute });
-  readonly filterable = input<boolean, any>(false, { transform: booleanAttribute });
-  readonly resizable = input<boolean, any>(false, { transform: booleanAttribute });
-  readonly columnChooser = input<boolean, any>(false, { transform: booleanAttribute });
-  readonly striped = input<boolean, any>(false, { transform: booleanAttribute });
-  readonly stickyHeader = input<boolean, any>(false, { transform: booleanAttribute });
-  readonly pageSizes = input<string, any>('10,25,50,100');
-  readonly controlsLayout = input<'inline' | 'menu', any>('inline');
-  readonly infiniteScroll = input<boolean, any>(false, { transform: booleanAttribute });
-  readonly loading = input<boolean, any>(false, { transform: booleanAttribute });
-  readonly locale = input<string, any>('');
+    readonly locale = input<string>('');
 }

package/dist/frameworks/astro/index.d.ts

@@ -4,7 +4,23 @@ import '@uibit/table';
 declare global {
   namespace astroHTML.JSX {
     interface IntrinsicElements {
-      'uibit-table': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+      'uibit-table': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes & {
+      searchable?: boolean;
+      paginated?: boolean;
+      exportable?: boolean;
+      selectable?: boolean;
+      filterable?: boolean;
+      resizable?: boolean;
+      columnChooser?: boolean;
+      striped?: boolean;
+      stickyHeader?: boolean;
+      pageSizes?: string;
+      controlsLayout?: 'inline' | 'menu';
+      infiniteScroll?: boolean;
+      loading?: boolean;
+      locale?: string;
+
+      };
     }
   }
 }

package/dist/frameworks/preact/index.d.ts

@@ -20,6 +20,7 @@ declare module 'preact' {
       infiniteScroll?: boolean;
       loading?: boolean;
       locale?: string;
+
       };
     }
   }

package/dist/frameworks/react/index.ts

@@ -0,0 +1,193 @@
+import React, { useRef, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
+import type { Table as HTMLElementClass } from '@uibit/table';
+import '@uibit/table';
+const useTypeOfLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export interface TableProps extends Omit<React.HTMLAttributes<HTMLElementClass>, 'searchable' | 'paginated' | 'exportable' | 'selectable' | 'filterable' | 'resizable' | 'columnChooser' | 'striped' | 'stickyHeader' | 'pageSizes' | 'controlsLayout' | 'infiniteScroll' | 'loading' | 'locale'> {
+    children?: React.ReactNode;
+    searchable?: boolean;
+    paginated?: boolean;
+    exportable?: boolean;
+    selectable?: boolean;
+    filterable?: boolean;
+    resizable?: boolean;
+    columnChooser?: boolean;
+    striped?: boolean;
+    stickyHeader?: boolean;
+    pageSizes?: string;
+    controlsLayout?: 'inline' | 'menu';
+    infiniteScroll?: boolean;
+    loading?: boolean;
+    locale?: string;
+}
+export const Table = ({ ref, children, ...props }: TableProps & {
+    ref?: React.Ref<HTMLElementClass>;
+})=>{
+    const innerRef = useRef<HTMLElementClass>(null);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    useImperativeHandle(ref, ()=>innerRef.current!);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.searchable !== undefined) {
+            (element as any).searchable = props.searchable;
+        }
+    }, [
+        props.searchable
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.paginated !== undefined) {
+            (element as any).paginated = props.paginated;
+        }
+    }, [
+        props.paginated
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.exportable !== undefined) {
+            (element as any).exportable = props.exportable;
+        }
+    }, [
+        props.exportable
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.selectable !== undefined) {
+            (element as any).selectable = props.selectable;
+        }
+    }, [
+        props.selectable
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.filterable !== undefined) {
+            (element as any).filterable = props.filterable;
+        }
+    }, [
+        props.filterable
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.resizable !== undefined) {
+            (element as any).resizable = props.resizable;
+        }
+    }, [
+        props.resizable
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.columnChooser !== undefined) {
+            (element as any).columnChooser = props.columnChooser;
+        }
+    }, [
+        props.columnChooser
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.striped !== undefined) {
+            (element as any).striped = props.striped;
+        }
+    }, [
+        props.striped
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.stickyHeader !== undefined) {
+            (element as any).stickyHeader = props.stickyHeader;
+        }
+    }, [
+        props.stickyHeader
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.pageSizes !== undefined) {
+            (element as any).pageSizes = props.pageSizes;
+        }
+    }, [
+        props.pageSizes
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.controlsLayout !== undefined) {
+            (element as any).controlsLayout = props.controlsLayout;
+        }
+    }, [
+        props.controlsLayout
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.infiniteScroll !== undefined) {
+            (element as any).infiniteScroll = props.infiniteScroll;
+        }
+    }, [
+        props.infiniteScroll
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.loading !== undefined) {
+            (element as any).loading = props.loading;
+        }
+    }, [
+        props.loading
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.locale !== undefined) {
+            (element as any).locale = props.locale;
+        }
+    }, [
+        props.locale
+    ]);
+    const domProps = {
+        ...props
+    };
+    const customPropNames = [
+        'searchable',
+        'paginated',
+        'exportable',
+        'selectable',
+        'filterable',
+        'resizable',
+        'columnChooser',
+        'striped',
+        'stickyHeader',
+        'pageSizes',
+        'controlsLayout',
+        'infiniteScroll',
+        'loading',
+        'locale'
+    ];
+    for (const key of customPropNames){
+        delete (domProps as any)[key];
+    }
+    return React.createElement('uibit-table', {
+        ref: innerRef,
+        ...domProps
+    }, children);
+};
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'uibit-table': React.ClassAttributes<HTMLElementClass> & React.HTMLAttributes<HTMLElementClass> & {
+                    children?: React.ReactNode;
+                    class?: string;
+                    searchable?: boolean;
+                    paginated?: boolean;
+                    exportable?: boolean;
+                    selectable?: boolean;
+                    filterable?: boolean;
+                    resizable?: boolean;
+                    columnChooser?: boolean;
+                    striped?: boolean;
+                    stickyHeader?: boolean;
+                    pageSizes?: string;
+                    controlsLayout?: 'inline' | 'menu';
+                    infiniteScroll?: boolean;
+                    loading?: boolean;
+                    locale?: string;
+                };
+            }
+        }
+    }
+}

package/dist/frameworks/stencil/index.d.ts

@@ -19,6 +19,7 @@ declare module '@stencil/core' {
     infiniteScroll?: boolean;
     loading?: boolean;
     locale?: string;
+
       };
     }
   }

package/dist/frameworks/svelte/index.svelte

@@ -1,25 +1,26 @@
 <script lang="ts">
   import '@uibit/table';
   import type { Table as HTMLElementClass } from '@uibit/table';
-  
-  let {
-    searchable = undefined,
-      paginated = undefined,
-      exportable = undefined,
-      selectable = undefined,
-      filterable = undefined,
-      resizable = undefined,
-      columnChooser = undefined,
-      striped = undefined,
-      stickyHeader = undefined,
-      pageSizes = undefined,
-      controlsLayout = undefined,
-      infiniteScroll = undefined,
-      loading = undefined,
-      locale = undefined,
-      children
+
+let {
+    searchable = $bindable(),
+    paginated = $bindable(),
+    exportable = $bindable(),
+    selectable = $bindable(),
+    filterable = $bindable(),
+    resizable = $bindable(),
+    columnChooser = $bindable(),
+    striped = $bindable(),
+    stickyHeader = $bindable(),
+    pageSizes = $bindable(),
+    controlsLayout = $bindable(),
+    infiniteScroll = $bindable(),
+    loading = $bindable(),
+    locale = $bindable(),
+    children,
+    ...restProps
   } = $props<{
-    children?: any;
+    children?: import('svelte').Snippet;
     searchable?: boolean;
     paginated?: boolean;
     exportable?: boolean;
@@ -34,59 +35,120 @@
     infiniteScroll?: boolean;
     loading?: boolean;
     locale?: string;
-  
+
+    [key: string]: any;
   }>();
-  
-  let elementRef: HTMLElementClass | null = $state(null);
-  
-  $effect(() => {
-    if (elementRef && searchable !== undefined) {
+
+let elementRef: HTMLElementClass | null = $state(null);
+
+$effect(() => {
+    if (elementRef && searchable !== undefined && elementRef.searchable !== searchable) {
       elementRef.searchable = searchable;
     }
-    if (elementRef && paginated !== undefined) {
+    if (elementRef && paginated !== undefined && elementRef.paginated !== paginated) {
       elementRef.paginated = paginated;
     }
-    if (elementRef && exportable !== undefined) {
+    if (elementRef && exportable !== undefined && elementRef.exportable !== exportable) {
       elementRef.exportable = exportable;
     }
-    if (elementRef && selectable !== undefined) {
+    if (elementRef && selectable !== undefined && elementRef.selectable !== selectable) {
       elementRef.selectable = selectable;
     }
-    if (elementRef && filterable !== undefined) {
+    if (elementRef && filterable !== undefined && elementRef.filterable !== filterable) {
       elementRef.filterable = filterable;
     }
-    if (elementRef && resizable !== undefined) {
+    if (elementRef && resizable !== undefined && elementRef.resizable !== resizable) {
       elementRef.resizable = resizable;
     }
-    if (elementRef && columnChooser !== undefined) {
+    if (elementRef && columnChooser !== undefined && elementRef.columnChooser !== columnChooser) {
       elementRef.columnChooser = columnChooser;
     }
-    if (elementRef && striped !== undefined) {
+    if (elementRef && striped !== undefined && elementRef.striped !== striped) {
       elementRef.striped = striped;
     }
-    if (elementRef && stickyHeader !== undefined) {
+    if (elementRef && stickyHeader !== undefined && elementRef.stickyHeader !== stickyHeader) {
       elementRef.stickyHeader = stickyHeader;
     }
-    if (elementRef && pageSizes !== undefined) {
+    if (elementRef && pageSizes !== undefined && elementRef.pageSizes !== pageSizes) {
       elementRef.pageSizes = pageSizes;
     }
-    if (elementRef && controlsLayout !== undefined) {
+    if (elementRef && controlsLayout !== undefined && elementRef.controlsLayout !== controlsLayout) {
       elementRef.controlsLayout = controlsLayout;
     }
-    if (elementRef && infiniteScroll !== undefined) {
+    if (elementRef && infiniteScroll !== undefined && elementRef.infiniteScroll !== infiniteScroll) {
       elementRef.infiniteScroll = infiniteScroll;
     }
-    if (elementRef && loading !== undefined) {
+    if (elementRef && loading !== undefined && elementRef.loading !== loading) {
       elementRef.loading = loading;
     }
-    if (elementRef && locale !== undefined) {
+    if (elementRef && locale !== undefined && elementRef.locale !== locale) {
       elementRef.locale = locale;
     }
   });
-  
+
+$effect(() => {
+    const element = elementRef;
+    if (!element) return;
+
+    const handleEvent = () => {
+      if (searchable !== element.searchable) {
+        searchable = element.searchable as any;
+      }
+      if (paginated !== element.paginated) {
+        paginated = element.paginated as any;
+      }
+      if (exportable !== element.exportable) {
+        exportable = element.exportable as any;
+      }
+      if (selectable !== element.selectable) {
+        selectable = element.selectable as any;
+      }
+      if (filterable !== element.filterable) {
+        filterable = element.filterable as any;
+      }
+      if (resizable !== element.resizable) {
+        resizable = element.resizable as any;
+      }
+      if (columnChooser !== element.columnChooser) {
+        columnChooser = element.columnChooser as any;
+      }
+      if (striped !== element.striped) {
+        striped = element.striped as any;
+      }
+      if (stickyHeader !== element.stickyHeader) {
+        stickyHeader = element.stickyHeader as any;
+      }
+      if (pageSizes !== element.pageSizes) {
+        pageSizes = element.pageSizes as any;
+      }
+      if (controlsLayout !== element.controlsLayout) {
+        controlsLayout = element.controlsLayout as any;
+      }
+      if (infiniteScroll !== element.infiniteScroll) {
+        infiniteScroll = element.infiniteScroll as any;
+      }
+      if (loading !== element.loading) {
+        loading = element.loading as any;
+      }
+      if (locale !== element.locale) {
+        locale = element.locale as any;
+      }
+    };
+
+    const events = ['change', 'input'];
+    for (const event of events) {
+      element.addEventListener(event, handleEvent);
+    }
+    return () => {
+      for (const event of events) {
+        element.removeEventListener(event, handleEvent);
+      }
+    };
+  });
+
 </script>
 
-<uibit-table bind:this={elementRef} {...$$restProps}>
+<uibit-table bind:this={elementRef} {...restProps}>
 
   {#if children}
     {@render children()}

package/dist/frameworks/vue/index.ts

@@ -1,35 +1,232 @@
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, ref, watch } from 'vue';
 import type { Table as HTMLElementClass } from '@uibit/table';
 import '@uibit/table';
-
 export const Table = defineComponent({
-  name: 'Table',
-  props: {
-    searchable: { type: [String, Number, Boolean, Array, Object] as any },
-    paginated: { type: [String, Number, Boolean, Array, Object] as any },
-    exportable: { type: [String, Number, Boolean, Array, Object] as any },
-    selectable: { type: [String, Number, Boolean, Array, Object] as any },
-    filterable: { type: [String, Number, Boolean, Array, Object] as any },
-    resizable: { type: [String, Number, Boolean, Array, Object] as any },
-    columnChooser: { type: [String, Number, Boolean, Array, Object] as any },
-    striped: { type: [String, Number, Boolean, Array, Object] as any },
-    stickyHeader: { type: [String, Number, Boolean, Array, Object] as any },
-    pageSizes: { type: [String, Number, Boolean, Array, Object] as any },
-    controlsLayout: { type: [String, Number, Boolean, Array, Object] as any },
-    infiniteScroll: { type: [String, Number, Boolean, Array, Object] as any },
-    loading: { type: [String, Number, Boolean, Array, Object] as any },
-    locale: { type: [String, Number, Boolean, Array, Object] as any }
-  },
-  emits: [],
-  setup(props, { slots, emit }) {
-    return () => {
-      const eventListeners: Record<string, any> = {};
-
-
-      return h('uibit-table', {
-        ...props,
-        ...eventListeners
-      }, slots.default?.());
-    };
-  }
+    name: 'Table',
+    props: {
+        searchable: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        paginated: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        exportable: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        selectable: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        filterable: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        resizable: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        columnChooser: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        striped: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        stickyHeader: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        pageSizes: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        controlsLayout: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        infiniteScroll: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        loading: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        locale: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        }
+    },
+    emits: [],
+    setup (props, { slots, emit }) {
+        const elementRef = ref<HTMLElementClass | null>(null);
+        if (false) {
+            watch(()=>props.modelValue, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+            watch(()=>props.value, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+        }
+        watch(()=>props.searchable, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).searchable = newVal;
+            }
+        });
+        watch(()=>props.paginated, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).paginated = newVal;
+            }
+        });
+        watch(()=>props.exportable, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).exportable = newVal;
+            }
+        });
+        watch(()=>props.selectable, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).selectable = newVal;
+            }
+        });
+        watch(()=>props.filterable, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).filterable = newVal;
+            }
+        });
+        watch(()=>props.resizable, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).resizable = newVal;
+            }
+        });
+        watch(()=>props.columnChooser, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).columnChooser = newVal;
+            }
+        });
+        watch(()=>props.striped, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).striped = newVal;
+            }
+        });
+        watch(()=>props.stickyHeader, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).stickyHeader = newVal;
+            }
+        });
+        watch(()=>props.pageSizes, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).pageSizes = newVal;
+            }
+        });
+        watch(()=>props.controlsLayout, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).controlsLayout = newVal;
+            }
+        });
+        watch(()=>props.infiniteScroll, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).infiniteScroll = newVal;
+            }
+        });
+        watch(()=>props.loading, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).loading = newVal;
+            }
+        });
+        watch(()=>props.locale, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).locale = newVal;
+            }
+        });
+        return ()=>{
+            const eventListeners: Record<string, any> = {};
+            const mergedProps = {
+                ...props,
+                ...eventListeners,
+                ref: elementRef
+            };
+            if (false && props.modelValue !== undefined) {
+                (mergedProps as any).value = props.modelValue;
+            }
+            return h('uibit-table', mergedProps, slots.default?.());
+        };
+    }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uibit/table",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Wraps any standard HTML <table> in the default slot and adds a full datagrid feature set — without touching the source markup. All features are individually opt-in via boolean attributes.",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,7 +11,7 @@
       "import": "./dist/index.js"
     },
     "./custom-elements.json": "./custom-elements.json",
-    "./react": "./dist/frameworks/react/index.d.ts",
+    "./react": "./dist/frameworks/react/index.ts",
     "./vue": "./dist/frameworks/vue/index.ts",
     "./svelte": "./dist/frameworks/svelte/index.svelte",
     "./angular": "./dist/frameworks/angular/index.ts",
@@ -53,7 +53,7 @@
     "@types/node": "^20.19.43",
     "lit": "^3.3.3",
     "typescript": "7.0.2",
-    "@uibit/codegen": "0.1.0"
+    "@uibit/codegen": "0.2.0"
   },
   "peerDependencies": {
     "lit": "^3.0.0",

package/dist/frameworks/react/index.d.ts

@@ -1,30 +0,0 @@
-import type { HTMLAttributes, ClassAttributes } from 'react';
-import type { Table as HTMLElementClass } from '@uibit/table';
-import '@uibit/table';
-
-declare global {
-  namespace React {
-    namespace JSX {
-      interface IntrinsicElements {
-        'uibit-table': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
-          children?: React.ReactNode;
-          class?: string;
-      searchable?: boolean;
-      paginated?: boolean;
-      exportable?: boolean;
-      selectable?: boolean;
-      filterable?: boolean;
-      resizable?: boolean;
-      columnChooser?: boolean;
-      striped?: boolean;
-      stickyHeader?: boolean;
-      pageSizes?: string;
-      controlsLayout?: 'inline' | 'menu';
-      infiniteScroll?: boolean;
-      loading?: boolean;
-      locale?: string;
-        };
-      }
-    }
-  }
-}