implementation of datatable

src/core/components/DataTable/buttons/CopyButton.js

@@ -0,0 +1,74 @@
+import { getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils";
+import { Button, Tooltip } from "@mui/material";
+
+const DataTable_CopyButton = ({
+    cell,
+    table,
+    ...rest
+}) => {
+    const {
+        options: { localization, muiCopyButtonProps },
+    } = table;
+    const { column, row } = cell;
+    const { columnDef } = column;
+
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = (event, text) => {
+        event.stopPropagation();
+        navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 4000);
+    };
+
+    const buttonProps = {
+        ...parseFromValuesOrFunc(muiCopyButtonProps, {
+            cell,
+            column,
+            row,
+            table,
+        }),
+        ...parseFromValuesOrFunc(columnDef.muiCopyButtonProps, {
+            cell,
+            column,
+            row,
+            table,
+        }),
+        ...rest,
+    };
+
+    return (
+        <Tooltip
+            {...getCommonTooltipProps('top')}
+            title={
+                buttonProps?.title ??
+                (copied ? localization.copiedToClipboard : localization.clickToCopy)
+            }
+        >
+            <Button
+                onClick={(e) => handleCopy(e, cell.getValue())}
+                size="small"
+                type="button"
+                variant="text"
+                {...buttonProps}
+                sx={(theme) => ({
+                    backgroundColor: 'transparent',
+                    border: 'none',
+                    color: 'inherit',
+                    cursor: 'copy',
+                    fontFamily: 'inherit',
+                    fontSize: 'inherit',
+                    letterSpacing: 'inherit',
+                    m: '-0.25rem',
+                    minWidth: 'unset',
+                    py: 0,
+                    textAlign: 'inherit',
+                    textTransform: 'inherit',
+                    ...(parseFromValuesOrFunc(buttonProps?.sx, theme)),
+                })}
+                title={undefined}
+            />
+        </Tooltip>
+    );
+}
+export default DataTable_CopyButton

src/core/components/DataTable/buttons/GrabHandleButton.js

@@ -0,0 +1,54 @@
+import { getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils";
+import { IconButton, Tooltip } from "@mui/material";
+
+const DataTable_GrabHandleButton = ({
+    location,
+    table,
+    ...rest
+}) => {
+    const {
+        options: {
+            icons: { DragHandleIcon },
+            localization,
+        },
+    } = table;
+
+    return (
+        <Tooltip
+            {...getCommonTooltipProps('top')}
+            title={rest?.title ?? localization.move}
+        >
+            <IconButton
+                aria-label={rest.title ?? localization.move}
+                disableRipple
+                draggable="true"
+                size="small"
+                {...rest}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    rest?.onClick?.(e);
+                }}
+                sx={(theme) => ({
+                    '&:active': {
+                        cursor: 'grabbing',
+                    },
+                    '&:hover': {
+                        backgroundColor: 'transparent',
+                        opacity: 1,
+                    },
+                    cursor: 'grab',
+                    m: '0 -0.1rem',
+                    opacity: location === 'row' ? 1 : 0.5,
+                    p: '2px',
+                    transition: 'all 150ms ease-in-out',
+                    ...(parseFromValuesOrFunc(rest?.sx, theme)),
+                })}
+                title={undefined}
+            >
+                <DragHandleIcon />
+            </IconButton>
+        </Tooltip>
+    );
+
+}
+export default DataTable_GrabHandleButton

src/core/components/DataTable/buttons/ShowHideColumnsButton.js

@@ -0,0 +1,41 @@
+import { IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import DataTable_ShowHideColumnsMenu from "../menus/ShowHideColumnsMenu";
+
+const DataTable_ShowHideColumnsButton = ({ table, ...rest }) => {
+    const {
+        options: {
+            icons: { ViewColumnIcon },
+            localization,
+        },
+    } = table;
+
+    const [anchorEl, setAnchorEl] = useState(null);
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    return (
+        <>
+            <Tooltip title={rest?.title ?? localization.showHideColumns}>
+                <IconButton
+                    aria-label={localization.showHideColumns}
+                    onClick={handleClick}
+                    {...rest}
+                    title={undefined}
+                >
+                    <ViewColumnIcon />
+                </IconButton>
+            </Tooltip>
+            {anchorEl && (
+                <DataTable_ShowHideColumnsMenu
+                    anchorEl={anchorEl}
+                    setAnchorEl={setAnchorEl}
+                    table={table}
+                />
+            )}
+        </>
+    );
+}
+export default DataTable_ShowHideColumnsButton

src/core/components/DataTable/buttons/ToggleFiltersButton.js

@@ -0,0 +1,4 @@
+const DataTable_ToggleFiltersButton = ({ table, ...rest }) => {
+    return <></>
+}
+export default DataTable_ToggleFiltersButton