@symply.io/basic-components 1.0.3 → 1.0.5

package/.gitignore

@@ -12,4 +12,5 @@ yarn-debug.log*
 yarn-error.log*
 *.js
 *.d.ts
-dist
+dist
+.eslintrc.json

package/BasicTable/TableBody.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { BasicTableBodyProps } from "./types";
-declare const BasicTableBody: import("react").ForwardRefExoticComponent<BasicTableBodyProps & import("react").RefAttributes<HTMLDivElement>>;
-export default BasicTableBody;
+import { BasicTableBodyProps, KvProps } from "./types";
+declare const _default: import("react").ForwardRefExoticComponent<BasicTableBodyProps<KvProps, KvProps> & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/BasicTable/TableBody.js

@@ -12,11 +12,11 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import Grid from "@mui/material/Grid";
-import useCustomTheme from "../useCustomTheme";
+import useTheme from "@mui/material/styles/useTheme";
 import TableBodyRow from "./TableBodyRow";
-var BasicTableBody = forwardRef(function (props, ref) {
-    var rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, noDataText = props.noDataText;
-    var theme = useCustomTheme();
+function BasicTableBody(props, ref) {
+    var rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, noDataText = props.noDataText, onRowClick = props.onRowClick;
+    var theme = useTheme();
     return (_jsx(Grid, __assign({ item: true, sx: {
             maxHeight: "41vh",
             overflowY: "auto",
@@ -26,8 +26,8 @@ var BasicTableBody = forwardRef(function (props, ref) {
             "&::-webkit-scrollbar": {
                 width: forFrozen ? 0 : "initial"
             }
-        } }, { children: _jsx("div", __assign({ ref: ref }, { children: rows && rows.length > 0 ? (rows.map(function (row, index) {
-                return (_jsx(TableBodyRow, { row: row, rows: rows, columns: columns }, "BasicTable_".concat(index)));
+        } }, { children: _jsx("div", __assign({ ref: ref }, { children: rows.length > 0 ? (rows.map(function (row, index) {
+                return (_jsx(TableBodyRow, { row: row, rows: rows, forFrozen: forFrozen, columns: columns, onRowClick: onRowClick }, "BasicTable_".concat(index)));
             })) : (_jsx(Grid, __assign({ container: true, justifyContent: "space-around", alignItems: "center", wrap: "nowrap", sx: {
                     height: theme.spacing(7.5),
                     borderBottomWidth: "thin",
@@ -46,5 +46,5 @@ var BasicTableBody = forwardRef(function (props, ref) {
                         paddingLeft: theme.spacing(0.625),
                         paddingRight: theme.spacing(0.625)
                     } }, { children: noDataText })) }))) })) })));
-});
-export default BasicTableBody;
+}
+export default forwardRef(BasicTableBody);

package/BasicTable/TableBodyRow.d.ts

@@ -1,3 +1,3 @@
-import { BasicTableBodyRowProps } from "./types";
-declare function BasicTableBodyRow(props: BasicTableBodyRowProps): JSX.Element;
+import { BasicTableBodyRowProps, KvProps } from "./types";
+declare function BasicTableBodyRow<RowProps extends KvProps, ExtraProps extends KvProps>(props: BasicTableBodyRowProps<RowProps, ExtraProps>): JSX.Element;
 export default BasicTableBodyRow;

package/BasicTable/TableBodyRow.js

@@ -11,11 +11,12 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cloneElement } from "react";
+import colorAlpha from "color-alpha";
 import Grid from "@mui/material/Grid";
-import useCustomTheme from "../useCustomTheme";
+import useTheme from "@mui/material/styles/useTheme";
 function BasicTableBodyRow(props) {
-    var row = props.row, rows = props.rows, columns = props.columns;
-    var theme = useCustomTheme();
+    var row = props.row, rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, onRowClick = props.onRowClick;
+    var theme = useTheme();
     return (_jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
             height: theme.spacing(7.5),
             borderBottomWidth: "thin",
@@ -23,6 +24,12 @@ function BasicTableBodyRow(props) {
             borderBottomStyle: "solid",
             padding: theme.spacing(0.5, 0),
             minHeight: theme.spacing(6),
+            "&:hover": {
+                cursor: !forFrozen && onRowClick ? "pointer" : "default",
+                backgroundColor: !forFrozen && onRowClick
+                    ? colorAlpha(theme.palette.primary.main, 0.1)
+                    : "initial"
+            },
             "& :nth-of-last-type(1)": {
                 borderBottom: "none"
             },
@@ -30,7 +37,11 @@ function BasicTableBodyRow(props) {
                 fontSize: "0.9rem",
                 fontWeight: 600
             }
-        } }, { children: columns.map(function (col) {
+        }, onClick: onRowClick
+            ? function () {
+                onRowClick(row);
+            }
+            : undefined }, { children: columns.map(function (col) {
             var accessor = col.accessor, Cell = col.Cell, _a = col.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, width = col.width, _b = col.align, align = _b === void 0 ? "center" : _b;
             return (_jsx(Grid, __assign({ item: true, textAlign: align, sx: {
                     minWidth: minWidth,

package/BasicTable/TableFooter.d.ts

@@ -1,3 +1,3 @@
-import { BasicTableFooterProps } from "./types";
-declare function BasicTableFooter(props: BasicTableFooterProps): JSX.Element;
+import { BasicTableFooterProps, KvProps } from "./types";
+declare function BasicTableFooter<RowProps extends KvProps, ExtraProps extends KvProps>(props: BasicTableFooterProps<RowProps, ExtraProps>): JSX.Element;
 export default BasicTableFooter;

package/BasicTable/TableFooter.js

@@ -12,10 +12,10 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { cloneElement } from "react";
 import Grid from "@mui/material/Grid";
-import useCustomTheme from "../useCustomTheme";
+import useTheme from "@mui/material/styles/useTheme";
 function BasicTableFooter(props) {
     var footers = props.footers;
-    var theme = useCustomTheme();
+    var theme = useTheme();
     return footers && footers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
             backgroundColor: "#eaf0f6",
             padding: theme.spacing(1.5, 0),

package/BasicTable/TableHeader.d.ts

@@ -1,3 +1,3 @@
-import { BasicTableHeaderProps } from "./types";
-declare function BasicTableHeader(props: BasicTableHeaderProps): JSX.Element;
+import { BasicTableHeaderProps, KvProps } from "./types";
+declare function BasicTableHeader<RowProps extends KvProps, ExtraProps extends KvProps>(props: BasicTableHeaderProps<RowProps, ExtraProps>): JSX.Element;
 export default BasicTableHeader;

package/BasicTable/TableHeader.js

@@ -12,10 +12,10 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { cloneElement } from "react";
 import Grid from "@mui/material/Grid";
-import useCustomTheme from "../useCustomTheme";
+import useTheme from "@mui/material/styles/useTheme";
 function BasicTableHeader(props) {
     var headers = props.headers;
-    var theme = useCustomTheme();
+    var theme = useTheme();
     return headers && headers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
             backgroundColor: "#eaf0f6",
             padding: theme.spacing(1.5, 0),

package/BasicTable/index.d.ts

@@ -1,5 +1,5 @@
-import { BasicTableProps } from "./types";
-declare function BasicTable(props: BasicTableProps): JSX.Element;
+import { BasicTableProps, KvProps } from "./types";
+declare function BasicTable<RowProps extends KvProps, ExtraProps extends KvProps>(props: BasicTableProps<RowProps, ExtraProps>): JSX.Element;
 export default BasicTable;
 export * from "./types";
 export { default as useTable } from "./useTable";

package/BasicTable/index.js

@@ -22,7 +22,7 @@ import TableHeader from "./TableHeader";
 import TableFooter from "./TableFooter";
 function BasicTable(props) {
     var _a;
-    var _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rows, rows = _c === void 0 ? [] : _c, _d = props.headers, headers = _d === void 0 ? [] : _d, _e = props.footers, footers = _e === void 0 ? [] : _e, _f = props.noDataText, noDataText = _f === void 0 ? "No Data!" : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rows, rows = _c === void 0 ? [] : _c, _d = props.headers, headers = _d === void 0 ? [] : _d, _e = props.footers, footers = _e === void 0 ? [] : _e, _f = props.noDataText, noDataText = _f === void 0 ? "No Data!" : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
     var fronzenColsCount = useMemo(function () { var _a; return (_a = columns.filter(function (col) { return col.canBeFrozen; })) === null || _a === void 0 ? void 0 : _a.length; }, [columns]);
@@ -63,7 +63,11 @@ function BasicTable(props) {
                             zIndex: 999,
                             backgroundColor: "Menu",
                             boxShadow: "6px 0 6px -4px rgba(0,0,0,0.15)"
-                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, columns: columns.filter(function (col) { return col.canBeFrozen; }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) { return footer.canBeFrozen; }) })] })) }))), _jsx(Grid, __assign({ item: true, style: {
+                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, onRowClick: onRowClick
+                                        ? function (row) {
+                                            onRowClick(row);
+                                        }
+                                        : undefined, columns: columns.filter(function (col) { return col.canBeFrozen; }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) { return footer.canBeFrozen; }) })] })) }))), _jsx(Grid, __assign({ item: true, style: {
                             width: "100%",
                             marginLeft: canFreeze ? frozenWidth || 0 : 0,
                             overflow: "auto"
@@ -71,7 +75,11 @@ function BasicTable(props) {
                                         return isUpMd ? !header.canBeFrozen : true;
                                     }) }), _jsx(TableBody, { rows: rows, ref: dynamicRef, noDataText: noDataText, columns: columns.filter(function (col) {
                                         return isUpMd ? !col.canBeFrozen : true;
-                                    }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) {
+                                    }), onRowClick: onRowClick
+                                        ? function (row) {
+                                            onRowClick(row);
+                                        }
+                                        : undefined }), _jsx(TableFooter, { footers: footers.filter(function (footer) {
                                         return isUpMd ? !footer.canBeFrozen : true;
                                     }) })] })) }))] })) })) })));
 }

package/BasicTable/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement, CSSProperties } from "react";
+export declare type KvProps = Record<string, unknown>;
 interface SortByProps {
     id: string;
     desc: boolean;
@@ -6,7 +7,15 @@ interface SortByProps {
 interface InitialStateProps {
     sortBy?: SortByProps;
 }
-export interface IColumn {
+export interface SortingProps {
+    field: string;
+    isSorted?: boolean;
+    descending?: boolean;
+}
+export interface UseScrollProps {
+    canFreeze?: boolean;
+}
+export declare type ColumnBaseProps = {
     Header: ReactElement;
     headerTip?: string;
     Body: ReactElement;
@@ -17,57 +26,55 @@ export interface IColumn {
     canBeFrozen?: boolean;
     minWidth?: number;
     width?: number;
-    [name: string]: any;
-}
-interface IHeader extends IColumn {
+};
+export declare type UseTableBaseProps<RowProps extends KvProps> = {
+    data: Array<RowProps>;
+    columns: Array<ColumnBaseProps>;
+    initialState?: InitialStateProps;
+    disableSortBy?: boolean;
+    onSort?: (props: SortingProps) => unknown;
+};
+export declare type UseTableProps<RowProps extends KvProps, ExtraProps extends KvProps> = UseTableBaseProps<RowProps> & ExtraProps;
+export declare type HeaderProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnBaseProps & Omit<UseTableProps<RowProps, ExtraProps>, keyof UseTableBaseProps<RowProps>> & {
     Cell: ReactElement;
     title: string;
     canSort?: boolean;
     onSort: (props: SortingProps) => unknown;
-}
-interface IFooter extends IColumn {
+};
+export declare type FooterProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnBaseProps & Omit<UseTableProps<RowProps, ExtraProps>, keyof UseTableBaseProps<RowProps>> & {
     Cell: ReactElement;
-}
-interface IBodyColumn extends IColumn {
+};
+export declare type ColumnProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnBaseProps & Omit<UseTableProps<RowProps, ExtraProps>, keyof UseTableBaseProps<RowProps>>;
+export declare type ColumnWithCellProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnProps<RowProps, ExtraProps> & {
     Cell: ReactElement;
+};
+export declare type UserTableReturns<RowProps extends KvProps, ExtraProps extends KvProps> = {
+    headers: Array<HeaderProps<RowProps, ExtraProps>>;
+    footers: Array<FooterProps<RowProps, ExtraProps>>;
+    columns: Array<ColumnWithCellProps<RowProps, ExtraProps>>;
+    rows: Array<RowProps>;
+};
+export interface BasicTableHeaderProps<RowProps extends KvProps, ExtraProps extends KvProps> {
+    headers: Array<HeaderProps<RowProps, ExtraProps>>;
 }
-export interface IRow {
-    [name: string]: any;
-}
-export interface SortingProps {
-    field: string;
-    isSorted?: boolean;
-    descending?: boolean;
-}
-export interface UseTableProps {
-    data: Array<IRow>;
-    columns: Array<IColumn>;
-    initialState?: InitialStateProps;
-    disableSortBy?: boolean;
-    onSort?: (props: SortingProps) => unknown;
-    [name: string]: any;
-}
-export interface UseScrollProps {
-    canFreeze?: boolean;
-}
-export interface BasicTableHeaderProps {
-    headers: Array<IHeader>;
-}
-export interface BasicTableFooterProps {
-    footers: Array<IFooter>;
+export interface BasicTableFooterProps<RowProps extends KvProps, ExtraProps extends KvProps> {
+    footers: Array<FooterProps<RowProps, ExtraProps>>;
 }
-export interface BasicTableBodyProps {
-    columns: Array<IBodyColumn>;
-    rows: Array<IRow>;
+export interface BasicTableBodyProps<RowProps extends KvProps, ExtraProps extends KvProps> {
+    columns: Array<ColumnWithCellProps<RowProps, ExtraProps>>;
+    rows: Array<RowProps>;
     noDataText?: string;
     forFrozen?: boolean;
+    onRowClick?: (row: RowProps) => unknown;
 }
-export interface BasicTableBodyRowProps {
-    columns: Array<IBodyColumn>;
-    rows: Array<IRow>;
-    row: IRow;
+export interface BasicTableBodyRowProps<RowProps extends KvProps, ExtraProps extends KvProps> {
+    columns: Array<ColumnWithCellProps<RowProps, ExtraProps>>;
+    rows: Array<RowProps>;
+    row: RowProps;
+    forFrozen?: boolean;
+    onRowClick?: (row: RowProps) => unknown;
 }
-export declare type BasicTableProps = BasicTableHeaderProps & Omit<BasicTableBodyProps, "forFrozen"> & Partial<BasicTableFooterProps> & {
+export declare type BasicTableProps<RowProps extends KvProps, ExtraProps extends KvProps> = BasicTableHeaderProps<RowProps, ExtraProps> & Omit<BasicTableBodyProps<RowProps, ExtraProps>, "forFrozen"> & Partial<BasicTableFooterProps<RowProps, ExtraProps>> & {
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 };

package/BasicTable/useTable.d.ts

@@ -1,47 +1,3 @@
-/// <reference types="react" />
-import { UseTableProps, SortingProps } from "./types";
-declare function useTable(props: UseTableProps): {
-    headers: {
-        Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        headerTip?: string | undefined;
-        Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-        align?: "left" | "right" | "center" | undefined;
-        accessor: string;
-        canSort: boolean | undefined;
-        canBeFrozen?: boolean | undefined;
-        minWidth?: number | undefined;
-        width?: number | undefined;
-        Cell: JSX.Element;
-        title: string;
-        onSort: ({ field }: Pick<SortingProps, "field">) => void;
-    }[];
-    footers: {
-        Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        headerTip?: string | undefined;
-        Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-        align?: "left" | "right" | "center" | undefined;
-        accessor: string;
-        canSort?: boolean | undefined;
-        canBeFrozen?: boolean | undefined;
-        minWidth?: number | undefined;
-        width?: number | undefined;
-        Cell: import("react").FunctionComponentElement<any>;
-    }[];
-    columns: {
-        Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        headerTip?: string | undefined;
-        Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-        align?: "left" | "right" | "center" | undefined;
-        accessor: string;
-        canSort?: boolean | undefined;
-        canBeFrozen?: boolean | undefined;
-        minWidth?: number | undefined;
-        width?: number | undefined;
-        Cell: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    }[];
-    rows: import("./types").IRow[];
-};
+import { UseTableProps, KvProps, UserTableReturns } from "./types";
+declare function useTable<T extends KvProps, F extends KvProps>(props: UseTableProps<T, F>): UserTableReturns<T, F>;
 export default useTable;

package/BasicTable/useTable.js

@@ -66,7 +66,7 @@ function useTable(props) {
         }
         return "↓";
     }, [sortingProps]);
-    var rows = useMemo(function () { return data.map(function (d) { return d; }); }, [data]);
+    var rows = useMemo(function () { return data.map(function (d) { return (__assign({}, d)); }); }, [data]);
     var cols = useMemo(function () {
         return columns.map(function (col) {
             var Body = col.Body;

package/DigitInput/useInteractions.js

@@ -7,7 +7,7 @@ function useInteractions(props) {
         if (!event.target.value || /^\d+$/g.test(event.target.value)) {
             onChange(event.target.value);
         }
-    }, []);
+    }, [onChange]);
     var onOpenTooltip = useCallback(function () {
         setTooltipOpen(true);
     }, []);
@@ -18,7 +18,7 @@ function useInteractions(props) {
         tooltipOpen: tooltipOpen,
         handleChange: handleChange,
         onOpenTooltip: onOpenTooltip,
-        onCloseTooltip: onCloseTooltip,
+        onCloseTooltip: onCloseTooltip
     };
 }
 export default useInteractions;

package/NumberInput/useInteractions.js

@@ -2,7 +2,7 @@ import { useState, useCallback, useMemo } from "react";
 function useInteractions(props) {
     var value = props.value, integerOnly = props.integerOnly, _a = props.minValue, minValue = _a === void 0 ? Number.MIN_SAFE_INTEGER : _a, _b = props.maxValue, maxValue = _b === void 0 ? Number.MAX_SAFE_INTEGER : _b, onChange = props.onChange;
     var _c = useState(false), tooltipOpen = _c[0], setTooltipOpen = _c[1];
-    var exceedError = useMemo(function () { return !!value && (Number(value) < minValue || Number(value) > maxValue); }, []);
+    var exceedError = useMemo(function () { return !!value && (Number(value) < minValue || Number(value) > maxValue); }, [value, minValue, maxValue]);
     var handleChange = useCallback(function (event) {
         event.preventDefault();
         var val = event.currentTarget.value;
@@ -15,7 +15,7 @@ function useInteractions(props) {
         else if (val !== "" && val !== "-" && !/^(-?\d*)(\.\d*)?$/g.test(val))
             return;
         onChange(val);
-    }, []);
+    }, [onChange, minValue, integerOnly]);
     var handleBlur = useCallback(function () {
         var excludedValue = [
             null,
@@ -25,7 +25,7 @@ function useInteractions(props) {
             "-",
             "-.",
             "null",
-            "undefined",
+            "undefined"
         ];
         var strVal = String(value).trim();
         if (strVal !== null && strVal.lastIndexOf(".") === strVal.length - 1) {
@@ -35,7 +35,7 @@ function useInteractions(props) {
         else if (excludedValue.includes(strVal)) {
             onChange("");
         }
-    }, []);
+    }, [value, onChange]);
     var onOpenTooltip = useCallback(function () {
         setTooltipOpen(true);
     }, []);
@@ -48,7 +48,7 @@ function useInteractions(props) {
         handleBlur: handleBlur,
         handleChange: handleChange,
         onOpenTooltip: onOpenTooltip,
-        onCloseTooltip: onCloseTooltip,
+        onCloseTooltip: onCloseTooltip
     };
 }
 export default useInteractions;

package/README.md

@@ -214,7 +214,7 @@ import { BasicTable, useTable } from '@symply.io/basic-components';
 import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable'; 
 ```
 
-<h5>Column Props (IColumn)</h5>
+<h5>Column Props (ColumnBaseProps)</h5>
 
 | Name        | Type                        | Default | Required | Description                                           |
 | ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
@@ -231,32 +231,33 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
 
 <h5>Hook Props</h5>
 
-| Name          | Type                       | Default | Required | Description                                 |
-| ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
-| columns       | Array\<IColumn\>           |         | true     | table columns                               |
-| data          | Array<{ [name]: unknown }> |         | true     | table data/rows                             |
-| disableSortBy | bool                       |         | false    | If true, the whole table can't be sortable. |
-| initialState  | { sortBy?: SortByProps }   |         | false    | Set the initial states                      |
-| onSort        | func                       |         | false    | The function for sorting rows.              |
+| Name          | Type                               | Default | Required | Description                                 |
+| ------------- | ---------------------------------- | ------- | -------- | ------------------------------------------- |
+| columns       | Array\<ColumnBaseProps\>           |         | true     | table columns                               |
+| data          | Array<{ [name: string]: unknown }> |         | true     | table data/rows                             |
+| disableSortBy | bool                               |         | false    | If true, the whole table can't be sortable. |
+| initialState  | { sortBy?: SortByProps }           |         | false    | Set the initial states                      |
+| onSort        | func                               |         | false    | The function for sorting rows.              |
 
 <h5>Hook Returns</h5>
 
-| Name    | Type                 | Description               |
-| ------- | -------------------- | ------------------------- |
-| headers | Array\<IHeader\>     | The cells for the header. |
-| columns | Array\<IBodyColumn\> | The cells for the body.   |
-| footers | Array\<IFooter>      | The cells for the footer. |
-| rows    | Array<IRow\>         | The rows for the table.   |
+| Name    | Type                         | Description               |
+| ------- | ---------------------------- | ------------------------- |
+| headers | Array\<HeaderProps\>         | The cells for the header. |
+| columns | Array\<ColumnWithCellProps\> | The cells for the body.   |
+| footers | Array\<FooterProps>          | The cells for the footer. |
+| rows    | Array<RowProps\>             | The rows for the table.   |
 
 <h5>Component Props</h5>
 
-| Name       | Type                 | Default    | Required | Description                               |
-| ---------- | -------------------- | ---------- | -------- | ----------------------------------------- |
-| headers    | Array\<IHeader\>     |            | true     | The cells for the header. (from the hook) |
-| columns    | Array\<IBodyColumn\> |            | true     | The cells for the body. (from the hook)   |
-| footers    | Array\<IFooter>      | []         | false    | The cells for the footer. (from the hook) |
-| noDataText | string               | 'No Data!' | false    | The text when no data rendered.           |
-| rows       | Array<IRow\>         |            | true     | The rows for the table. (from the hook)   |
+| Name       | Type                         | Default    | Required | Description                               |
+| ---------- | ---------------------------- | ---------- | -------- | ----------------------------------------- |
+| headers    | Array\<HeaderProps\>         |            | true     | The cells for the header. (from the hook) |
+| columns    | Array\<ColumnWithCellProps\> |            | true     | The cells for the body. (from the hook)   |
+| footers    | Array\<FooterProps>          | []         | false    | The cells for the footer. (from the hook) |
+| onRowClick | func                         |            | false    | The function for row clicking.            |
+| noDataText | string                       | 'No Data!' | false    | The text when no data rendered.           |
+| rows       | Array<RowProps\>             |            | true     | The rows for the table. (from the hook)   |
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",