slick-table 1.1.31 → 1.1.33

package/dist/types/shared/lib/slickgrid/ui/SlickgridTable/lib/hooks/useGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGrid.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/shared/lib/slickgrid/ui/SlickgridTable/lib/hooks/useGrid.ts"],"names":[],"mappings":"AACA,OAAO,EACN,OAAO,EACP,oBAAoB,EACpB,qBAAqB,EAOrB,MAAM,WAAW,CAAC;AAYnB,OAAO,EAAE,KAAK,EAAkB,MAAM,aAAa,CAAC;AAEpD,wBAAgB,OAAO,CAAC,EACvB,aAAiC,EACjC,kBAAkB,EAClB,SAAiB,EACjB,YAAqB,EACrB,OAAO,EACP,eAAe,EACf,MAAM,EACN,cAAqB,EACrB,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,OAAO,EACP,UAAU,EACV,mBAAmB,EACnB,iBAAkC,EAClC,qBAAqB,EACrB,OAAY,EACZ,KAAK,GACL,EAAE,KAAK,GAAG;IACV,WAAW,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC3C,YAAY,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;CAC7C,QAyHA"}
+{"version":3,"file":"useGrid.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/shared/lib/slickgrid/ui/SlickgridTable/lib/hooks/useGrid.ts"],"names":[],"mappings":"AACA,OAAO,EACN,OAAO,EACP,oBAAoB,EACpB,qBAAqB,EAOrB,MAAM,WAAW,CAAC;AAYnB,OAAO,EAAE,KAAK,EAAkB,MAAM,aAAa,CAAC;AAEpD,wBAAgB,OAAO,CAAC,EACvB,aAAiC,EACjC,kBAAkB,EAClB,SAAiB,EACjB,YAAqB,EACrB,OAAO,EACP,eAAe,EACf,MAAM,EACN,cAAqB,EACrB,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,OAAO,EACP,UAAU,EACV,mBAAmB,EACnB,iBAAkC,EAClC,qBAAqB,EACrB,OAAY,EACZ,KAAK,GACL,EAAE,KAAK,GAAG;IACV,WAAW,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC3C,YAAY,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;CAC7C,QA0HA"}

package/dist/types/shared/lib/slickgrid/ui/SlickgridTable/model/types/Props.d.ts

@@ -12,6 +12,7 @@ export interface Props {
     groups?: Grouping[];
     /** DataView Id property name to use (defaults to "id") */
     idPropertyName?: string;
+    isLoading?: boolean;
     items: Record<string, any>[];
     onAddNewRow?: Handler<OnAddNewRowEventArgs>;
     onBeforeEditCell?: Handler<OnBeforeEditCellEventArgs>;

package/dist/types/shared/lib/slickgrid/ui/SlickgridTable/model/types/Props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Props.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/shared/lib/slickgrid/ui/SlickgridTable/model/types/Props.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,2BAA2B,EAC3B,oBAAoB,EACpB,yBAAyB,EACzB,qBAAqB,EACrB,gBAAgB,EAChB,mBAAmB,EACnB,0BAA0B,EAC1B,8BAA8B,EAC9B,aAAa,EACb,SAAS,EACT,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,WAAW,KAAK;IACrB,aAAa,CAAC,EAAE,OAAO,aAAa,CAAC;IACrC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC/C,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,eAAe,CAAC,EAAE,CACjB,QAAQ,EAAE,aAAa,KACnB,CAAC,GAAG,EAAE,MAAM,KAAK,YAAY,GAAG,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC1C,mBAAmB,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;IAC3D,iBAAiB,CAAC,EAAE,CACnB,KAAK,EAAE,WAAW,KACd,OAAO,CAAC,0BAA0B,CAAC,CAAC;IACzC,qBAAqB,CAAC,EAAE,OAAO,CAAC,8BAA8B,CAAC,CAAC;IAChE,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;CACnB"}
+{"version":3,"file":"Props.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/shared/lib/slickgrid/ui/SlickgridTable/model/types/Props.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,2BAA2B,EAC3B,oBAAoB,EACpB,yBAAyB,EACzB,qBAAqB,EACrB,gBAAgB,EAChB,mBAAmB,EACnB,0BAA0B,EAC1B,8BAA8B,EAC9B,aAAa,EACb,SAAS,EACT,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,WAAW,KAAK;IACrB,aAAa,CAAC,EAAE,OAAO,aAAa,CAAC;IACrC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC/C,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,eAAe,CAAC,EAAE,CACjB,QAAQ,EAAE,aAAa,KACnB,CAAC,GAAG,EAAE,MAAM,KAAK,YAAY,GAAG,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC1C,mBAAmB,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;IAC3D,iBAAiB,CAAC,EAAE,CACnB,KAAK,EAAE,WAAW,KACd,OAAO,CAAC,0BAA0B,CAAC,CAAC;IACzC,qBAAqB,CAAC,EAAE,OAAO,CAAC,8BAA8B,CAAC,CAAC;IAChE,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;CACnB"}

package/dist/types/shared/lib/slickgrid/ui/SlickgridTable/ui/SlickgridTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlickgridTable.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/ui/SlickgridTable/ui/SlickgridTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAS3B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAoDpC,CAAC"}
+{"version":3,"file":"SlickgridTable.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/ui/SlickgridTable/ui/SlickgridTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAmDpC,CAAC"}

package/dist/types/shared/lib/slickgrid/ui/SlickgridTable/ui/SlickgridTable.style.d.ts

@@ -1,5 +1,8 @@
 declare const _default: {
-    Container: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    Skeleton: import('@emotion/styled').StyledComponent<import('@mui/material').SkeletonOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLSpanElement> | null | undefined;
+    }, "className" | "style" | "classes" | "children" | "animation" | "height" | "sx" | "variant" | "width"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+    Wrapper: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
     }, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 };

package/dist/types/shared/lib/slickgrid/ui/SlickgridTable/ui/SlickgridTable.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlickgridTable.style.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/ui/SlickgridTable/ui/SlickgridTable.style.ts"],"names":[],"mappings":";;;;;AAoIA,wBAA6B"}
+{"version":3,"file":"SlickgridTable.style.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/ui/SlickgridTable/ui/SlickgridTable.style.ts"],"names":[],"mappings":";;;;;;;;AAaA,wBAAqD"}

package/dist/types/shared/lib/slickgrid/ui/SlickgridTable/ui/Table/Table.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { Props } from '../../model';
+export declare const Table: FC<Props>;
+//# sourceMappingURL=Table.d.ts.map

package/dist/types/shared/lib/slickgrid/ui/SlickgridTable/ui/Table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/shared/lib/slickgrid/ui/SlickgridTable/ui/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAS3B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIpC,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,KAAK,CAoD3B,CAAC"}

package/dist/types/shared/lib/slickgrid/ui/SlickgridTable/ui/Table/Table.style.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    Container: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+    }, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+};
+export default _default;
+//# sourceMappingURL=Table.style.d.ts.map

package/dist/types/shared/lib/slickgrid/ui/SlickgridTable/ui/Table/Table.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.style.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/shared/lib/slickgrid/ui/SlickgridTable/ui/Table/Table.style.ts"],"names":[],"mappings":";;;;;AAoIA,wBAA6B"}

package/dist/types/shared/lib/slickgrid/ui/SlickgridTable/ui/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { Table } from './Table';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/shared/lib/slickgrid/ui/SlickgridTable/ui/Table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/shared/lib/slickgrid/ui/SlickgridTable/ui/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slick-table",
-  "version": "1.1.31",
+  "version": "1.1.33",
   "description": "Enhanced version of SlickGrid library",
   "private": false,
   "type": "module",

package/src/shared/lib/slickgrid/ui/SlickgridTable/lib/hooks/useGrid.ts

@@ -125,6 +125,7 @@ export function useGrid({
 		setTimeout(() => {
 			grid.setOptions({ ...defaultOptions, ...options });
 			grid.render();
+			headerButtons.highlightAllColumns(table.filter.args, table.id);
 			table.totalCalculator?.calculate(grid);
 			table.notifyObservers();
 		}, 0);

package/src/shared/lib/slickgrid/ui/SlickgridTable/model/types/Props.ts

@@ -32,6 +32,7 @@ export interface Props {
 	groups?: Grouping[];
 	/** DataView Id property name to use (defaults to "id") */
 	idPropertyName?: string;
+	isLoading?: boolean;
 	items: Record<string, any>[];
 	onAddNewRow?: Handler<OnAddNewRowEventArgs>;
 	onBeforeEditCell?: Handler<OnBeforeEditCellEventArgs>;

package/src/shared/lib/slickgrid/ui/SlickgridTable/ui/SlickgridTable.style.ts

@@ -1,133 +1,14 @@
-import { Box, styled } from "@mui/material";
+import { Box, Skeleton, styled } from "@mui/material";
 
-import { wink } from "../../styles";
-
-const fontSize = "0.75rem";
-const cellHeight = "24px";
-
-const Container = styled(Box)({
-	backgroundColor: "transparent",
-	fontFamily: "inherit",
+const Wrapper = styled(Box)({
 	height: "100%",
-	maxHeight: "100%",
-	maxWidth: "100%",
-	userSelect: "none",
-
-	"& .slick-header-column": {
-		"&.filter-active .slick-header-button::after": {
-			width: "7px",
-			height: "7px",
-			content: "''",
-			backgroundColor: "#2196f3",
-			position: "absolute",
-			borderRadius: "50%",
-			border: "2px solid #f8f8f8",
-			top: "3px",
-			right: "3px",
-		},
-		"&:not([data-id=_checkbox_selector]):not([data-id=isEdited])": {
-			"& .slick-column-name": {
-				textOverflow: "ellipsis",
-				whiteSpace: "nowrap",
-				overflow: "hidden",
-				maxWidth: "calc(100% - 16px)",
-			},
-		},
-		"&.slick-state-hover": {
-			"&.filter-active .slick-header-button::after": {
-				border: "2px solid #e8e8e8",
-			},
-			"& .slick-header-button": {
-				"&::before": {
-					backgroundColor: "#e8e8e8",
-				},
-			},
-		},
-		"& .slick-column-name": {
-			fontSize,
-		},
-		"& .slick-header-button": {
-			width: "19px",
-			height: "12px",
-			"&::before": {
-				position: "absolute",
-				content: "''",
-				width: "19px",
-				height: "12px",
-				top: "6px",
-				right: "5px",
-				backgroundImage:
-					"repeating-linear-gradient(0deg, #808080, #808080 2px, transparent 2px, transparent 4px)",
-				clipPath: "polygon(0% 0%, 100% 0%, 50% 110%)",
-				backgroundColor: "#f8f8f8",
-			},
-		},
-	},
-
-	"& .slick-viewport": {
-		// Prevent displaying vertical scroll bar. Override this style when table exceeds available width
-		overflowX: "hidden !important",
-		backgroundColor: "transparent",
-		"& .slick-cell": {
-			display: "flex",
-			fontSize,
-			"&.text-center": {
-				justifyContent: "center",
-				textAlign: "center",
-			},
-			"&.text-right": {
-				justifyContent: "end",
-				textAlign: "right",
-			},
-			"&.bold": {
-				fontWeight: "bold",
-			},
-			"&.wink": {
-				animation: `${wink} infinite 0.5s linear`,
-				"& input": {
-					animation: `${wink} infinite 0.5s linear`,
-				},
-			},
-			"& input.editor-text": {
-				textAlign: "inherit",
-			},
-			"& #autocomplete": {
-				boxShadow: "0 0 5px 1px gray",
-				fontSize,
-				margin: 0,
-				maxHeight: "300px",
-				minWidth: "100%",
-				overflow: "auto",
-				padding: 0,
-				position: "absolute",
-				top: cellHeight,
-				"& div": {
-					"&:hover": {
-						cursor: "pointer",
-					},
-					"& strong": {
-						color: "#007bff",
-					},
-				},
-			},
-		},
-	},
+	width: "100%",
+});
 
-	"& .slick-footerrow": {
-		borderTop: "1px solid silver",
-		"& .slick-footerrow-column": {
-			height: "100%",
-			display: "flex",
-			justifyContent: "flex-end",
-			alignItems: "center",
-			paddingRight: "5px",
-			borderBottom: "none",
-			fontWeight: "bold",
-			"&:last-child": {
-				borderRight: "none",
-			},
-		},
-	},
+const StyledSkeleton = styled(Skeleton)({
+	borderRadius: "10px",
+	height: "100%",
+	width: "100%",
 });
 
-export default { Container };
+export default { Skeleton: StyledSkeleton, Wrapper };

package/src/shared/lib/slickgrid/ui/SlickgridTable/ui/SlickgridTable.tsx

@@ -1,13 +1,7 @@
 import { FC } from "react";
 
-import {
-	onCellChange as cellChange,
-	useHotKeys,
-	useResizeCanvas,
-	useUpdateTotal,
-} from "../../../lib";
-import { onAddNewRow as addNewRow, useGrid } from "../lib";
 import { Props } from "../model";
+import { Table } from "./Table";
 
 import Styled from "./SlickgridTable.style";
 
@@ -20,6 +14,7 @@ export const SlickgridTable: FC<Props> = ({
 	getItemMetadata,
 	groups,
 	idPropertyName,
+	isLoading,
 	items,
 	onAddNewRow,
 	onBeforeEditCell,
@@ -32,35 +27,33 @@ export const SlickgridTable: FC<Props> = ({
 	options,
 	table,
 }) => {
-	useGrid({
-		SlickDataView,
-		applyCellCssStyles,
-		assignIds,
-		columnSorter,
-		columns,
-		getItemMetadata,
-		groups,
-		idPropertyName,
-		items,
-		onAddNewRow: onAddNewRow || addNewRow(table),
-		onBeforeEditCell,
-		onCellChange: onCellChange || cellChange(table),
-		onClick,
-		onDblClick,
-		onHeaderMenuCommand,
-		onRowCountChanged,
-		onSelectedRowsChanged,
-		options,
-		table,
-	});
-	useHotKeys(table);
-	useUpdateTotal(table);
-	useResizeCanvas(table);
-
 	return (
-		<Styled.Container
-			id={table.id}
-			className={"slick-container"}
-		></Styled.Container>
+		<Styled.Wrapper>
+			{isLoading ? (
+				<Styled.Skeleton animation="wave" variant={"rectangular"} />
+			) : (
+				<Table
+					SlickDataView={SlickDataView}
+					applyCellCssStyles={applyCellCssStyles}
+					assignIds={assignIds}
+					columnSorter={columnSorter}
+					columns={columns}
+					getItemMetadata={getItemMetadata}
+					groups={groups}
+					idPropertyName={idPropertyName}
+					items={items}
+					onAddNewRow={onAddNewRow}
+					onBeforeEditCell={onBeforeEditCell}
+					onCellChange={onCellChange}
+					onClick={onClick}
+					onDblClick={onDblClick}
+					onHeaderMenuCommand={onHeaderMenuCommand}
+					onRowCountChanged={onRowCountChanged}
+					onSelectedRowsChanged={onSelectedRowsChanged}
+					options={options}
+					table={table}
+				/>
+			)}
+		</Styled.Wrapper>
 	);
 };

package/src/shared/lib/slickgrid/ui/SlickgridTable/ui/Table/Table.style.ts

@@ -0,0 +1,133 @@
+import { Box, styled } from "@mui/material";
+
+import { wink } from "../../../styles";
+
+const fontSize = "0.75rem";
+const cellHeight = "24px";
+
+const Container = styled(Box)({
+	backgroundColor: "transparent",
+	fontFamily: "inherit",
+	height: "100%",
+	maxHeight: "100%",
+	maxWidth: "100%",
+	userSelect: "none",
+
+	"& .slick-header-column": {
+		"&.filter-active .slick-header-button::after": {
+			width: "7px",
+			height: "7px",
+			content: "''",
+			backgroundColor: "#2196f3",
+			position: "absolute",
+			borderRadius: "50%",
+			border: "2px solid #f8f8f8",
+			top: "3px",
+			right: "3px",
+		},
+		"&:not([data-id=_checkbox_selector]):not([data-id=isEdited])": {
+			"& .slick-column-name": {
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap",
+				overflow: "hidden",
+				maxWidth: "calc(100% - 16px)",
+			},
+		},
+		"&.slick-state-hover": {
+			"&.filter-active .slick-header-button::after": {
+				border: "2px solid #e8e8e8",
+			},
+			"& .slick-header-button": {
+				"&::before": {
+					backgroundColor: "#e8e8e8",
+				},
+			},
+		},
+		"& .slick-column-name": {
+			fontSize,
+		},
+		"& .slick-header-button": {
+			width: "19px",
+			height: "12px",
+			"&::before": {
+				position: "absolute",
+				content: "''",
+				width: "19px",
+				height: "12px",
+				top: "6px",
+				right: "5px",
+				backgroundImage:
+					"repeating-linear-gradient(0deg, #808080, #808080 2px, transparent 2px, transparent 4px)",
+				clipPath: "polygon(0% 0%, 100% 0%, 50% 110%)",
+				backgroundColor: "#f8f8f8",
+			},
+		},
+	},
+
+	"& .slick-viewport": {
+		// Prevent displaying vertical scroll bar. Override this style when table exceeds available width
+		overflowX: "hidden !important",
+		backgroundColor: "transparent",
+		"& .slick-cell": {
+			display: "flex",
+			fontSize,
+			"&.text-center": {
+				justifyContent: "center",
+				textAlign: "center",
+			},
+			"&.text-right": {
+				justifyContent: "end",
+				textAlign: "right",
+			},
+			"&.bold": {
+				fontWeight: "bold",
+			},
+			"&.wink": {
+				animation: `${wink} infinite 0.5s linear`,
+				"& input": {
+					animation: `${wink} infinite 0.5s linear`,
+				},
+			},
+			"& input.editor-text": {
+				textAlign: "inherit",
+			},
+			"& #autocomplete": {
+				boxShadow: "0 0 5px 1px gray",
+				fontSize,
+				margin: 0,
+				maxHeight: "300px",
+				minWidth: "100%",
+				overflow: "auto",
+				padding: 0,
+				position: "absolute",
+				top: cellHeight,
+				"& div": {
+					"&:hover": {
+						cursor: "pointer",
+					},
+					"& strong": {
+						color: "#007bff",
+					},
+				},
+			},
+		},
+	},
+
+	"& .slick-footerrow": {
+		borderTop: "1px solid silver",
+		"& .slick-footerrow-column": {
+			height: "100%",
+			display: "flex",
+			justifyContent: "flex-end",
+			alignItems: "center",
+			paddingRight: "5px",
+			borderBottom: "none",
+			fontWeight: "bold",
+			"&:last-child": {
+				borderRight: "none",
+			},
+		},
+	},
+});
+
+export default { Container };

package/src/shared/lib/slickgrid/ui/SlickgridTable/ui/Table/Table.tsx

@@ -0,0 +1,66 @@
+import { FC } from "react";
+
+import {
+	onCellChange as cellChange,
+	useHotKeys,
+	useResizeCanvas,
+	useUpdateTotal,
+} from "../../../../lib";
+import { onAddNewRow as addNewRow, useGrid } from "../../lib";
+import { Props } from "../../model";
+
+import Styled from "./Table.style";
+
+export const Table: FC<Props> = ({
+	SlickDataView,
+	applyCellCssStyles,
+	assignIds,
+	columnSorter,
+	columns,
+	getItemMetadata,
+	groups,
+	idPropertyName,
+	items,
+	onAddNewRow,
+	onBeforeEditCell,
+	onCellChange,
+	onClick,
+	onDblClick,
+	onHeaderMenuCommand,
+	onRowCountChanged,
+	onSelectedRowsChanged,
+	options,
+	table,
+}) => {
+	useGrid({
+		SlickDataView,
+		applyCellCssStyles,
+		assignIds,
+		columnSorter,
+		columns,
+		getItemMetadata,
+		groups,
+		idPropertyName,
+		items,
+		onAddNewRow: onAddNewRow || addNewRow(table),
+		onBeforeEditCell,
+		onCellChange: onCellChange || cellChange(table),
+		onClick,
+		onDblClick,
+		onHeaderMenuCommand,
+		onRowCountChanged,
+		onSelectedRowsChanged,
+		options,
+		table,
+	});
+	useHotKeys(table);
+	useUpdateTotal(table);
+	useResizeCanvas(table);
+
+	return (
+		<Styled.Container
+			id={table.id}
+			className={"slick-container"}
+		></Styled.Container>
+	);
+};

package/src/shared/lib/slickgrid/ui/SlickgridTable/ui/Table/index.ts

@@ -0,0 +1 @@
+export { Table } from "./Table";