infinity-ui-elements 1.7.9 → 1.7.10

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.
@@ -30,8 +30,11 @@ export interface TableProps<TData extends RowData> extends React.HTMLAttributes<
30
30
  hideColumnsOnDetailOpen?: number;
31
31
  selectedRowId?: string;
32
32
  onRowSelectionChange?: (rowId: string | null) => void;
33
+ columnWidths?: Partial<Record<string, string | number>>;
34
+ columnMinWidths?: Partial<Record<string, string | number>>;
35
+ columnMaxWidths?: Partial<Record<string, string | number>>;
33
36
  }
34
- declare function TableComponent<TData extends RowData>({ className, wrapperClassName, containerClassName, variant, size, table, enableRowSelection, enableSelectAll, isLoading, loadingComponent, emptyComponent, enableHorizontalScroll, stickyHeader, maxHeight, showRowHover, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground, detailPanel, hideColumnsOnDetailOpen, selectedRowId, onRowSelectionChange, ...props }: TableProps<TData>, ref: React.ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
37
+ declare function TableComponent<TData extends RowData>({ className, wrapperClassName, containerClassName, variant, size, table, enableRowSelection, enableSelectAll, isLoading, loadingComponent, emptyComponent, enableHorizontalScroll, stickyHeader, maxHeight, showRowHover, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground, detailPanel, hideColumnsOnDetailOpen, selectedRowId, onRowSelectionChange, columnWidths, columnMinWidths, columnMaxWidths, ...props }: TableProps<TData>, ref: React.ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
35
38
  export declare const Table: <TData extends RowData>(props: TableProps<TData> & {
36
39
  ref?: React.ForwardedRef<HTMLDivElement>;
37
40
  }) => ReturnType<typeof TableComponent>;
@@ -1 +1 @@
1
- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,KAAK,IAAI,aAAa,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAK7E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAOhD,OAAO,QAAQ,uBAAuB,CAAC;IACrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;CACF;AAID,MAAM,WAAW,UAAU,CAAC,KAAK,SAAS,OAAO,CAC/C,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC;IACjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACvD;AAID,iBAAS,cAAc,CAAC,KAAK,SAAS,OAAO,EAC3C,EACE,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,OAAO,EACP,IAAe,EACf,KAAK,EACL,kBAA0B,EAC1B,eAAuB,EACvB,SAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,sBAA8B,EAC9B,YAAoB,EACpB,SAAS,EACT,YAAmB,EACnB,UAAU,EACV,YAAY,EACZ,eAAe,EACf,aAAa,EACb,oBAA2B,EAC3B,WAAW,EACX,uBAA2B,EAC3B,aAAa,EACb,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,UAAU,CAAC,KAAK,CAAC,EACpB,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,2CAyLxC;AAID,eAAO,MAAM,KAAK,EAAuC,CACvD,KAAK,SAAS,OAAO,EAErB,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;CAAE,KACpE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAIvC,cAAc,iBAAiB,CAAC"}
1
+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,KAAK,IAAI,aAAa,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAK7E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAOhD,OAAO,QAAQ,uBAAuB,CAAC;IACrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;CACF;AAID,MAAM,WAAW,UAAU,CAAC,KAAK,SAAS,OAAO,CAC/C,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC;IACjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;IACxD,eAAe,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;CAC5D;AAID,iBAAS,cAAc,CAAC,KAAK,SAAS,OAAO,EAC3C,EACE,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,OAAO,EACP,IAAe,EACf,KAAK,EACL,kBAA0B,EAC1B,eAAuB,EACvB,SAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,sBAA8B,EAC9B,YAAoB,EACpB,SAAS,EACT,YAAmB,EACnB,UAAU,EACV,YAAY,EACZ,eAAe,EACf,aAAa,EACb,oBAA2B,EAC3B,WAAW,EACX,uBAA2B,EAC3B,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,eAAe,EACf,eAAe,EACf,GAAG,KAAK,EACT,EAAE,UAAU,CAAC,KAAK,CAAC,EACpB,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,2CAwNxC;AAID,eAAO,MAAM,KAAK,EAAuC,CACvD,KAAK,SAAS,OAAO,EAErB,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;CAAE,KACpE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAIvC,cAAc,iBAAiB,CAAC"}
@@ -17,6 +17,7 @@ export declare const StickyHeader: Story;
17
17
  export declare const StickyHeaderScrollableContainer: Story;
18
18
  export declare const WithRowClick: Story;
19
19
  export declare const HorizontalScroll: Story;
20
+ export declare const CustomColumnWidths: Story;
20
21
  export declare const WithoutHeaderBackground: Story;
21
22
  export declare const WithHeaderBackground: Story;
22
23
  export declare const WithDetailPanel: Story;
@@ -1 +1 @@
1
- {"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAyThC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAO5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,YAAY,EAAE,KAmC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAgC9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAgD5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyB5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAkB1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAyC9B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiC1B,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KAyC7C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA6B9B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAyBrC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAyBlC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgJ7B,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAoH1C,CAAC"}
1
+ {"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAyThC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAO5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,YAAY,EAAE,KAmC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAgC9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAgD5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyB5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAkB1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAyC9B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiC1B,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KAyC7C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA6B9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAuChC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAyBrC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAyBlC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgJ7B,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAoH1C,CAAC"}
@@ -1,3 +1,4 @@
1
+ import * as React from "react";
1
2
  import { type Row } from "@tanstack/react-table";
2
3
  interface TableBodyProps<TData> {
3
4
  rows: Row<TData>[];
@@ -12,7 +13,12 @@ interface TableBodyProps<TData> {
12
13
  onRowClick?: (row: TData) => void;
13
14
  getRowClassName: (row: TData) => string;
14
15
  handleRowClick: (row: TData, rowId: string) => void;
16
+ getColumnStyle: (columnId: string, fallback?: {
17
+ width?: number;
18
+ minWidth?: number;
19
+ maxWidth?: number;
20
+ }) => React.CSSProperties;
15
21
  }
16
- export declare function TableBody<TData>({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, }: TableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
22
+ export declare function TableBody<TData>({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, getColumnStyle, }: TableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
17
23
  export {};
18
24
  //# sourceMappingURL=TableBody.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableBody.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAK7D,UAAU,cAAc,CAAC,KAAK;IAC5B,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,OAAO,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC5C,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,eAAe,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAC;IACxC,cAAc,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAOD,wBAAgB,SAAS,CAAC,KAAK,EAAE,EAC/B,IAAI,EACJ,kBAAkB,EAClB,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,sBAAsB,EACtB,UAAU,EACV,eAAe,EACf,cAAc,GACf,EAAE,cAAc,CAAC,KAAK,CAAC,2CAsFvB"}
1
+ {"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAK7D,UAAU,cAAc,CAAC,KAAK;IAC5B,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,OAAO,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC5C,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,eAAe,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAC;IACxC,cAAc,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,cAAc,EAAE,CACd,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,KAChE,KAAK,CAAC,aAAa,CAAC;CAC1B;AAOD,wBAAgB,SAAS,CAAC,KAAK,EAAE,EAC/B,IAAI,EACJ,kBAAkB,EAClB,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,sBAAsB,EACtB,UAAU,EACV,eAAe,EACf,cAAc,EACd,cAAc,GACf,EAAE,cAAc,CAAC,KAAK,CAAC,2CAsFvB"}
@@ -1,3 +1,4 @@
1
+ import * as React from "react";
1
2
  import { type HeaderGroup } from "@tanstack/react-table";
2
3
  interface TableHeaderProps<TData> {
3
4
  headerGroups: HeaderGroup<TData>[];
@@ -12,7 +13,12 @@ interface TableHeaderProps<TData> {
12
13
  onToggleAllRows: (e?: unknown) => void;
13
14
  isAllRowsSelected: boolean;
14
15
  isSomeRowsSelected: boolean;
16
+ getColumnStyle: (columnId: string, fallback?: {
17
+ width?: number;
18
+ minWidth?: number;
19
+ maxWidth?: number;
20
+ }) => React.CSSProperties;
15
21
  }
16
- export declare function TableHeader<TData>({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, }: TableHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
22
+ export declare function TableHeader<TData>({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, getColumnStyle, }: TableHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
17
23
  export {};
18
24
  //# sourceMappingURL=TableHeader.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,uBAAuB,CAAC;AAK/B,UAAU,gBAAgB,CAAC,KAAK;IAC9B,YAAY,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;IACnC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,eAAe,EAAE,OAAO,CAAC;IACzB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,EACjC,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,oBAAoB,EACpB,YAAY,EACZ,IAAI,EACJ,eAAe,EACf,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,gBAAgB,CAAC,KAAK,CAAC,2CAqGzB"}
1
+ {"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,uBAAuB,CAAC;AAK/B,UAAU,gBAAgB,CAAC,KAAK;IAC9B,YAAY,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;IACnC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,eAAe,EAAE,OAAO,CAAC;IACzB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,CACd,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,KAChE,KAAK,CAAC,aAAa,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,EACjC,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,oBAAoB,EACpB,YAAY,EACZ,IAAI,EACJ,eAAe,EACf,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,GACf,EAAE,gBAAgB,CAAC,KAAK,CAAC,2CAuGzB"}
package/dist/index.esm.js CHANGED
@@ -2835,7 +2835,7 @@ const tableCellVariants = cva("text-body-medium-regular border-b border-surface-
2835
2835
  },
2836
2836
  });
2837
2837
 
2838
- function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, }) {
2838
+ function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, getColumnStyle, }) {
2839
2839
  const headerHeight = {
2840
2840
  small: 32,
2841
2841
  medium: 40,
@@ -2852,9 +2852,11 @@ function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHe
2852
2852
  "bg-surface-fill-neutral-moderate border-none", stickyHeader && "sticky z-20", !enableRowSelection && index === 0 && "rounded-tl-xlarge ", isLastVisibleColumn && "rounded-tr-xlarge", header.column.columnDef.meta?.headerClassName, headerClassName, "transition-all duration-300 ease-in-out", shouldHideColumn
2853
2853
  ? "opacity-0 translate-x-8 pointer-events-none"
2854
2854
  : "opacity-100 translate-x-0"), style: {
2855
- width: header.getSize(),
2856
- minWidth: header.column.columnDef.minSize,
2857
- maxWidth: header.column.columnDef.maxSize,
2855
+ ...getColumnStyle(header.column.id, {
2856
+ width: header.getSize(),
2857
+ minWidth: header.column.columnDef.minSize,
2858
+ maxWidth: header.column.columnDef.maxSize,
2859
+ }),
2858
2860
  top: stickyTop,
2859
2861
  }, children: header.isPlaceholder ? null : (jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() &&
2860
2862
  "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsx("span", { className: "text-surface-ink-neutral-muted", children: {
@@ -2865,7 +2867,7 @@ function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHe
2865
2867
  }) }));
2866
2868
  }
2867
2869
 
2868
- function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, }) {
2870
+ function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, getColumnStyle, }) {
2869
2871
  const [focusedCell, setFocusedCell] = React.useState(null);
2870
2872
  const [hoveredRow, setHoveredRow] = React.useState(null);
2871
2873
  return (jsx("tbody", { className: cn("bg-surface-fill-neutral-intense"), children: rows.map((row) => {
@@ -2883,11 +2885,11 @@ function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cell
2883
2885
  const cellState = isCellFocused ? "focus" : "default";
2884
2886
  return (jsx("td", { className: cn(tableCellVariants({ size, state: cellState }), cell.column.columnDef.meta?.cellClassName, cellClassName, "transition-all duration-300 ease-in-out", shouldHideColumn
2885
2887
  ? "opacity-0 translate-x-8 pointer-events-none"
2886
- : "opacity-100 translate-x-0"), style: {
2888
+ : "opacity-100 translate-x-0"), style: getColumnStyle(cell.column.id, {
2887
2889
  width: cell.column.getSize(),
2888
2890
  minWidth: cell.column.columnDef.minSize,
2889
2891
  maxWidth: cell.column.columnDef.maxSize,
2890
- }, tabIndex: 0, onFocus: () => setFocusedCell({ rowId: row.id, cellId: cell.id }), onBlur: () => setFocusedCell(null), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
2892
+ }), tabIndex: 0, onFocus: () => setFocusedCell({ rowId: row.id, cellId: cell.id }), onBlur: () => setFocusedCell(null), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
2891
2893
  })] }, row.id));
2892
2894
  }) }));
2893
2895
  }
@@ -2909,7 +2911,7 @@ function renderDefaultEmptyState({ colSpan }) {
2909
2911
  }
2910
2912
 
2911
2913
  // ==================== Component ====================
2912
- function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, detailPanel, hideColumnsOnDetailOpen = 3, selectedRowId, onRowSelectionChange, ...props }, ref) {
2914
+ function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, detailPanel, hideColumnsOnDetailOpen = 3, selectedRowId, onRowSelectionChange, columnWidths, columnMinWidths, columnMaxWidths, ...props }, ref) {
2913
2915
  // ==================== State ====================
2914
2916
  const [internalSelectedRowId, setInternalSelectedRowId] = React.useState(null);
2915
2917
  const selectedRowIdRef = React.useRef(null);
@@ -2950,6 +2952,21 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
2950
2952
  ? headers.length - hideColumnsOnDetailOpen
2951
2953
  : headers.length;
2952
2954
  }, [isDetailPanelOpen, headers.length, hideColumnsOnDetailOpen]);
2955
+ const normalizeSizeValue = (value) => {
2956
+ if (value === undefined)
2957
+ return undefined;
2958
+ return typeof value === "number" ? `${value}px` : value;
2959
+ };
2960
+ const getColumnStyle = React.useCallback((columnId, fallback) => {
2961
+ const width = columnWidths?.[columnId] ?? fallback?.width ?? undefined;
2962
+ const minWidth = columnMinWidths?.[columnId] ?? fallback?.minWidth ?? undefined;
2963
+ const maxWidth = columnMaxWidths?.[columnId] ?? fallback?.maxWidth ?? undefined;
2964
+ return {
2965
+ width: normalizeSizeValue(width),
2966
+ minWidth: normalizeSizeValue(minWidth),
2967
+ maxWidth: normalizeSizeValue(maxWidth),
2968
+ };
2969
+ }, [columnWidths, columnMinWidths, columnMaxWidths]);
2953
2970
  const containerStyle = React.useMemo(() => {
2954
2971
  if (!maxHeight)
2955
2972
  return undefined;
@@ -3005,7 +3022,7 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
3005
3022
  return renderDefaultEmptyState({ colSpan: table.getAllColumns().length });
3006
3023
  };
3007
3024
  // ==================== Render ====================
3008
- return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxs("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: [jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size || "medium", headerClassName: headerClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected() }), isLoading ? (jsx("tbody", { children: renderLoadingState() })) : !hasData ? (jsx("tbody", { children: renderEmptyState() })) : (jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, effectiveSelectedRowId: effectiveSelectedRowId, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal }))] }), detailPanel && (jsx(DetailPanel, { isOpen: isDetailPanelOpen, content: detailPanel, data: getSelectedRowData(), onClose: handleDetailPanelClose }))] }) }));
3025
+ return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxs("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: [jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size || "medium", headerClassName: headerClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), isLoading ? (jsx("tbody", { children: renderLoadingState() })) : !hasData ? (jsx("tbody", { children: renderEmptyState() })) : (jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, effectiveSelectedRowId: effectiveSelectedRowId, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }), detailPanel && (jsx(DetailPanel, { isOpen: isDetailPanelOpen, content: detailPanel, data: getSelectedRowData(), onClose: handleDetailPanelClose }))] }) }));
3009
3026
  }
3010
3027
  // ==================== Export ====================
3011
3028
  const Table = React.forwardRef(TableComponent);