react-better-html 1.1.102 → 1.1.104

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +78 -16
  2. package/dist/index.d.ts +78 -16
  3. package/dist/index.js +737 -138
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +852 -244
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -55,7 +55,9 @@ type DivComponentType = {
55
55
  invertFlexDirection?: boolean;
56
56
  }>) => React.ReactElement;
57
57
  grid: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display">>) => React.ReactElement;
58
- box: <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value>>) => React.ReactElement;
58
+ box: <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value> & {
59
+ isActive?: boolean;
60
+ }>) => React.ReactElement;
59
61
  };
60
62
  declare const DivComponent: DivComponentType;
61
63
  declare const Div: typeof DivComponent & {
@@ -132,7 +134,7 @@ declare const Loader: typeof LoaderComponent & {
132
134
  text: typeof LoaderComponent.text;
133
135
  };
134
136
 
135
- type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "chevronLeft" | "chevronRight" | "eye" | "eyeDashed" | "magnifyingGlass" | "check";
137
+ type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "chevronLeft" | "chevronRight" | "doubleChevronLeft" | "doubleChevronRight" | "eye" | "eyeDashed" | "magnifyingGlass" | "check" | "filter";
136
138
  type IconData = {
137
139
  width: number;
138
140
  height: number;
@@ -152,7 +154,7 @@ type IconProps = {
152
154
  type IconComponent = {
153
155
  (props: ComponentPropWithRef<SVGSVGElement, IconProps>): React.ReactElement;
154
156
  };
155
- declare const _default$8: IconComponent;
157
+ declare const _default$5: IconComponent;
156
158
 
157
159
  type AssetName = "logo";
158
160
  type AssetsConfig = Record<AssetName, string> & {
@@ -172,7 +174,7 @@ type ImageComponent = {
172
174
  }>) => React.ReactElement;
173
175
  };
174
176
  declare const Image: ImageComponent;
175
- declare const _default$7: ImageComponent & {
177
+ declare const _default$4: ImageComponent & {
176
178
  profileImage: typeof Image.profileImage;
177
179
  };
178
180
 
@@ -255,9 +257,13 @@ type HorizontalDividerProps = DividerProps & {
255
257
  /** @default textSecondary */
256
258
  textColor?: string;
257
259
  };
258
- declare const _default$6: {
259
- vertical: react.NamedExoticComponent<VerticalDividerProps>;
260
- horizontal: react.NamedExoticComponent<HorizontalDividerProps>;
260
+ type DividerComponentType = {
261
+ vertical: (props: ComponentPropWithRef<HTMLDivElement, VerticalDividerProps>) => React.ReactElement;
262
+ horizontal: (props: ComponentPropWithRef<HTMLDivElement, HorizontalDividerProps>) => React.ReactElement;
263
+ };
264
+ declare const _default$3: {
265
+ vertical: DividerComponentType["vertical"];
266
+ horizontal: DividerComponentType["horizontal"];
261
267
  };
262
268
 
263
269
  type ModalProps = {
@@ -306,10 +312,22 @@ declare const Modal: typeof ModalComponent & {
306
312
  type PageHolderProps = {
307
313
  /** @default false */
308
314
  noMaxContentWidth?: boolean;
315
+ backgroundColor?: string;
309
316
  children?: React.ReactNode;
310
317
  } & ComponentPaddingProps;
311
- declare function PageHolder({ noMaxContentWidth, children, ...props }: PageHolderProps): react_jsx_runtime.JSX.Element;
312
- declare const _default$5: react.MemoExoticComponent<typeof PageHolder>;
318
+ type PageHolderComponentType = {
319
+ (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
320
+ center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
321
+ decorationImageSrc?: string;
322
+ decorationImageName?: AssetName | AnyOtherString;
323
+ /** @default "right" */
324
+ decorationImagePosition?: "left" | "right";
325
+ }>) => React.ReactElement;
326
+ };
327
+ declare const PageHolderComponent: PageHolderComponentType;
328
+ declare const PageHolder: typeof PageHolderComponent & {
329
+ center: typeof PageHolderComponent.center;
330
+ };
313
331
 
314
332
  type PageHeaderProps = {
315
333
  imageUrl?: string;
@@ -323,8 +341,11 @@ type PageHeaderProps = {
323
341
  /** @default false */
324
342
  lightMode?: boolean;
325
343
  } & Pick<ComponentMarginProps, "marginBottom">;
326
- declare function PageHeader({ imageUrl, imageSize, title, titleAs, titleRightElement, description, textAlign, rightElement, lightMode, marginBottom, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
327
- declare const _default$4: react.MemoExoticComponent<typeof PageHeader>;
344
+ type PageHeaderComponentType = {
345
+ (props: ComponentPropWithRef<HTMLDivElement, PageHeaderProps>): React.ReactElement;
346
+ };
347
+ declare const PageHeaderComponent: PageHeaderComponentType;
348
+ declare const PageHeader: typeof PageHeaderComponent & {};
328
349
 
329
350
  type ChipProps = {
330
351
  text: string;
@@ -466,7 +487,7 @@ type InternalToggleInputProps<Value> = {
466
487
  } & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange"> & ComponentStyle & ComponentHoverStyle;
467
488
  type ToggleInputProps<Value> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
468
489
  type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
469
- declare const _default$3: {
490
+ declare const _default$2: {
470
491
  checkbox: ToggleInputComponentType;
471
492
  radiobutton: ToggleInputComponentType;
472
493
  switch: ToggleInputComponentType;
@@ -544,6 +565,7 @@ type FormProps = {
544
565
  submitButtonId?: string;
545
566
  /** @default false */
546
567
  submitButtonIsDisabled?: boolean;
568
+ cancelButtonText?: string;
547
569
  /** @default "right" */
548
570
  actionButtonsLocation?: "left" | "center" | "right";
549
571
  gap?: React.CSSProperties["gap"];
@@ -553,12 +575,16 @@ type FormProps = {
553
575
  isDestructive?: boolean;
554
576
  /** @default false */
555
577
  withDividers?: boolean;
578
+ renderActionButtons?: React.ReactNode;
556
579
  onClickCancel?: () => void;
557
580
  onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;
558
581
  children?: React.ReactNode;
559
582
  } & ComponentMarginProps;
560
- declare function Form({ form, submitButtonText, submitButtonLoaderName, submitButtonId, submitButtonIsDisabled, actionButtonsLocation, gap, isSubmitting, isDestructive, withDividers, onClickCancel, onSubmit, children, ...props }: FormProps): react_jsx_runtime.JSX.Element;
561
- declare const _default$2: react.MemoExoticComponent<typeof Form>;
583
+ type FormComponentType = {
584
+ (props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
585
+ };
586
+ declare const FormComponent: FormComponentType;
587
+ declare const Form: typeof FormComponent & {};
562
588
 
563
589
  type LabelProps = {
564
590
  text?: string;
@@ -614,6 +640,19 @@ declare const ColorThemeSwitch: typeof ColorThemeSwitchComponent & {
614
640
  withText: typeof ColorThemeSwitchComponent.withText;
615
641
  };
616
642
 
643
+ type FilterPreset = "today" | "yesterday" | "thisWeek" | "thisMonth" | "thisYear" | "lastWeek" | "lastMonth" | "lastYear" | "nextWeek" | "nextMonth" | "nextYear";
644
+ type TableFilterData = {
645
+ type: "number";
646
+ min?: number;
647
+ max?: number;
648
+ } | {
649
+ type: "date" | "date-time";
650
+ min?: string;
651
+ max?: string;
652
+ } | {
653
+ type: "list";
654
+ list?: string[];
655
+ };
617
656
  type TextColumn<DataItem> = {
618
657
  type: "text";
619
658
  keyName?: keyof DataItem;
@@ -630,13 +669,27 @@ type ImageColumn<DataItem> = {
630
669
  type CheckboxColumn = {
631
670
  type: "checkbox";
632
671
  } & ToggleInputProps<boolean>;
672
+ type NumberFilter<DataItem> = {
673
+ filter?: "number";
674
+ getValue?: (item: DataItem) => number;
675
+ };
676
+ type DateFilter<DataItem> = {
677
+ filter?: "date" | "date-time";
678
+ presets?: FilterPreset[];
679
+ getValue?: (item: DataItem) => Date;
680
+ };
681
+ type ListFilter<DataItem> = {
682
+ filter?: "list";
683
+ withTotalNumber?: boolean;
684
+ getValueForList?: (item: DataItem) => string;
685
+ };
633
686
  type TableColumn<DataItem> = {
634
687
  label?: string;
635
688
  width?: string | number;
636
689
  minWidth?: string | number;
637
690
  maxWidth?: string | number;
638
691
  align?: "left" | "center" | "right";
639
- } & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn);
692
+ } & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn) & (NumberFilter<DataItem> | DateFilter<DataItem> | ListFilter<DataItem>);
640
693
  type TableProps<DataItem> = {
641
694
  columns: TableColumn<DataItem>[];
642
695
  data: DataItem[];
@@ -648,9 +701,18 @@ type TableProps<DataItem> = {
648
701
  withStickyHeader?: boolean;
649
702
  /** @default "No data available" */
650
703
  noDataItemsMessage?: string;
704
+ pageSize?: number;
651
705
  onClickRow?: (item: DataItem, index: number) => void;
652
706
  onClickAllCheckboxes?: (checked: boolean) => void;
707
+ onChangePage?: (page: number) => void;
708
+ onChangeFilter?: (filterData: Record<number, TableFilterData | undefined>) => void;
653
709
  } & ComponentMarginProps;
710
+ type TableRef = {
711
+ currentPage: number;
712
+ setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
713
+ pagesCount: number;
714
+ setCheckedItems: React.Dispatch<React.SetStateAction<boolean[]>>;
715
+ };
654
716
  type TableComponentType = {
655
717
  <DataItem>(props: ComponentPropWithRef<HTMLDivElement, TableProps<DataItem>>): React.ReactElement;
656
718
  };
@@ -790,4 +852,4 @@ declare const isMobileDevice: boolean;
790
852
 
791
853
  declare const reactRouterDomPlugin: BetterHtmlPlugin;
792
854
 
793
- export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$6 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, _default$2 as Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$8 as Icon, type IconName, type IconProps, type IconsConfig, _default$7 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, _default$4 as PageHeader, type PageHeaderProps, _default$5 as PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$3 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
855
+ export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
package/dist/index.d.ts CHANGED
@@ -55,7 +55,9 @@ type DivComponentType = {
55
55
  invertFlexDirection?: boolean;
56
56
  }>) => React.ReactElement;
57
57
  grid: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display">>) => React.ReactElement;
58
- box: <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value>>) => React.ReactElement;
58
+ box: <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value> & {
59
+ isActive?: boolean;
60
+ }>) => React.ReactElement;
59
61
  };
60
62
  declare const DivComponent: DivComponentType;
61
63
  declare const Div: typeof DivComponent & {
@@ -132,7 +134,7 @@ declare const Loader: typeof LoaderComponent & {
132
134
  text: typeof LoaderComponent.text;
133
135
  };
134
136
 
135
- type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "chevronLeft" | "chevronRight" | "eye" | "eyeDashed" | "magnifyingGlass" | "check";
137
+ type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "chevronLeft" | "chevronRight" | "doubleChevronLeft" | "doubleChevronRight" | "eye" | "eyeDashed" | "magnifyingGlass" | "check" | "filter";
136
138
  type IconData = {
137
139
  width: number;
138
140
  height: number;
@@ -152,7 +154,7 @@ type IconProps = {
152
154
  type IconComponent = {
153
155
  (props: ComponentPropWithRef<SVGSVGElement, IconProps>): React.ReactElement;
154
156
  };
155
- declare const _default$8: IconComponent;
157
+ declare const _default$5: IconComponent;
156
158
 
157
159
  type AssetName = "logo";
158
160
  type AssetsConfig = Record<AssetName, string> & {
@@ -172,7 +174,7 @@ type ImageComponent = {
172
174
  }>) => React.ReactElement;
173
175
  };
174
176
  declare const Image: ImageComponent;
175
- declare const _default$7: ImageComponent & {
177
+ declare const _default$4: ImageComponent & {
176
178
  profileImage: typeof Image.profileImage;
177
179
  };
178
180
 
@@ -255,9 +257,13 @@ type HorizontalDividerProps = DividerProps & {
255
257
  /** @default textSecondary */
256
258
  textColor?: string;
257
259
  };
258
- declare const _default$6: {
259
- vertical: react.NamedExoticComponent<VerticalDividerProps>;
260
- horizontal: react.NamedExoticComponent<HorizontalDividerProps>;
260
+ type DividerComponentType = {
261
+ vertical: (props: ComponentPropWithRef<HTMLDivElement, VerticalDividerProps>) => React.ReactElement;
262
+ horizontal: (props: ComponentPropWithRef<HTMLDivElement, HorizontalDividerProps>) => React.ReactElement;
263
+ };
264
+ declare const _default$3: {
265
+ vertical: DividerComponentType["vertical"];
266
+ horizontal: DividerComponentType["horizontal"];
261
267
  };
262
268
 
263
269
  type ModalProps = {
@@ -306,10 +312,22 @@ declare const Modal: typeof ModalComponent & {
306
312
  type PageHolderProps = {
307
313
  /** @default false */
308
314
  noMaxContentWidth?: boolean;
315
+ backgroundColor?: string;
309
316
  children?: React.ReactNode;
310
317
  } & ComponentPaddingProps;
311
- declare function PageHolder({ noMaxContentWidth, children, ...props }: PageHolderProps): react_jsx_runtime.JSX.Element;
312
- declare const _default$5: react.MemoExoticComponent<typeof PageHolder>;
318
+ type PageHolderComponentType = {
319
+ (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
320
+ center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
321
+ decorationImageSrc?: string;
322
+ decorationImageName?: AssetName | AnyOtherString;
323
+ /** @default "right" */
324
+ decorationImagePosition?: "left" | "right";
325
+ }>) => React.ReactElement;
326
+ };
327
+ declare const PageHolderComponent: PageHolderComponentType;
328
+ declare const PageHolder: typeof PageHolderComponent & {
329
+ center: typeof PageHolderComponent.center;
330
+ };
313
331
 
314
332
  type PageHeaderProps = {
315
333
  imageUrl?: string;
@@ -323,8 +341,11 @@ type PageHeaderProps = {
323
341
  /** @default false */
324
342
  lightMode?: boolean;
325
343
  } & Pick<ComponentMarginProps, "marginBottom">;
326
- declare function PageHeader({ imageUrl, imageSize, title, titleAs, titleRightElement, description, textAlign, rightElement, lightMode, marginBottom, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
327
- declare const _default$4: react.MemoExoticComponent<typeof PageHeader>;
344
+ type PageHeaderComponentType = {
345
+ (props: ComponentPropWithRef<HTMLDivElement, PageHeaderProps>): React.ReactElement;
346
+ };
347
+ declare const PageHeaderComponent: PageHeaderComponentType;
348
+ declare const PageHeader: typeof PageHeaderComponent & {};
328
349
 
329
350
  type ChipProps = {
330
351
  text: string;
@@ -466,7 +487,7 @@ type InternalToggleInputProps<Value> = {
466
487
  } & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange"> & ComponentStyle & ComponentHoverStyle;
467
488
  type ToggleInputProps<Value> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
468
489
  type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
469
- declare const _default$3: {
490
+ declare const _default$2: {
470
491
  checkbox: ToggleInputComponentType;
471
492
  radiobutton: ToggleInputComponentType;
472
493
  switch: ToggleInputComponentType;
@@ -544,6 +565,7 @@ type FormProps = {
544
565
  submitButtonId?: string;
545
566
  /** @default false */
546
567
  submitButtonIsDisabled?: boolean;
568
+ cancelButtonText?: string;
547
569
  /** @default "right" */
548
570
  actionButtonsLocation?: "left" | "center" | "right";
549
571
  gap?: React.CSSProperties["gap"];
@@ -553,12 +575,16 @@ type FormProps = {
553
575
  isDestructive?: boolean;
554
576
  /** @default false */
555
577
  withDividers?: boolean;
578
+ renderActionButtons?: React.ReactNode;
556
579
  onClickCancel?: () => void;
557
580
  onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;
558
581
  children?: React.ReactNode;
559
582
  } & ComponentMarginProps;
560
- declare function Form({ form, submitButtonText, submitButtonLoaderName, submitButtonId, submitButtonIsDisabled, actionButtonsLocation, gap, isSubmitting, isDestructive, withDividers, onClickCancel, onSubmit, children, ...props }: FormProps): react_jsx_runtime.JSX.Element;
561
- declare const _default$2: react.MemoExoticComponent<typeof Form>;
583
+ type FormComponentType = {
584
+ (props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
585
+ };
586
+ declare const FormComponent: FormComponentType;
587
+ declare const Form: typeof FormComponent & {};
562
588
 
563
589
  type LabelProps = {
564
590
  text?: string;
@@ -614,6 +640,19 @@ declare const ColorThemeSwitch: typeof ColorThemeSwitchComponent & {
614
640
  withText: typeof ColorThemeSwitchComponent.withText;
615
641
  };
616
642
 
643
+ type FilterPreset = "today" | "yesterday" | "thisWeek" | "thisMonth" | "thisYear" | "lastWeek" | "lastMonth" | "lastYear" | "nextWeek" | "nextMonth" | "nextYear";
644
+ type TableFilterData = {
645
+ type: "number";
646
+ min?: number;
647
+ max?: number;
648
+ } | {
649
+ type: "date" | "date-time";
650
+ min?: string;
651
+ max?: string;
652
+ } | {
653
+ type: "list";
654
+ list?: string[];
655
+ };
617
656
  type TextColumn<DataItem> = {
618
657
  type: "text";
619
658
  keyName?: keyof DataItem;
@@ -630,13 +669,27 @@ type ImageColumn<DataItem> = {
630
669
  type CheckboxColumn = {
631
670
  type: "checkbox";
632
671
  } & ToggleInputProps<boolean>;
672
+ type NumberFilter<DataItem> = {
673
+ filter?: "number";
674
+ getValue?: (item: DataItem) => number;
675
+ };
676
+ type DateFilter<DataItem> = {
677
+ filter?: "date" | "date-time";
678
+ presets?: FilterPreset[];
679
+ getValue?: (item: DataItem) => Date;
680
+ };
681
+ type ListFilter<DataItem> = {
682
+ filter?: "list";
683
+ withTotalNumber?: boolean;
684
+ getValueForList?: (item: DataItem) => string;
685
+ };
633
686
  type TableColumn<DataItem> = {
634
687
  label?: string;
635
688
  width?: string | number;
636
689
  minWidth?: string | number;
637
690
  maxWidth?: string | number;
638
691
  align?: "left" | "center" | "right";
639
- } & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn);
692
+ } & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn) & (NumberFilter<DataItem> | DateFilter<DataItem> | ListFilter<DataItem>);
640
693
  type TableProps<DataItem> = {
641
694
  columns: TableColumn<DataItem>[];
642
695
  data: DataItem[];
@@ -648,9 +701,18 @@ type TableProps<DataItem> = {
648
701
  withStickyHeader?: boolean;
649
702
  /** @default "No data available" */
650
703
  noDataItemsMessage?: string;
704
+ pageSize?: number;
651
705
  onClickRow?: (item: DataItem, index: number) => void;
652
706
  onClickAllCheckboxes?: (checked: boolean) => void;
707
+ onChangePage?: (page: number) => void;
708
+ onChangeFilter?: (filterData: Record<number, TableFilterData | undefined>) => void;
653
709
  } & ComponentMarginProps;
710
+ type TableRef = {
711
+ currentPage: number;
712
+ setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
713
+ pagesCount: number;
714
+ setCheckedItems: React.Dispatch<React.SetStateAction<boolean[]>>;
715
+ };
654
716
  type TableComponentType = {
655
717
  <DataItem>(props: ComponentPropWithRef<HTMLDivElement, TableProps<DataItem>>): React.ReactElement;
656
718
  };
@@ -790,4 +852,4 @@ declare const isMobileDevice: boolean;
790
852
 
791
853
  declare const reactRouterDomPlugin: BetterHtmlPlugin;
792
854
 
793
- export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$6 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, _default$2 as Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$8 as Icon, type IconName, type IconProps, type IconsConfig, _default$7 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, _default$4 as PageHeader, type PageHeaderProps, _default$5 as PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$3 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
855
+ export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };