{renderEmptyRowsFallback?.({ table }) ?? (
{globalFilter || columnFilters.length
@@ -155,12 +143,10 @@ const DataTable_TableBody = ({
row,
rowVirtualizer,
staticRowIndex,
- virtualRow: rowVirtualizer
- ? (rowOrVirtualRow)
- : undefined,
+ virtualRow: rowVirtualizer ? rowOrVirtualRow : undefined,
};
const key = `${row.id}-${row.index}`;
- return memoMode === 'rows' ? (
+ return memoMode === "rows" ? (
) : (
@@ -169,39 +155,37 @@ const DataTable_TableBody = ({
))}
- {!rowPinningDisplayMode?.includes('sticky') &&
- getIsSomeRowsPinned('bottom') && (
- ({
- bottom: tableFooterHeight - 1,
- display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
- position: 'sticky',
- zIndex: 1,
- ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme)),
- })}
- >
- {getBottomRows().map((row, staticRowIndex) => {
- const props = {
- ...commonRowProps,
- row,
- staticRowIndex,
- };
- return memoMode === 'rows' ? (
-
- ) : (
-
- );
- })}
-
- )}
+ {!rowPinningDisplayMode?.includes("sticky") && getIsSomeRowsPinned("bottom") && (
+ ({
+ bottom: tableFooterHeight - 1,
+ display: layoutMode?.startsWith("grid") ? "grid" : undefined,
+ position: "sticky",
+ zIndex: 1,
+ ...parseFromValuesOrFunc(tableBodyProps?.sx, theme),
+ })}
+ >
+ {getBottomRows().map((row, staticRowIndex) => {
+ const props = {
+ ...commonRowProps,
+ row,
+ staticRowIndex,
+ };
+ return memoMode === "rows" ? (
+
+ ) : (
+
+ );
+ })}
+
+ )}
);
-
-}
-export default DataTable_TableBody
+};
+export default DataTable_TableBody;
export const Memo_DataTable_TableBody = memo(
DataTable_TableBody,
- (prev, next) => prev.table.options.data === next.table.options.data,
-);
\ No newline at end of file
+ (prev, next) => prev.table.options.data === next.table.options.data
+);
diff --git a/src/core/components/DataTable/body/TableBodyCell.js b/src/core/components/DataTable/body/TableBodyCell.js
index 9ef022d..4c1804b 100644
--- a/src/core/components/DataTable/body/TableBodyCell.js
+++ b/src/core/components/DataTable/body/TableBodyCell.js
@@ -7,15 +7,7 @@ const { useState, useEffect, useMemo, memo } = require("react");
const { default: DataTable_CopyButton } = require("../buttons/CopyButton");
const { default: DataTable_TableBodyCellValue } = require("./TableBodyCellValue");
-const DataTable_TableBodyCell = ({
- cell,
- numRows,
- rowRef,
- staticColumnIndex,
- staticRowIndex,
- table,
- ...rest
-}) => {
+const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table, ...rest }) => {
const theme = useTheme();
const {
getState,
@@ -73,9 +65,7 @@ const DataTable_TableBodyCell = ({
if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;
const size = column.getSize();
setSkeletonWidth(
- columnDefType === 'display'
- ? size / 2
- : Math.round(Math.random() * (size - size / 3) + size / 3),
+ columnDefType === "display" ? size / 2 : Math.round(Math.random() * (size - size / 3) + size / 3)
);
}, [isLoading, showSkeletons]);
@@ -88,77 +78,55 @@ const DataTable_TableBodyCell = ({
const isLastColumn = column.getIsLastColumn();
const isLastRow = numRows && staticRowIndex === numRows - 1;
const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
- const showResizeBorder =
- isResizingColumn && columnResizeMode === 'onChange';
+ const showResizeBorder = isResizingColumn && columnResizeMode === "onChange";
const borderStyle = showResizeBorder
? `2px solid ${draggingBorderColor} !important`
: isDraggingColumn || isDraggingRow
- ? `1px dashed ${theme.palette.grey[500]} !important`
- : isHoveredColumn || isHoveredRow || isResizingColumn
- ? `2px dashed ${draggingBorderColor} !important`
- : undefined;
+ ? `1px dashed ${theme.palette.grey[500]} !important`
+ : isHoveredColumn || isHoveredRow || isResizingColumn
+ ? `2px dashed ${draggingBorderColor} !important`
+ : undefined;
if (showResizeBorder) {
- return columnResizeDirection === 'ltr'
- ? { borderRight: borderStyle }
- : { borderLeft: borderStyle };
+ return columnResizeDirection === "ltr" ? { borderRight: borderStyle } : { borderLeft: borderStyle };
}
return borderStyle
? {
- borderBottom:
- isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn)
- ? borderStyle
- : undefined,
- borderLeft:
- isDraggingColumn ||
- isHoveredColumn ||
- ((isDraggingRow || isHoveredRow) && isFirstColumn)
- ? borderStyle
- : undefined,
- borderRight:
- isDraggingColumn ||
- isHoveredColumn ||
- ((isDraggingRow || isHoveredRow) && isLastColumn)
- ? borderStyle
- : undefined,
- borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
- }
+ borderBottom:
+ isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn) ? borderStyle : undefined,
+ borderLeft:
+ isDraggingColumn || isHoveredColumn || ((isDraggingRow || isHoveredRow) && isFirstColumn)
+ ? borderStyle
+ : undefined,
+ borderRight:
+ isDraggingColumn || isHoveredColumn || ((isDraggingRow || isHoveredRow) && isLastColumn)
+ ? borderStyle
+ : undefined,
+ borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
+ }
: undefined;
- }, [
- columnSizingInfo.isResizingColumn,
- draggingColumn,
- draggingRow,
- hoveredColumn,
- hoveredRow,
- staticRowIndex,
- ]);
+ }, [columnSizingInfo.isResizingColumn, draggingColumn, draggingRow, hoveredColumn, hoveredRow, staticRowIndex]);
- const isColumnPinned =
- enableColumnPinning &&
- columnDef.columnDefType !== 'group' &&
- column.getIsPinned();
+ const isColumnPinned = enableColumnPinning && columnDef.columnDefType !== "group" && column.getIsPinned();
const isEditable = isCellEditable({ cell, table });
const isEditing =
isEditable &&
- !['custom', 'modal'].includes(editDisplayMode) &&
- (editDisplayMode === 'table' ||
- editingRow?.id === row.id ||
- editingCell?.id === cell.id) &&
+ !["custom", "modal"].includes(editDisplayMode) &&
+ (editDisplayMode === "table" || editingRow?.id === row.id || editingCell?.id === cell.id) &&
!row.getIsGrouped();
- const isCreating =
- isEditable && createDisplayMode === 'row' && creatingRow?.id === row.id;
+ const isCreating = isEditable && createDisplayMode === "row" && creatingRow?.id === row.id;
const showClickToCopyButton =
(parseFromValuesOrFunc(enableClickToCopy, cell) === true ||
parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === true) &&
- !['context-menu', false].includes(
+ !["context-menu", false].includes(
// @ts-ignore
- parseFromValuesOrFunc(columnDef.enableClickToCopy, cell),
+ parseFromValuesOrFunc(columnDef.enableClickToCopy, cell)
);
const isRightClickable = parseFromValuesOrFunc(enableCellActions, cell);
@@ -175,13 +143,11 @@ const DataTable_TableBodyCell = ({
const handleDragEnter = (e) => {
tableCellProps?.onDragEnter?.(e);
- if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
+ if (enableGrouping && hoveredColumn?.id === "drop-zone") {
setHoveredColumn(null);
}
if (enableColumnOrdering && draggingColumn) {
- setHoveredColumn(
- columnDef.enableColumnOrdering !== false ? column : null,
- );
+ setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
}
};
@@ -210,43 +176,39 @@ const DataTable_TableBodyCell = ({
onDragEnter={handleDragEnter}
onDragOver={handleDragOver}
sx={(theme) => ({
- '&:hover': {
+ "&:hover": {
outline:
actionCell?.id === cell.id ||
- (editDisplayMode === 'cell' && isEditable) ||
- (editDisplayMode === 'table' && (isCreating || isEditing))
+ (editDisplayMode === "cell" && isEditable) ||
+ (editDisplayMode === "table" && (isCreating || isEditing))
? `1px solid ${theme.palette.grey[500]}`
: undefined,
- textOverflow: 'clip',
+ textOverflow: "clip",
},
- alignItems: layoutMode?.startsWith('grid') ? 'center' : undefined,
+ alignItems: layoutMode?.startsWith("grid") ? "center" : undefined,
cursor: isRightClickable
- ? 'context-menu'
- : isEditable && editDisplayMode === 'cell'
- ? 'pointer'
- : 'inherit',
- outline:
- actionCell?.id === cell.id
- ? `1px solid ${theme.palette.grey[500]}`
- : undefined,
- outlineOffset: '-1px',
- overflow: 'hidden',
+ ? "context-menu"
+ : isEditable && editDisplayMode === "cell"
+ ? "pointer"
+ : "inherit",
+ outline: actionCell?.id === cell.id ? `1px solid ${theme.palette.grey[500]}` : undefined,
+ outlineOffset: "-1px",
+ overflow: "hidden",
p:
- density === 'compact'
- ? columnDefType === 'display'
- ? '0 0.5rem'
- : '0.5rem'
- : density === 'comfortable'
- ? columnDefType === 'display'
- ? '0.5rem 0.75rem'
- : '1rem'
- : columnDefType === 'display'
- ? '1rem 1.25rem'
- : '1.5rem',
+ density === "compact"
+ ? columnDefType === "display"
+ ? "0 0.5rem"
+ : "0.5rem"
+ : density === "comfortable"
+ ? columnDefType === "display"
+ ? "0.5rem 0.75rem"
+ : "1rem"
+ : columnDefType === "display"
+ ? "1rem 1.25rem"
+ : "1.5rem",
- textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
- whiteSpace:
- row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal',
+ textOverflow: columnDefType !== "display" ? "ellipsis" : undefined,
+ whiteSpace: row.getIsPinned() || density === "compact" ? "nowrap" : "normal",
...getCommonMRTCellStyles({
column,
table,
@@ -261,17 +223,10 @@ const DataTable_TableBodyCell = ({
{cell.getIsPlaceholder() ? (
columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
) : showSkeletons !== false && (isLoading || showSkeletons) ? (
-
- ) : columnDefType === 'display' &&
- (['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(
- column.id,
- ) ||
- !row.getIsGrouped()) ? (
+
+ ) : columnDefType === "display" &&
+ (["mrt-row-expand", "mrt-row-numbers", "mrt-row-select"].includes(column.id) ||
+ !row.getIsGrouped()) ? (
columnDef.Cell?.({
cell,
column,
@@ -289,18 +244,12 @@ const DataTable_TableBodyCell = ({
) : (
)}
- {cell.getIsGrouped() && !columnDef.GroupedCell && (
- <> ({row.subRows?.length})
- )}
+ {cell.getIsGrouped() && !columnDef.GroupedCell && <> ({row.subRows?.length})}
)}
);
-
-}
+};
export default DataTable_TableBodyCell;
-export const Memo_DataTable_TableBodyCell = memo(
- DataTable_TableBodyCell,
- (prev, next) => next.cell === prev.cell,
-);
\ No newline at end of file
+export const Memo_DataTable_TableBodyCell = memo(DataTable_TableBodyCell, (prev, next) => next.cell === prev.cell);
diff --git a/src/core/components/DataTable/body/TableBodyCellValue.js b/src/core/components/DataTable/body/TableBodyCellValue.js
index 6d4f05f..aea105f 100644
--- a/src/core/components/DataTable/body/TableBodyCellValue.js
+++ b/src/core/components/DataTable/body/TableBodyCellValue.js
@@ -2,111 +2,102 @@ import { Box } from "@mui/material";
const allowedTypes = ["string", "number"];
-const DataTable_TableBodyCellValue = ({
- cell,
- rowRef,
- staticColumnIndex,
- staticRowIndex,
- table,
-}) => {
- const {
- getState,
- options: {
- enableFilterMatchHighlighting,
- mrtTheme: { matchHighlightColor },
- },
- } = table;
- const { column, row } = cell;
- const { columnDef } = column;
- const { globalFilter, globalFilterFn } = getState();
- const filterValue = column.getFilterValue();
+const DataTable_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowIndex, table }) => {
+ const {
+ getState,
+ options: {
+ enableFilterMatchHighlighting,
+ mrtTheme: { matchHighlightColor },
+ },
+ } = table;
+ const { column, row } = cell;
+ const { columnDef } = column;
+ const { globalFilter, globalFilterFn } = getState();
+ const filterValue = column.getFilterValue();
- let renderedCellValue =
- cell.getIsAggregated() && columnDef.AggregatedCell
- ? columnDef.AggregatedCell({
- cell,
- column,
- row,
- table,
- })
- : row.getIsGrouped() && !cell.getIsGrouped()
- ? null
- : cell.getIsGrouped() && columnDef.GroupedCell
- ? columnDef.GroupedCell({
+ let renderedCellValue =
+ cell.getIsAggregated() && columnDef.AggregatedCell
+ ? columnDef.AggregatedCell({
+ cell,
+ column,
+ row,
+ table,
+ })
+ : row.getIsGrouped() && !cell.getIsGrouped()
+ ? null
+ : cell.getIsGrouped() && columnDef.GroupedCell
+ ? columnDef.GroupedCell({
+ cell,
+ column,
+ row,
+ table,
+ })
+ : undefined;
+
+ const isGroupedValue = renderedCellValue !== undefined;
+
+ if (!isGroupedValue) {
+ renderedCellValue = cell.renderValue();
+ }
+
+ if (
+ enableFilterMatchHighlighting &&
+ columnDef.enableFilterMatchHighlighting !== false &&
+ String(renderedCellValue) &&
+ allowedTypes.includes(typeof renderedCellValue) &&
+ ((filterValue &&
+ allowedTypes.includes(typeof filterValue) &&
+ ["autocomplete", "text"].includes(columnDef.filterVariant)) ||
+ (globalFilter && allowedTypes.includes(typeof globalFilter) && column.getCanGlobalFilter()))
+ ) {
+ const chunks = highlightWords?.({
+ matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== "fuzzy",
+ query: (filterValue ?? globalFilter ?? "").toString(),
+ text: renderedCellValue?.toString(),
+ });
+ if (chunks?.length > 1 || chunks?.[0]?.match) {
+ renderedCellValue = (
+
+ {chunks?.map(({ key, match, text }) => (
+
+ theme.palette.mode === "dark"
+ ? theme.palette.common.white
+ : theme.palette.common.black,
+ padding: "2px 1px",
+ }
+ : undefined
+ }
+ >
+ {text}
+
+ )) ?? renderedCellValue}
+
+ );
+ }
+ }
+
+ if (columnDef.Cell && !isGroupedValue) {
+ renderedCellValue = columnDef.Cell({
cell,
column,
+ renderedCellValue,
row,
+ rowRef,
+ staticColumnIndex,
+ staticRowIndex,
table,
- })
- : undefined;
-
- const isGroupedValue = renderedCellValue !== undefined;
-
- if (!isGroupedValue) {
- renderedCellValue = cell.renderValue();
- }
-
- if (
- enableFilterMatchHighlighting &&
- columnDef.enableFilterMatchHighlighting !== false &&
- String(renderedCellValue) &&
- allowedTypes.includes(typeof renderedCellValue) &&
- ((filterValue &&
- allowedTypes.includes(typeof filterValue) &&
- ["autocomplete", "text"].includes(columnDef.filterVariant)) ||
- (globalFilter &&
- allowedTypes.includes(typeof globalFilter) &&
- column.getCanGlobalFilter()))
- ) {
- const chunks = highlightWords?.({
- matchExactly:
- (filterValue ? columnDef._filterFn : globalFilterFn) !== "fuzzy",
- query: (filterValue ?? globalFilter ?? "").toString(),
- text: renderedCellValue?.toString(),
- });
- if (chunks?.length > 1 || chunks?.[0]?.match) {
- renderedCellValue = (
-
- {chunks?.map(({ key, match, text }) => (
-
- theme.palette.mode === "dark"
- ? theme.palette.common.white
- : theme.palette.common.black,
- padding: "2px 1px",
- }
- : undefined
- }
- >
- {text}
-
- )) ?? renderedCellValue}
-
- );
+ });
}
- }
- if (columnDef.Cell && !isGroupedValue) {
- renderedCellValue = columnDef.Cell({
- cell,
- column,
- renderedCellValue,
- row,
- rowRef,
- staticColumnIndex,
- staticRowIndex,
- table,
- });
- }
-
- return renderedCellValue;
+ return renderedCellValue;
};
export default DataTable_TableBodyCellValue;
diff --git a/src/core/components/DataTable/body/TableBodyRow.js b/src/core/components/DataTable/body/TableBodyRow.js
index e500eb0..a041d66 100644
--- a/src/core/components/DataTable/body/TableBodyRow.js
+++ b/src/core/components/DataTable/body/TableBodyRow.js
@@ -28,11 +28,7 @@ const DataTable_TableBodyRow = ({
enableStickyHeader,
layoutMode,
memoMode,
- mrtTheme: {
- baseBackgroundColor,
- pinnedRowBackgroundColor,
- selectedRowBackgroundColor,
- },
+ mrtTheme: { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor },
muiTableBodyRowProps,
renderDetailPanel,
rowPinningDisplayMode,
@@ -40,21 +36,12 @@ const DataTable_TableBodyRow = ({
refs: { tableFooterRef, tableHeadRef },
setHoveredRow,
} = table;
- const {
- density,
- draggingColumn,
- draggingRow,
- editingCell,
- editingRow,
- hoveredRow,
- isFullScreen,
- rowPinning,
- } = getState();
+ const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning } =
+ getState();
const visibleCells = row.getVisibleCells();
- const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
- columnVirtualizer ?? {};
+ const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
const isRowSelected = getIsRowSelected({ row, table });
const isRowPinned = enableRowPinning && row.getIsPinned();
@@ -71,30 +58,17 @@ const DataTable_TableBodyRow = ({
};
const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
- if (
- !enableRowPinning ||
- !rowPinningDisplayMode?.includes('sticky') ||
- !pinnedRowIds ||
- !row.getIsPinned()
- )
+ if (!enableRowPinning || !rowPinningDisplayMode?.includes("sticky") || !pinnedRowIds || !row.getIsPinned())
return [];
- return [
- [...pinnedRowIds].reverse().indexOf(row.id),
- pinnedRowIds.indexOf(row.id),
- ];
+ return [[...pinnedRowIds].reverse().indexOf(row.id), pinnedRowIds.indexOf(row.id)];
}, [pinnedRowIds, rowPinning]);
- const tableHeadHeight =
- ((enableStickyHeader || isFullScreen) &&
- tableHeadRef.current?.clientHeight) ||
- 0;
- const tableFooterHeight =
- (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
+ const tableHeadHeight = ((enableStickyHeader || isFullScreen) && tableHeadRef.current?.clientHeight) || 0;
+ const tableFooterHeight = (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
const sx = parseFromValuesOrFunc(tableRowProps?.sx, theme);
- const defaultRowHeight =
- density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69;
+ const defaultRowHeight = density === "compact" ? 37 : density === "comfortable" ? 53 : 69;
const customRowHeight =
// @ts-ignore
@@ -117,16 +91,16 @@ const DataTable_TableBodyRow = ({
const cellHighlightColor = isRowSelected
? selectedRowBackgroundColor
: isRowPinned
- ? pinnedRowBackgroundColor
- : undefined;
+ ? pinnedRowBackgroundColor
+ : undefined;
const cellHighlightColorHover =
tableRowProps?.hover !== false
? isRowSelected
? cellHighlightColor
- : theme.palette.mode === 'dark'
- ? `${lighten(baseBackgroundColor, 0.3)}`
- : `${darken(baseBackgroundColor, 0.3)}`
+ : theme.palette.mode === "dark"
+ ? `${lighten(baseBackgroundColor, 0.3)}`
+ : `${darken(baseBackgroundColor, 0.3)}`
: undefined;
return (
@@ -146,91 +120,81 @@ const DataTable_TableBodyRow = ({
selected={isRowSelected}
{...tableRowProps}
style={{
- transform: virtualRow
- ? `translateY(${virtualRow.start}px)`
- : undefined,
+ transform: virtualRow ? `translateY(${virtualRow.start}px)` : undefined,
...tableRowProps?.style,
}}
sx={(theme) => ({
- '&:hover td:after': cellHighlightColorHover
+ "&:hover td:after": cellHighlightColorHover
? {
- backgroundColor: alpha(cellHighlightColorHover, 0.3),
- ...commonCellBeforeAfterStyles,
- }
+ backgroundColor: alpha(cellHighlightColorHover, 0.3),
+ ...commonCellBeforeAfterStyles,
+ }
: undefined,
backgroundColor: `${baseBackgroundColor} !important`,
bottom:
!virtualRow && bottomPinnedIndex !== undefined && isRowPinned
- ? `${bottomPinnedIndex * rowHeight +
- (enableStickyFooter ? tableFooterHeight - 1 : 0)
- }px`
+ ? `${bottomPinnedIndex * rowHeight + (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
: undefined,
- boxSizing: 'border-box',
- display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+ boxSizing: "border-box",
+ display: layoutMode?.startsWith("grid") ? "flex" : undefined,
opacity: isRowPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1,
position: virtualRow
- ? 'absolute'
- : rowPinningDisplayMode?.includes('sticky') && isRowPinned
- ? 'sticky'
- : 'relative',
+ ? "absolute"
+ : rowPinningDisplayMode?.includes("sticky") && isRowPinned
+ ? "sticky"
+ : "relative",
td: {
...getCommonPinnedCellStyles({ table, theme }),
},
- 'td:after': cellHighlightColor
+ "td:after": cellHighlightColor
? {
- backgroundColor: cellHighlightColor,
- ...commonCellBeforeAfterStyles,
- }
+ backgroundColor: cellHighlightColor,
+ ...commonCellBeforeAfterStyles,
+ }
: undefined,
top: virtualRow
? 0
: topPinnedIndex !== undefined && isRowPinned
- ? `${topPinnedIndex * rowHeight +
- (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
+ ? `${
+ topPinnedIndex * rowHeight +
+ (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
}px`
- : undefined,
- transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
- width: '100%',
- zIndex:
- rowPinningDisplayMode?.includes('sticky') && isRowPinned ? 2 : 0,
- ...(sx),
+ : undefined,
+ transition: virtualRow ? "none" : "all 150ms ease-in-out",
+ width: "100%",
+ zIndex: rowPinningDisplayMode?.includes("sticky") && isRowPinned ? 2 : 0,
+ ...sx,
})}
>
- {virtualPaddingLeft ? (
- |
- ) : null}
- {(virtualColumns ?? visibleCells).map(
- (cellOrVirtualCell, staticColumnIndex) => {
- let cell = cellOrVirtualCell;
- if (columnVirtualizer) {
- staticColumnIndex = (cellOrVirtualCell).index;
- cell = visibleCells[staticColumnIndex];
- }
- const props = {
- cell,
- numRows,
- rowRef,
- staticColumnIndex,
- staticRowIndex,
- table,
- };
- return cell ? (
- memoMode === 'cells' &&
- cell.column.columnDef.columnDefType === 'data' &&
- !draggingColumn &&
- !draggingRow &&
- editingCell?.id !== cell.id &&
- editingRow?.id !== row.id ? (
-
- ) : (
-
- )
- ) : null;
- },
- )}
- {virtualPaddingRight ? (
- |
- ) : null}
+ {virtualPaddingLeft ? | : null}
+ {(virtualColumns ?? visibleCells).map((cellOrVirtualCell, staticColumnIndex) => {
+ let cell = cellOrVirtualCell;
+ if (columnVirtualizer) {
+ staticColumnIndex = cellOrVirtualCell.index;
+ cell = visibleCells[staticColumnIndex];
+ }
+ const props = {
+ cell,
+ numRows,
+ rowRef,
+ staticColumnIndex,
+ staticRowIndex,
+ table,
+ };
+ return cell ? (
+ memoMode === "cells" &&
+ cell.column.columnDef.columnDefType === "data" &&
+ !draggingColumn &&
+ !draggingRow &&
+ editingCell?.id !== cell.id &&
+ editingRow?.id !== row.id ? (
+
+ ) : (
+
+ )
+ ) : null;
+ })}
+ {virtualPaddingRight ? | : null}
{renderDetailPanel && !row.getIsGrouped() && (
);
-}
-export default DataTable_TableBodyRow
+};
+export default DataTable_TableBodyRow;
export const Memo_DataTable_TableBodyRow = memo(
DataTable_TableBodyRow,
- (prev, next) =>
- prev.row === next.row && prev.staticRowIndex === next.staticRowIndex,
-);
\ No newline at end of file
+ (prev, next) => prev.row === next.row && prev.staticRowIndex === next.staticRowIndex
+);
diff --git a/src/core/components/DataTable/body/TableDetailPanel.js b/src/core/components/DataTable/body/TableDetailPanel.js
index 0c9f8a9..853aab5 100644
--- a/src/core/components/DataTable/body/TableDetailPanel.js
+++ b/src/core/components/DataTable/body/TableDetailPanel.js
@@ -23,7 +23,6 @@ const DataTable_TableDetailPanel = ({
} = table;
const { isLoading } = getState();
-
const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
isDetailPanel: true,
row,
@@ -52,16 +51,12 @@ const DataTable_TableDetailPanel = ({
}}
{...tableRowProps}
sx={(theme) => ({
- display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
- position: virtualRow ? 'absolute' : undefined,
- top: virtualRow
- ? `${parentRowRef.current?.getBoundingClientRect()?.height}px`
- : undefined,
- transform: virtualRow
- ? `translateY(${virtualRow?.start}px)`
- : undefined,
- width: '100%',
- ...(parseFromValuesOrFunc(tableRowProps?.sx, theme)),
+ display: layoutMode?.startsWith("grid") ? "flex" : undefined,
+ position: virtualRow ? "absolute" : undefined,
+ top: virtualRow ? `${parentRowRef.current?.getBoundingClientRect()?.height}px` : undefined,
+ transform: virtualRow ? `translateY(${virtualRow?.start}px)` : undefined,
+ width: "100%",
+ ...parseFromValuesOrFunc(tableRowProps?.sx, theme),
})}
>
({
backgroundColor: virtualRow ? baseBackgroundColor : undefined,
- borderBottom: !row.getIsExpanded() ? 'none' : undefined,
- display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
- py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0,
- transition: !virtualRow ? 'all 150ms ease-in-out' : undefined,
+ borderBottom: !row.getIsExpanded() ? "none" : undefined,
+ display: layoutMode?.startsWith("grid") ? "flex" : undefined,
+ py: !!DetailPanel && row.getIsExpanded() ? "1rem" : 0,
+ transition: !virtualRow ? "all 150ms ease-in-out" : undefined,
width: `100%`,
- ...(parseFromValuesOrFunc(tableCellProps?.sx, theme)),
+ ...parseFromValuesOrFunc(tableCellProps?.sx, theme),
})}
>
{virtualRow ? (
@@ -88,6 +83,5 @@ const DataTable_TableDetailPanel = ({
);
-
-}
-export default DataTable_TableDetailPanel
\ No newline at end of file
+};
+export default DataTable_TableDetailPanel;
diff --git a/src/core/components/DataTable/buttons/CopyButton.js b/src/core/components/DataTable/buttons/CopyButton.js
index c8878e0..c4dfe4b 100644
--- a/src/core/components/DataTable/buttons/CopyButton.js
+++ b/src/core/components/DataTable/buttons/CopyButton.js
@@ -2,11 +2,7 @@ import { getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils
import { Button, Tooltip } from "@mui/material";
import { useState } from "react";
-const DataTable_CopyButton = ({
- cell,
- table,
- ...rest
-}) => {
+const DataTable_CopyButton = ({ cell, table, ...rest }) => {
const {
options: { localization, muiCopyButtonProps },
} = table;
@@ -40,11 +36,8 @@ const DataTable_CopyButton = ({
return (
);
-}
-export default DataTable_CopyButton
\ No newline at end of file
+};
+export default DataTable_CopyButton;
diff --git a/src/core/components/DataTable/buttons/GrabHandleButton.js b/src/core/components/DataTable/buttons/GrabHandleButton.js
index 5619abb..2071eed 100644
--- a/src/core/components/DataTable/buttons/GrabHandleButton.js
+++ b/src/core/components/DataTable/buttons/GrabHandleButton.js
@@ -1,11 +1,7 @@
import { getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils";
import { IconButton, Tooltip } from "@mui/material";
-const DataTable_GrabHandleButton = ({
- location,
- table,
- ...rest
-}) => {
+const DataTable_GrabHandleButton = ({ location, table, ...rest }) => {
const {
options: {
icons: { DragHandleIcon },
@@ -14,10 +10,7 @@ const DataTable_GrabHandleButton = ({
} = table;
return (
-
+
({
- '&:active': {
- cursor: 'grabbing',
+ "&:active": {
+ cursor: "grabbing",
},
- '&:hover': {
- backgroundColor: 'transparent',
+ "&: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)),
+ 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}
>
@@ -49,6 +42,5 @@ const DataTable_GrabHandleButton = ({
);
-
-}
-export default DataTable_GrabHandleButton
\ No newline at end of file
+};
+export default DataTable_GrabHandleButton;
diff --git a/src/core/components/DataTable/buttons/ShowHideColumnsButton.js b/src/core/components/DataTable/buttons/ShowHideColumnsButton.js
index d46281e..cd6c8ac 100644
--- a/src/core/components/DataTable/buttons/ShowHideColumnsButton.js
+++ b/src/core/components/DataTable/buttons/ShowHideColumnsButton.js
@@ -19,23 +19,12 @@ const DataTable_ShowHideColumnsButton = ({ table, ...rest }) => {
return (
<>
-
+
- {anchorEl && (
-
- )}
+ {anchorEl && }
);
-}
-export default DataTable_ShowHideColumnsButton
\ No newline at end of file
+};
+export default DataTable_ShowHideColumnsButton;
diff --git a/src/core/components/DataTable/buttons/ToggleFiltersButton.js b/src/core/components/DataTable/buttons/ToggleFiltersButton.js
index 9885183..6298223 100644
--- a/src/core/components/DataTable/buttons/ToggleFiltersButton.js
+++ b/src/core/components/DataTable/buttons/ToggleFiltersButton.js
@@ -1,4 +1,4 @@
const DataTable_ToggleFiltersButton = ({ table, ...rest }) => {
- return <>
-}
-export default DataTable_ToggleFiltersButton
\ No newline at end of file
+ return <>;
+};
+export default DataTable_ToggleFiltersButton;
diff --git a/src/core/components/DataTable/filter/FilterBody.jsx b/src/core/components/DataTable/filter/FilterBody.jsx
index df0509b..1f8513c 100644
--- a/src/core/components/DataTable/filter/FilterBody.jsx
+++ b/src/core/components/DataTable/filter/FilterBody.jsx
@@ -1,70 +1,41 @@
-'use client'
+"use client";
-import {Box, Button, Drawer, styled} from "@mui/material";
-import {Form, Formik} from "formik";
+import { Box, Button, Drawer, styled } from "@mui/material";
+import { Form, Formik } from "formik";
import useTableSetting from "@/lib/hooks/useTableSetting";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
import FilterHeader from "@/core/components/DataTable/filter/FilterHeader";
import * as Yup from "yup";
import FilterBodyField from "@/core/components/DataTable/filter/FilterBodyField";
-import {toast} from "react-toastify";
import useDataTable from "@/lib/hooks/useDataTable";
const ScrollBox = styled(Box)({
flexGrow: 1,
- overflowY: 'scroll',
+ overflowY: "scroll",
maxWidth: "450px",
- '::-webkit-scrollbar': {
- width: '5px',
+ "::-webkit-scrollbar": {
+ width: "5px",
},
- '::-webkit-scrollbar-track': {
- boxShadow: 'inset 0 0 5px #fff',
- borderRadius: '5px',
+ "::-webkit-scrollbar-track": {
+ boxShadow: "inset 0 0 5px #fff",
+ borderRadius: "5px",
+ },
+ "::-webkit-scrollbar-thumb": {
+ background: "#155175",
+ borderRadius: "0px",
},
- '::-webkit-scrollbar-thumb': {
- background: '#155175',
- borderRadius: '0px',
- }
});
-function FilterBody({columns, drawerState, setDrawerState, user_id, page_name, table_name}) {
- const {settingStore} = useTableSetting();
+function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name, table_name }) {
+ const { settingStore } = useTableSetting();
const [initialValues, setInitialValues] = useState({});
const [validationSchema, setValidationSchema] = useState({});
- const {filterData, setFilterData} = useDataTable();
+ const { filterData, setFilterData } = useDataTable();
useEffect(() => {
- const values = columns.reduce((acc, column) => {
- if (!column.enableColumnFilter) return acc;
- const filter = settingStore?.[user_id]?.[page_name]?.[table_name]?.['filters']?.find((filter) => filter.id === column.id);
- if (column.datatype === 'array') {
- acc[column.id] = {
- id: column.id,
- value: filter?.value || [],
- filterFn: filter?.fn || column._filterFn,
- datatype: column.datatype
- };
- } else if (column._filterFn === "between") {
- acc[column.id] = {
- id: column.id,
- value: filter?.value || ["", ""],
- filterFn: filter?.fn || column._filterFn,
- datatype: column.datatype
- };
- } else {
- acc[column.id] = {
- id: column.id,
- value: filter?.value || '',
- filterFn: filter?.fn || column._filterFn,
- datatype: column.datatype
- };
- }
- return acc;
- }, {});
- setInitialValues(Object.keys(filterData).length !== 0 ? filterData : values);
+ setInitialValues(filterData);
}, [columns, settingStore, user_id, page_name, table_name, filterData]);
-
useEffect(() => {
const generatedSchema = Yup.object().shape(
Object.keys(initialValues).reduce((acc, key) => {
@@ -76,7 +47,10 @@ function FilterBody({columns, drawerState, setDrawerState, user_id, page_name, t
.test({
test(value, ctx) {
const [start, end] = value || ["", ""];
- if (initialValue.datatype === "numeric" && parseInt(end, 10) <= parseInt(start, 10)) {
+ if (
+ initialValue.datatype === "numeric" &&
+ parseInt(end, 10) <= parseInt(start, 10)
+ ) {
return ctx.createError({
message: `مقدار وارده باید بیشتر از (${start}) باشد`,
});
@@ -97,81 +71,81 @@ function FilterBody({columns, drawerState, setDrawerState, user_id, page_name, t
setValidationSchema(generatedSchema);
}, [initialValues]);
-
- const handleSubmit = (values, {setSubmitting}) => {
- toast.dismiss({containerId: "datatable", id: "filter"});
+ const handleSubmit = (values, { setSubmitting }) => {
setDrawerState(false);
- setFilterData(values)
+ setFilterData(values);
setSubmitting(false);
};
return (
- setDrawerState(false)}
- sx={{overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%"}}>
-
+ setDrawerState(false)}
+ sx={{ overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%" }}
+ >
+
{Object.keys(initialValues).length > 0 && (
-
- {
- ({
- values,
- handleChange,
- handleBlur,
- setFieldValue,
- errors,
- touched,
- isSubmitting,
- isValid,
- dirty,
- resetForm
- }) => (
-
- )}
+
+ {({
+ values,
+ handleChange,
+ handleBlur,
+ setFieldValue,
+ errors,
+ touched,
+ isSubmitting,
+ isValid,
+ dirty,
+ resetForm,
+ }) => (
+
+ )}
)}
@@ -179,4 +153,4 @@ function FilterBody({columns, drawerState, setDrawerState, user_id, page_name, t
);
}
-export default FilterBody;
\ No newline at end of file
+export default FilterBody;
diff --git a/src/core/components/DataTable/filter/FilterBodyField.jsx b/src/core/components/DataTable/filter/FilterBodyField.jsx
index b12e770..a9bef12 100644
--- a/src/core/components/DataTable/filter/FilterBodyField.jsx
+++ b/src/core/components/DataTable/filter/FilterBodyField.jsx
@@ -1,4 +1,4 @@
-import {useState} from "react";
+import { useState } from "react";
import FilterOptionList from "@/core/components/DataTable/filter/FilterOptionList";
import CustomSelect from "@/core/components/DataTable/filter/fieldsType/CustomSelect";
import CustomTextField from "@/core/components/DataTable/filter/fieldsType/CustomTextField";
@@ -14,19 +14,19 @@ const columnFilterModeOptionFa = {
lessThan: "کوچکتر",
greaterThan: "بزرگتر",
fuzzy: "فازی",
- between: "مابین"
+ between: "مابین",
};
function FilterBodyField({
- column,
- filterParameters,
- handleChange,
- handleBlur,
- setFieldValue,
- errors,
- touched,
- resetForm
- }) {
+ column,
+ filterParameters,
+ handleChange,
+ handleBlur,
+ setFieldValue,
+ errors,
+ touched,
+ resetForm,
+}) {
const [anchorEl, setAnchorEl] = useState(null);
const defaultFilterTranslation = columnFilterModeOptionFa[filterParameters.filterFn] || filterParameters.filterFn;
@@ -47,7 +47,9 @@ function FilterBodyField({
errors={errors}
touched={touched}
/>
- ) : filterParameters.datatype === "numeric" && filterParameters.filterFn === "equals" && Array.isArray(column.columnSelectOption) ? (
+ ) : filterParameters.datatype === "numeric" &&
+ filterParameters.filterFn === "equals" &&
+ Array.isArray(column.columnSelectOption) ? (
- {
- setDrawerState(!drawerState)
- }} aria-label="filter table">
-
+ {
+ setDrawerState(!drawerState);
+ }}
+ aria-label="filter table"
+ >
+
);
diff --git a/src/core/components/DataTable/filter/FilterHeader.jsx b/src/core/components/DataTable/filter/FilterHeader.jsx
index 2acd0b7..76980ce 100644
--- a/src/core/components/DataTable/filter/FilterHeader.jsx
+++ b/src/core/components/DataTable/filter/FilterHeader.jsx
@@ -1,10 +1,10 @@
-'use client'
+"use client";
-import {Box, IconButton, Typography} from "@mui/material";
-import CancelIcon from '@mui/icons-material/Cancel';
-import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import { Box, IconButton, Typography } from "@mui/material";
+import CancelIcon from "@mui/icons-material/Cancel";
+import FilterAltIcon from "@mui/icons-material/FilterAlt";
-function FilterHeader({setDrawerState}) {
+function FilterHeader({ setDrawerState }) {
return (
-
-
- فیلتر
+
+
+
+ فیلتر
+
- setDrawerState(false)}>
-
+ setDrawerState(false)}>
+
);
}
-export default FilterHeader;
\ No newline at end of file
+export default FilterHeader;
diff --git a/src/core/components/DataTable/filter/FilterOptionList.jsx b/src/core/components/DataTable/filter/FilterOptionList.jsx
index ce02c23..86a4745 100644
--- a/src/core/components/DataTable/filter/FilterOptionList.jsx
+++ b/src/core/components/DataTable/filter/FilterOptionList.jsx
@@ -1,17 +1,17 @@
-'use client'
+"use client";
-import {ListItem, Menu} from "@mui/material";
-import {useState} from "react";
+import { ListItem, Menu } from "@mui/material";
+import { useState } from "react";
function FilterOptionList({
- column,
- filterType,
- filterOption,
- anchorEl,
- columnFilterModeOptionFa,
- setAnchorEl,
- setFieldValue
- }) {
+ column,
+ filterType,
+ filterOption,
+ anchorEl,
+ columnFilterModeOptionFa,
+ setAnchorEl,
+ setFieldValue,
+}) {
const [selectedFilter, setSelectedFilter] = useState(filterType);
const handleChangeItem = (event, index) => {
@@ -19,25 +19,21 @@ function FilterOptionList({
setFieldValue(`${column.id}.filterFn`, filterOption[index]);
setSelectedFilter(filterOption[index]);
setAnchorEl(null);
- }
+ };
const handleCloseFilterBox = () => {
setAnchorEl(null);
};
return (
- }
+ helperText={
+
+ نوع فیلتر: {defaultFilterTranslation}
+
+ }
variant="outlined"
size="normal"
- sx={{marginY: 1}}
+ sx={{ marginY: 1 }}
InputProps={{
endAdornment: (
-
-
+
+
),
}}
@@ -36,4 +37,4 @@ function CustomTextField({
);
}
-export default CustomTextField;
\ No newline at end of file
+export default CustomTextField;
diff --git a/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx b/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
index 35c9358..fea4169 100644
--- a/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
@@ -1,18 +1,18 @@
-import {Box, InputAdornment, TextField, Typography} from "@mui/material";
-import FilterListIcon from '@mui/icons-material/FilterList';
+import { Box, InputAdornment, TextField, Typography } from "@mui/material";
+import FilterListIcon from "@mui/icons-material/FilterList";
function CustomTextFieldRange({
- column,
- filterParameters,
- defaultFilterTranslation,
- handleOpenFilterBox,
- handleChange,
- handleBlur,
- errors,
- touched
- }) {
+ column,
+ filterParameters,
+ defaultFilterTranslation,
+ handleOpenFilterBox,
+ handleChange,
+ handleBlur,
+ errors,
+ touched,
+}) {
return (
-
+
نوع
- فیلتر: {defaultFilterTranslation}}
+ helperText={
+
+ نوع فیلتر: {defaultFilterTranslation}
+
+ }
variant="outlined"
size="normal"
- sx={{marginY: 1, marginRight: 1}}
+ sx={{ marginY: 1, marginRight: 1 }}
/>
-
+
+
),
}}
@@ -53,4 +56,4 @@ function CustomTextFieldRange({
);
}
-export default CustomTextFieldRange;
\ No newline at end of file
+export default CustomTextFieldRange;
diff --git a/src/core/components/DataTable/filter/index.jsx b/src/core/components/DataTable/filter/index.jsx
index 65a93d2..8d26594 100644
--- a/src/core/components/DataTable/filter/index.jsx
+++ b/src/core/components/DataTable/filter/index.jsx
@@ -1,17 +1,23 @@
-'use client'
+"use client";
-import {useState} from "react";
+import { useState } from "react";
import FilterButton from "@/core/components/DataTable/filter/FilterButton";
import FilterBody from "@/core/components/DataTable/filter/FilterBody";
-function FilterColumn({columns, user_id, page_name, table_name}) {
+function FilterColumn({ columns, user_id, page_name, table_name }) {
const [open, setOpen] = useState(false);
return (
<>
-
-
+
+
);
}
diff --git a/src/core/components/DataTable/head/TableHead.js b/src/core/components/DataTable/head/TableHead.js
index 5e5dd99..39ee214 100644
--- a/src/core/components/DataTable/head/TableHead.js
+++ b/src/core/components/DataTable/head/TableHead.js
@@ -1,26 +1,17 @@
-import {parseFromValuesOrFunc} from "@/core/utils/utils";
-import {TableHead} from "@mui/material";
+import { parseFromValuesOrFunc } from "@/core/utils/utils";
+import { TableHead } from "@mui/material";
import DataTable_TableHeadRow from "./TableHeadRow";
-const DataTable_TableHead = ({
- columnVirtualizer,
- table,
- ...rest
- }) => {
+const DataTable_TableHead = ({ columnVirtualizer, table, ...rest }) => {
const {
getState,
- options: {
- enableStickyHeader,
- layoutMode,
- muiTableHeadProps,
- positionToolbarAlertBanner,
- },
- refs: {tableHeadRef},
+ options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner },
+ refs: { tableHeadRef },
} = table;
- const {isFullScreen, showAlertBanner} = getState();
+ const { isFullScreen, showAlertBanner } = getState();
const tableHeadProps = {
- ...parseFromValuesOrFunc(muiTableHeadProps, {table}),
+ ...parseFromValuesOrFunc(muiTableHeadProps, { table }),
...rest,
};
@@ -37,28 +28,24 @@ const DataTable_TableHead = ({
}
}}
sx={(theme) => ({
- display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+ display: layoutMode?.startsWith("grid") ? "grid" : undefined,
opacity: 0.97,
- position: stickyHeader ? 'sticky' : 'relative',
- top: stickyHeader && layoutMode?.startsWith('grid') ? 0 : undefined,
+ position: stickyHeader ? "sticky" : "relative",
+ top: stickyHeader && layoutMode?.startsWith("grid") ? 0 : undefined,
zIndex: stickyHeader ? 2 : undefined,
- ...(parseFromValuesOrFunc(tableHeadProps?.sx, theme)),
+ ...parseFromValuesOrFunc(tableHeadProps?.sx, theme),
})}
>
- {table
- .getHeaderGroups()
- .map((headerGroup, index) => (
-
- ))
- }
+ {table.getHeaderGroups().map((headerGroup, index) => (
+
+ ))}
);
-
-}
-export default DataTable_TableHead
\ No newline at end of file
+};
+export default DataTable_TableHead;
diff --git a/src/core/components/DataTable/head/TableHeadCell.js b/src/core/components/DataTable/head/TableHeadCell.js
index 6248d63..a0b8fc5 100644
--- a/src/core/components/DataTable/head/TableHeadCell.js
+++ b/src/core/components/DataTable/head/TableHeadCell.js
@@ -1,16 +1,10 @@
-import {getCommonMRTCellStyles, parseFromValuesOrFunc} from "@/core/utils/utils";
-import {useTheme} from "@emotion/react";
-import {Box, TableCell} from "@mui/material";
-import {MRT_TableHeadCellSortLabel} from "material-react-table";
-import {useMemo} from "react";
+import { getCommonMRTCellStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
+import { useTheme } from "@emotion/react";
+import { Box, TableCell } from "@mui/material";
+import { MRT_TableHeadCellSortLabel } from "material-react-table";
+import { useMemo } from "react";
-const DataTable_TableHeadCell = ({
- columnVirtualizer,
- header,
- staticColumnIndex,
- table,
- ...rest
- }) => {
+const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table, ...rest }) => {
const theme = useTheme();
const {
getState,
@@ -24,26 +18,19 @@ const DataTable_TableHeadCell = ({
enableGrouping,
enableMultiSort,
layoutMode,
- mrtTheme: {draggingBorderColor},
+ mrtTheme: { draggingBorderColor },
muiTableHeadCellProps,
},
- refs: {tableHeadCellRefs},
+ refs: { tableHeadCellRefs },
setHoveredColumn,
} = table;
- const {
- columnSizingInfo,
- density,
- draggingColumn,
- grouping,
- hoveredColumn,
- showColumnFilters,
- } = getState();
- const {column} = header;
- const {columnDef} = column;
- const {columnDefType} = columnDef;
+ const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters } = getState();
+ const { column } = header;
+ const { columnDef } = column;
+ const { columnDefType } = columnDef;
const tableCellProps = {
- ...parseFromValuesOrFunc(muiTableHeadCellProps, {column, table}),
+ ...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }),
...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
column,
table,
@@ -51,23 +38,17 @@ const DataTable_TableHeadCell = ({
...rest,
};
- const isColumnPinned =
- enableColumnPinning &&
- columnDef.columnDefType !== 'group' &&
- column.getIsPinned();
+ const isColumnPinned = enableColumnPinning && columnDef.columnDefType !== "group" && column.getIsPinned();
const showColumnActions =
- (enableColumnActions || columnDef.enableColumnActions) &&
- columnDef.enableColumnActions !== false;
+ (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false;
const showDragHandle =
enableColumnDragging !== false &&
columnDef.enableColumnDragging !== false &&
(enableColumnDragging ||
(enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
- (enableGrouping &&
- columnDef.enableGrouping !== false &&
- !grouping.includes(column.id)));
+ (enableGrouping && columnDef.enableGrouping !== false && !grouping.includes(column.id)));
const headerPL = useMemo(() => {
let pl = 0;
@@ -80,41 +61,37 @@ const DataTable_TableHeadCell = ({
const draggingBorders = useMemo(() => {
const showResizeBorder =
columnSizingInfo.isResizingColumn === column.id &&
- columnResizeMode === 'onChange' &&
+ columnResizeMode === "onChange" &&
!header.subHeaders.length;
const borderStyle = showResizeBorder
? `2px solid ${draggingBorderColor} !important`
: draggingColumn?.id === column.id
- ? `1px dashed ${theme.palette.grey[500]}`
- : hoveredColumn?.id === column.id
- ? `2px dashed ${draggingBorderColor}`
- : undefined;
+ ? `1px dashed ${theme.palette.grey[500]}`
+ : hoveredColumn?.id === column.id
+ ? `2px dashed ${draggingBorderColor}`
+ : undefined;
if (showResizeBorder) {
- return columnResizeDirection === 'ltr'
- ? {borderRight: borderStyle}
- : {borderLeft: borderStyle};
+ return columnResizeDirection === "ltr" ? { borderRight: borderStyle } : { borderLeft: borderStyle };
}
const draggingBorders = borderStyle
? {
- borderLeft: borderStyle,
- borderRight: borderStyle,
- borderTop: borderStyle,
- }
+ borderLeft: borderStyle,
+ borderRight: borderStyle,
+ borderTop: borderStyle,
+ }
: undefined;
return draggingBorders;
}, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
const handleDragEnter = (_e) => {
- if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
+ if (enableGrouping && hoveredColumn?.id === "drop-zone") {
setHoveredColumn(null);
}
- if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
- setHoveredColumn(
- columnDef.enableColumnOrdering !== false ? column : null,
- );
+ if (enableColumnOrdering && draggingColumn && columnDefType !== "group") {
+ setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
}
};
@@ -124,7 +101,6 @@ const DataTable_TableHeadCell = ({
}
};
-
const HeaderElement =
parseFromValuesOrFunc(columnDef.Header, {
column,
@@ -132,12 +108,9 @@ const DataTable_TableHeadCell = ({
table,
}) ?? columnDef.header;
-
const columnRelativeDepth = header.depth - column.depth;
- if (
- columnRelativeDepth > 1
- ) {
+ if (columnRelativeDepth > 1) {
return null;
}
@@ -149,13 +122,7 @@ const DataTable_TableHeadCell = ({
return (
{
if (node) {
tableHeadCellRefs.current[column.id] = node;
- if (columnDefType !== 'group') {
+ if (columnDefType !== "group") {
columnVirtualizer?.measureElement?.(node);
}
}
}}
{...tableCellProps}
sx={(theme) => ({
- '& :hover': {
- '.MuiButtonBase-root': {
- opacity: 1,
- },
+ "& :hover": {
+ ".MuiButtonBase-root": {
+ opacity: 1,
},
- flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined,
- fontWeight: 'bold',
- overflow: 'visible',
- p:
- density === 'compact'
- ? '0.5rem'
- : density === 'comfortable'
- ? columnDefType === 'display'
- ? '0.75rem'
- : '1rem'
- : columnDefType === 'display'
- ? '1rem 1.25rem'
- : '1.5rem',
- pb:
- columnDefType === 'display'
- ? 0
- : showColumnFilters || density === 'compact'
- ? '0.4rem'
- : '0.6rem',
- pt:
- columnDefType === 'group' || density === 'compact'
- ? '0.25rem'
- : density === 'comfortable'
- ? '.75rem'
- : '1.25rem',
- userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
- verticalAlign: 'middle',
- ...getCommonMRTCellStyles({
- column,
- header,
- table,
- tableCellProps,
- theme,
- }),
- ...draggingBorders,
- }
- )}
+ },
+ flexDirection: layoutMode?.startsWith("grid") ? "column" : undefined,
+ fontWeight: "bold",
+ overflow: "visible",
+ p:
+ density === "compact"
+ ? "0.5rem"
+ : density === "comfortable"
+ ? columnDefType === "display"
+ ? "0.75rem"
+ : "1rem"
+ : columnDefType === "display"
+ ? "1rem 1.25rem"
+ : "1.5rem",
+ pb: columnDefType === "display" ? 0 : showColumnFilters || density === "compact" ? "0.4rem" : "0.6rem",
+ pt:
+ columnDefType === "group" || density === "compact"
+ ? "0.25rem"
+ : density === "comfortable"
+ ? ".75rem"
+ : "1.25rem",
+ userSelect: enableMultiSort && column.getCanSort() ? "none" : undefined,
+ verticalAlign: "middle",
+ ...getCommonMRTCellStyles({
+ column,
+ header,
+ table,
+ tableCellProps,
+ theme,
+ }),
+ ...draggingBorders,
+ })}
>
{tableCellProps.children ?? (
{HeaderElement}
- {(column.getCanSort() && columnDefType !== 'group') && (
-
+ {column.getCanSort() && columnDefType !== "group" && (
+
)}
)}
);
-
-}
-export default DataTable_TableHeadCell;
\ No newline at end of file
+};
+export default DataTable_TableHeadCell;
diff --git a/src/core/components/DataTable/head/TableHeadRow.js b/src/core/components/DataTable/head/TableHeadRow.js
index 33a23e2..512147a 100644
--- a/src/core/components/DataTable/head/TableHeadRow.js
+++ b/src/core/components/DataTable/head/TableHeadRow.js
@@ -1,25 +1,20 @@
-import {parseFromValuesOrFunc} from "@/core/utils/utils";
-import {TableRow} from "@mui/material";
+import { parseFromValuesOrFunc } from "@/core/utils/utils";
+import { TableRow } from "@mui/material";
import DataTable_TableHeadCell from "./TableHeadCell";
const DataTable_TableHeadRow = ({
- columnVirtualizer,
- headerGroup,
- table,
- index, // Add index prop
- ...rest
- }) => {
+ columnVirtualizer,
+ headerGroup,
+ table,
+ index, // Add index prop
+ ...rest
+}) => {
const {
- options: {
- enableStickyHeader,
- layoutMode,
- muiTableHeadRowProps,
- },
+ options: { enableStickyHeader, layoutMode, muiTableHeadRowProps },
} = table;
- const {virtualColumns, virtualPaddingLeft, virtualPaddingRight} =
- columnVirtualizer ?? {};
+ const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
- const backgroundColor = index % 2 === 0 ? '#015688' : '#ff5c0f';
+ const backgroundColor = index % 2 === 0 ? "#015688" : "#ff5c0f";
const tableRowProps = {
...parseFromValuesOrFunc(muiTableHeadRowProps, {
@@ -27,20 +22,23 @@ const DataTable_TableHeadRow = ({
table,
}),
...rest,
- sx: (theme) => ({ // Access theme from the sx function
+ sx: (theme) => ({
+ // Access theme from the sx function
...(parseFromValuesOrFunc(muiTableHeadRowProps?.sx, theme) || {}),
backgroundColor, // Apply background color
- display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
- position: enableStickyHeader && layoutMode === 'semantic' ? 'sticky' : 'relative',
+ display: layoutMode?.startsWith("grid") ? "flex" : undefined,
+ position: enableStickyHeader && layoutMode === "semantic" ? "sticky" : "relative",
top: 0,
}),
};
return (
- {virtualPaddingLeft && | }
+ {virtualPaddingLeft && | }
{(virtualColumns ?? headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
- const header = columnVirtualizer ? headerGroup.headers[headerOrVirtualHeader.index] : headerOrVirtualHeader;
+ const header = columnVirtualizer
+ ? headerGroup.headers[headerOrVirtualHeader.index]
+ : headerOrVirtualHeader;
return header ? (
) : null;
})}
- {virtualPaddingRight && | }
+ {virtualPaddingRight && | }
);
};
-export default DataTable_TableHeadRow;
\ No newline at end of file
+export default DataTable_TableHeadRow;
diff --git a/src/core/components/DataTable/index.js b/src/core/components/DataTable/index.js
index e440895..f5bbdfd 100644
--- a/src/core/components/DataTable/index.js
+++ b/src/core/components/DataTable/index.js
@@ -3,10 +3,15 @@ import DataTableProvider from "@/lib/contexts/DataTable";
const DataTable = (props) => {
return (
-
-
+
+
);
};
-export default DataTable;
\ No newline at end of file
+export default DataTable;
diff --git a/src/core/components/DataTable/localization/fa/datatable.js b/src/core/components/DataTable/localization/fa/datatable.js
index f80b7e0..e36f366 100644
--- a/src/core/components/DataTable/localization/fa/datatable.js
+++ b/src/core/components/DataTable/localization/fa/datatable.js
@@ -67,8 +67,7 @@ export const FA_DATATABLE_LOCALIZATION = {
rowsPerPage: "ردیف در هر صفحه",
save: "ذخیره",
search: "جستجو",
- selectedCountOfRowCountRowsSelected:
- "{selectedCount} از {rowCount} ردیف انتخاب شده",
+ selectedCountOfRowCountRowsSelected: "{selectedCount} از {rowCount} ردیف انتخاب شده",
select: "انتخاب",
showAll: "نمایش همه",
showAllColumns: "نمایش همه ستونها",
@@ -89,4 +88,4 @@ export const FA_DATATABLE_LOCALIZATION = {
unpin: "رها کردن",
unpinAll: "رها کردن همه",
unsorted: "بدون مرتب سازی",
-};
\ No newline at end of file
+};
diff --git a/src/core/components/DataTable/menus/ActionMenuItem.js b/src/core/components/DataTable/menus/ActionMenuItem.js
index 2b208b9..012fcc5 100644
--- a/src/core/components/DataTable/menus/ActionMenuItem.js
+++ b/src/core/components/DataTable/menus/ActionMenuItem.js
@@ -1,12 +1,6 @@
import { Box, IconButton, ListItemIcon, MenuItem } from "@mui/material";
-const DataTable_ActionMenuItem = ({
- icon,
- label,
- onOpenSubMenu,
- table,
- ...rest
-}) => {
+const DataTable_ActionMenuItem = ({ icon, label, onOpenSubMenu, table, ...rest }) => {
const {
options: {
icons: { ArrowRightIcon },
@@ -16,35 +10,29 @@ const DataTable_ActionMenuItem = ({
return (
);
-
-}
-export default DataTable_ActionMenuItem
\ No newline at end of file
+};
+export default DataTable_ActionMenuItem;
diff --git a/src/core/components/DataTable/menus/CellActionMenu.js b/src/core/components/DataTable/menus/CellActionMenu.js
index 36638e0..5b27ca9 100644
--- a/src/core/components/DataTable/menus/CellActionMenu.js
+++ b/src/core/components/DataTable/menus/CellActionMenu.js
@@ -2,10 +2,7 @@ import { parseFromValuesOrFunc } from "@/core/utils/utils";
import { Menu } from "@mui/material";
import DataTable_ActionMenuItem from "./ActionMenuItem";
-const DataTable_CellActionMenu = ({
- table,
- ...rest
-}) => {
+const DataTable_CellActionMenu = ({ table, ...rest }) => {
const {
getState,
options: {
@@ -32,12 +29,11 @@ const DataTable_CellActionMenu = ({
};
const internalMenuItems = [
- (parseFromValuesOrFunc(enableClickToCopy, cell) === 'context-menu' ||
- parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) ===
- 'context-menu') && (
+ (parseFromValuesOrFunc(enableClickToCopy, cell) === "context-menu" ||
+ parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === "context-menu") && (
}
- key={'mrt-copy'}
+ key={"mrt-copy"}
label={localization.copy}
onClick={(event) => {
event.stopPropagation();
@@ -47,10 +43,10 @@ const DataTable_CellActionMenu = ({
table={table}
/>
),
- parseFromValuesOrFunc(enableEditing, row) && editDisplayMode === 'cell' && (
+ parseFromValuesOrFunc(enableEditing, row) && editDisplayMode === "cell" && (
}
- key={'mrt-edit'}
+ key={"mrt-edit"}
label={localization.edit}
onClick={() => {
openEditingCell({ cell, table });
@@ -71,14 +67,13 @@ const DataTable_CellActionMenu = ({
};
const menuItems =
- columnDef.renderCellActionMenuItems?.(renderActionProps) ??
- renderCellActionMenuItems?.(renderActionProps);
+ columnDef.renderCellActionMenuItems?.(renderActionProps) ?? renderCellActionMenuItems?.(renderActionProps);
return (
(!!menuItems?.length || !!internalMenuItems?.length) && (
);
-}
-export default DataTable_BottomToolbar
\ No newline at end of file
+};
+export default DataTable_BottomToolbar;
diff --git a/src/core/components/DataTable/toolbar/LinearProgressBar.js b/src/core/components/DataTable/toolbar/LinearProgressBar.js
index cdcbc0a..74c465f 100644
--- a/src/core/components/DataTable/toolbar/LinearProgressBar.js
+++ b/src/core/components/DataTable/toolbar/LinearProgressBar.js
@@ -1,11 +1,7 @@
import { parseFromValuesOrFunc } from "@/core/utils/utils";
import { Collapse, LinearProgress } from "@mui/material";
-const DataTable_LinearProgressBar = ({
- isTopToolbar,
- table,
- ...rest
-}) => {
+const DataTable_LinearProgressBar = ({ isTopToolbar, table, ...rest }) => {
const {
getState,
options: { muiLinearProgressProps },
@@ -26,19 +22,19 @@ const DataTable_LinearProgressBar = ({
mountOnEnter
sx={{
bottom: isTopToolbar ? 0 : undefined,
- position: 'absolute',
+ position: "absolute",
top: !isTopToolbar ? 0 : undefined,
- width: '100%',
+ width: "100%",
}}
unmountOnExit
>
);
-}
-export default DataTable_LinearProgressBar
\ No newline at end of file
+};
+export default DataTable_LinearProgressBar;
diff --git a/src/core/components/DataTable/toolbar/TablePagination.js b/src/core/components/DataTable/toolbar/TablePagination.js
index cd70fda..6492b41 100644
--- a/src/core/components/DataTable/toolbar/TablePagination.js
+++ b/src/core/components/DataTable/toolbar/TablePagination.js
@@ -1,16 +1,23 @@
import { flipIconStyles, getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils";
import { useTheme } from "@emotion/react";
-import { Box, IconButton, InputLabel, MenuItem, Pagination, PaginationItem, Select, Tooltip, Typography, useMediaQuery } from "@mui/material";
+import {
+ Box,
+ IconButton,
+ InputLabel,
+ MenuItem,
+ Pagination,
+ PaginationItem,
+ Select,
+ Tooltip,
+ Typography,
+ useMediaQuery,
+} from "@mui/material";
const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
-const DataTable_TablePagination = ({
- position = 'bottom',
- table,
- ...rest
-}) => {
+const DataTable_TablePagination = ({ position = "bottom", table, ...rest }) => {
const theme = useTheme();
- const isMobile = useMediaQuery('(max-width: 720px)');
+ const isMobile = useMediaQuery("(max-width: 720px)");
const {
getState,
@@ -64,26 +71,21 @@ const DataTable_TablePagination = ({
{showRowsPerPage && (
-
+
{localization.rowsPerPage}
@@ -92,22 +94,19 @@ const DataTable_TablePagination = ({
disableUnderline
disabled={disabled}
inputProps={{
- 'aria-label': localization.rowsPerPage,
- id: 'mrt-rows-per-page',
+ "aria-label": localization.rowsPerPage,
+ id: "mrt-rows-per-page",
}}
label={localization.rowsPerPage}
- onChange={(event) =>
- table.setPageSize(+(event.target.value))
- }
+ onChange={(event) => table.setPageSize(+event.target.value)}
sx={{ mb: 0 }}
value={pageSize}
variant="standard"
{...SelectProps}
>
{rowsPerPageOptions.map((option) => {
- const value = typeof option !== 'number' ? option.value : option;
- const label =
- typeof option !== 'number' ? option.label : `${option}`;
+ const value = typeof option !== "number" ? option.value : option;
+ const label = typeof option !== "number" ? option.label : `${option}`;
return (
SelectProps?.children ??
(SelectProps?.native ? (
@@ -124,7 +123,7 @@ const DataTable_TablePagination = ({
)}
- {paginationDisplayMode === 'pages' ? (
+ {paginationDisplayMode === "pages" ? (
- ) : paginationDisplayMode === 'default' ? (
+ ) : paginationDisplayMode === "default" ? (
<>
{`${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
- }-${lastRowIndex.toLocaleString()} ${localization.of
- } ${totalRowCount.toLocaleString()}`}
+ >{`${
+ lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
+ }-${lastRowIndex.toLocaleString()} ${
+ localization.of
+ } ${totalRowCount.toLocaleString()}`}
{showFirstButton && (
@@ -213,5 +214,5 @@ const DataTable_TablePagination = ({
) : null}
);
-}
-export default DataTable_TablePagination
\ No newline at end of file
+};
+export default DataTable_TablePagination;
diff --git a/src/core/components/DataTable/toolbar/ToolbarInternalButtons.js b/src/core/components/DataTable/toolbar/ToolbarInternalButtons.js
index 606add0..9250b89 100644
--- a/src/core/components/DataTable/toolbar/ToolbarInternalButtons.js
+++ b/src/core/components/DataTable/toolbar/ToolbarInternalButtons.js
@@ -16,32 +16,29 @@ const DataTable_ToolbarInternalButtons = ({ table, ...rest }) => {
},
} = table;
-
return (
({
- alignItems: 'center',
- display: 'flex',
+ alignItems: "center",
+ display: "flex",
zIndex: 3,
- ...(parseFromValuesOrFunc(rest?.sx, theme)),
+ ...parseFromValuesOrFunc(rest?.sx, theme),
})}
>
{renderToolbarInternalActions?.({
table,
}) ?? (
- <>
- {enableFilters &&
- enableColumnFilters &&
- columnFilterDisplayMode !== 'popover' && (
-
- )}
- {(enableHiding || enableColumnOrdering || enableColumnPinning) && (
-
- )}
-
- )}
+ <>
+ {enableFilters && enableColumnFilters && columnFilterDisplayMode !== "popover" && (
+
+ )}
+ {(enableHiding || enableColumnOrdering || enableColumnPinning) && (
+
+ )}
+
+ )}
);
-}
-export default DataTable_ToolbarInternalButtons
\ No newline at end of file
+};
+export default DataTable_ToolbarInternalButtons;
diff --git a/src/core/components/DataTable/toolbar/TopToolbar.js b/src/core/components/DataTable/toolbar/TopToolbar.js
index 7a321e2..b0e5297 100644
--- a/src/core/components/DataTable/toolbar/TopToolbar.js
+++ b/src/core/components/DataTable/toolbar/TopToolbar.js
@@ -1,12 +1,12 @@
-import {getCommonToolbarStyles, parseFromValuesOrFunc} from "@/core/utils/utils";
-import {Box, useMediaQuery} from "@mui/material";
+import { getCommonToolbarStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
+import { Box, useMediaQuery } from "@mui/material";
import DataTable_LinearProgressBar from "./LinearProgressBar";
import DataTable_TablePagination from "./TablePagination";
import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons";
import FilterColumn from "@/core/components/DataTable/filter";
import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable";
-const DataTable_TopToolbar = ({table, columns, table_url, user_id, page_name, table_name}) => {
+const DataTable_TopToolbar = ({ table, columns, table_url, user_id, page_name, table_name }) => {
const {
getState,
options: {
@@ -16,19 +16,16 @@ const DataTable_TopToolbar = ({table, columns, table_url, user_id, page_name, ta
positionPagination,
renderTopToolbarCustomActions,
},
- refs: {topToolbarRef},
+ refs: { topToolbarRef },
} = table;
- const {isFullScreen, showGlobalFilter} = getState();
+ const { isFullScreen, showGlobalFilter } = getState();
- const isMobile = useMediaQuery('(max-width:720px)');
- const isTablet = useMediaQuery('(max-width:1024px)');
+ const isMobile = useMediaQuery("(max-width:720px)");
+ const isTablet = useMediaQuery("(max-width:1024px)");
- const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, {table});
+ const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
- const stackAlertBanner =
- isMobile ||
- !!renderTopToolbarCustomActions ||
- (showGlobalFilter && isTablet);
+ const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || (showGlobalFilter && isTablet);
return (
({
- ...getCommonToolbarStyles({table, theme}),
- position: isFullScreen ? 'sticky' : 'relative',
- top: isFullScreen ? '0' : undefined,
- ...(parseFromValuesOrFunc(toolbarProps?.sx, theme)),
+ ...getCommonToolbarStyles({ table, theme }),
+ position: isFullScreen ? "sticky" : "relative",
+ top: isFullScreen ? "0" : undefined,
+ ...parseFromValuesOrFunc(toolbarProps?.sx, theme),
})}
>
- {renderTopToolbarCustomActions?.({table}) ?? }
+ {renderTopToolbarCustomActions?.({ table }) ?? }
{enableToolbarInternalActions && (
-
-
-
+
+
+
)}
- {enablePagination &&
- ['both', 'top'].includes(positionPagination ?? '') && (
-
- )}
-
+ {enablePagination && ["both", "top"].includes(positionPagination ?? "") && (
+
+ )}
+
);
-}
+};
-export default DataTable_TopToolbar
\ No newline at end of file
+export default DataTable_TopToolbar;
diff --git a/src/core/components/NotificationDesign/AskForKeepData.jsx b/src/core/components/NotificationDesign/AskForKeepData.jsx
index 65a8620..552aee1 100644
--- a/src/core/components/NotificationDesign/AskForKeepData.jsx
+++ b/src/core/components/NotificationDesign/AskForKeepData.jsx
@@ -1,59 +1,75 @@
-'use client'
+"use client";
-import SaveIcon from '@mui/icons-material/Save';
-import {Box, Button, Typography} from "@mui/material";
-import DownloadIcon from '@mui/icons-material/Download';
-import {toast} from "react-toastify";
+import SaveIcon from "@mui/icons-material/Save";
+import { Box, Button, Typography } from "@mui/material";
+import DownloadIcon from "@mui/icons-material/Download";
+import { toast } from "react-toastify";
import useTableSetting from "@/lib/hooks/useTableSetting";
-function AskForKeepData({filterData, sortData, user_id, page_name, table_name, columns}) {
- const {filterAction} = useTableSetting();
+function AskForKeepData({ filterData, sortData, user_id, page_name, table_name, columns }) {
+ const { filterAction, sortAction } = useTableSetting();
+
const onSaveFilter = () => {
- const filteredItems = Object.keys(filterData).map(key => {
- const value = filterData[key].value;
- if (value !== "" &&
- !(Array.isArray(value) && (value.length === 0 || (value.length === 2 && value[0] === "" && value[1] === "")))) {
- return filterData[key];
- }
- }).filter(Boolean);
+ const filteredItems = Object.keys(filterData)
+ .map((key) => {
+ const value = filterData[key].value;
+ if (
+ value !== "" &&
+ !(
+ Array.isArray(value) &&
+ (value.length === 0 || (value.length === 2 && value[0] === "" && value[1] === ""))
+ )
+ ) {
+ return filterData[key];
+ }
+ })
+ .filter(Boolean);
filterAction(user_id, page_name, table_name, filteredItems, columns);
- const settingValue = sortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || []);
- sortAction(user_id, page_name, table_name, settingValue, flatColumns);
- toast.dismiss({containerId: "datatable"});
+
+ sortAction(user_id, page_name, table_name, sortData, columns);
+ toast.dismiss({ containerId: "datatable" });
};
const handleDismiss = () => {
- toast.dismiss({containerId: "datatable"});
+ toast.dismiss({ containerId: "datatable" });
};
return (
-
-
-
+
+
+
ذخیره سازی تغییرات
-
+
-
-
- آیا مایل به ذخیره تغییر های اعمال شده برای دفعات بعد هستید؟
-
+
+ آیا مایل به ذخیره تغییر های اعمال شده برای دفعات بعد هستید؟
-
-
-
+
+
+ }
+ onClick={onSaveFilter}
+ sx={{
+ backgroundColor: "#155175",
+ ":hover": { backgroundColor: "#155175" },
+ boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
+ }}
+ >
+ ذخیره
+
);
diff --git a/src/core/components/NotificationDesign/AskForKeepFilter.jsx b/src/core/components/NotificationDesign/AskForKeepFilter.jsx
deleted file mode 100644
index 3f0e321..0000000
--- a/src/core/components/NotificationDesign/AskForKeepFilter.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-
-import SaveIcon from '@mui/icons-material/Save';
-import {Box, Button, Typography} from "@mui/material";
-import DownloadIcon from '@mui/icons-material/Download';
-import {toast} from "react-toastify";
-import useTableSetting from "@/lib/hooks/useTableSetting";
-
-function AskForKeepFilter({values, user_id, page_name, table_name, columns}) {
- const {filterAction} = useTableSetting();
- const onSaveFilter = () => {
- const filteredItems = Object.keys(values).map(key => {
- const value = values[key].value;
- if (value !== "" &&
- !(Array.isArray(value) && (value.length === 0 || (value.length === 2 && value[0] === "" && value[1] === "")))) {
- return values[key];
- }
- }).filter(Boolean);
- filterAction(user_id, page_name, table_name, filteredItems, columns)
- toast.dismiss({containerId: "datatable", id: "filter"});
- };
-
- const handleDismiss = () => {
- toast.dismiss({containerId: "datatable", id: "filter"});
- };
-
- return (
-
-
-
- ذخیره سازی فیلتر
-
-
-
-
-
- آیا مایل به ذخیره فیلتر های اعمال شده برای دفعات بعد هستید؟
-
-
-
-
-
-
-
- );
-}
-
-export default AskForKeepFilter;
\ No newline at end of file
diff --git a/src/core/components/NotificationDesign/AskForKeepSort.jsx b/src/core/components/NotificationDesign/AskForKeepSort.jsx
deleted file mode 100644
index 0a87ee9..0000000
--- a/src/core/components/NotificationDesign/AskForKeepSort.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client'
-
-import SaveIcon from '@mui/icons-material/Save';
-import {Box, Button, Typography} from "@mui/material";
-import DownloadIcon from '@mui/icons-material/Download';
-import {toast} from "react-toastify";
-import useTableSetting from "@/lib/hooks/useTableSetting";
-
-function AskForKeepSort({event, user_id, page_name, table_name, flatColumns}) {
- const {settingStore, sortAction} = useTableSetting();
- const onSaveFilter = () => {
- const settingValue = event(settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || []);
- sortAction(user_id, page_name, table_name, settingValue, flatColumns);
- toast.dismiss({containerId: "filtering", id: "sort"});
- };
-
- const handleDismiss = () => {
- toast.dismiss({containerId: "filtering", id: "sort"});
- };
-
- return (
-
-
-
- ذخیره سازی ترتیب
-
-
-
-
-
- آیا مایل به ذخیره ترتیب های اعمال شده برای دفعات بعد هستید؟
-
-
-
-
-
-
-
- );
-}
-
-export default AskForKeepSort;
\ No newline at end of file
diff --git a/src/core/components/SidebarListItems.jsx b/src/core/components/SidebarListItems.jsx
index 9ffcac2..1c93a71 100644
--- a/src/core/components/SidebarListItems.jsx
+++ b/src/core/components/SidebarListItems.jsx
@@ -1,19 +1,23 @@
-import {Collapse, ListItem, ListItemButton, ListItemIcon, ListItemText} from "@mui/material";
-import { ExpandLess, ExpandMore } from '@mui/icons-material';
-import WifiIcon from '@mui/icons-material/Wifi';
+import { Collapse, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
+import WifiIcon from "@mui/icons-material/Wifi";
import SidebarSubitems from "@/core/components/SidebarSubitems";
-const SidebarListItems = ({menuItem, dispatch}) => {
- return(
+const SidebarListItems = ({ menuItem, dispatch }) => {
+ return (
<>
-
- {
- dispatch({type: "COLLAPSE_MENU", id: menuItem.id})
- }}>
+
+ {
+ dispatch({ type: "COLLAPSE_MENU", id: menuItem.id });
+ }}
+ >
{
{menuItem.icon}
- {menuItem.hasSubitems ? (menuItem.showSubitems ? : ) : null }
+ {menuItem.hasSubitems ? menuItem.showSubitems ? : : null}
- {
- menuItem.hasSubitems ? (menuItem.Subitems.map((subitem,index)=>{
- return(
-
- )
- })) : null
- }
+ {menuItem.hasSubitems
+ ? menuItem.Subitems.map((subitem, index) => {
+ return ;
+ })
+ : null}
-
- )
-}
-export default SidebarListItems
\ No newline at end of file
+ );
+};
+export default SidebarListItems;
diff --git a/src/core/components/SidebarMenu.jsx b/src/core/components/SidebarMenu.jsx
index f7589c3..55cc9b9 100644
--- a/src/core/components/SidebarMenu.jsx
+++ b/src/core/components/SidebarMenu.jsx
@@ -1,35 +1,45 @@
-"use client"
-import {List} from "@mui/material";
+"use client";
+import { List } from "@mui/material";
import SidebarListItems from "@/core/components/SidebarListItems";
-import {useEffect, useReducer, useState} from "react";
-import {usePathname} from 'next/navigation'
-import SecurityIcon from '@mui/icons-material/Security';
+import { useEffect, useReducer, useState } from "react";
+import { usePathname } from "next/navigation";
+import SecurityIcon from "@mui/icons-material/Security";
import SpaceDashboardIcon from "@mui/icons-material/SpaceDashboard";
-import AssessmentIcon from '@mui/icons-material/Assessment';
+import AssessmentIcon from "@mui/icons-material/Assessment";
import AirlineSeatReclineNormalIcon from "@mui/icons-material/AirlineSeatReclineNormal";
-import RepartitionIcon from '@mui/icons-material/Repartition';
+import RepartitionIcon from "@mui/icons-material/Repartition";
const data = [
{
id: "hello",
type: "menu",
route: "/hello",
- icon: ,
+ icon: ,
selected: false,
Subitems: [
{
id: "amin",
route: "/s",
- icon: ,
+ icon: ,
firstName: "amin",
lastName: "ali",
Subitems: [
{
- id: "shahrokh", shahrokh: "shahrokh", type: "page", selected: false, route: "/dashbssoard", icon:
+ id: "shahrokh",
+ shahrokh: "shahrokh",
+ type: "page",
+ selected: false,
+ route: "/dashbssoard",
+ icon: ,
},
{
- id: "shasdasdsahrokh", shahrokh: "shahroasdasdkh", type: "page", selected: false, route: "/dashboardsd", icon:
- }
+ id: "shasdasdsahrokh",
+ shahrokh: "shahroasdasdkh",
+ type: "page",
+ selected: false,
+ route: "/dashboardsd",
+ icon: ,
+ },
],
hasSubitems: true,
showSubitems: false,
@@ -39,7 +49,7 @@ const data = [
{
id: "amir",
route: "/dashboarsad",
- icon: ,
+ icon: ,
firstName: "amir",
lastName: "akbar",
hasSubitems: false,
@@ -49,12 +59,12 @@ const data = [
},
],
hasSubitems: true,
- showSubitems: false
+ showSubitems: false,
},
{
id: "hi",
type: "menu",
- icon: ,
+ icon: ,
route: "/hi",
selected: false,
Subitems: [
@@ -63,7 +73,7 @@ const data = [
route: "/dashboardss",
firstName: "ali",
lastName: "ali",
- icon: ,
+ icon: ,
hasSubitems: false,
showSubitems: false,
type: "page",
@@ -73,7 +83,7 @@ const data = [
id: "akbar",
route: "/akbar",
firstName: "akbar",
- icon: ,
+ icon: ,
lastName: "akbar",
hasSubitems: false,
showSubitems: false,
@@ -82,61 +92,103 @@ const data = [
},
],
hasSubitems: true,
- showSubitems: false
+ showSubitems: false,
},
{
id: "hoo",
type: "page",
route: "/dashboard",
- icon: ,
+ icon: ,
selected: false,
hasSubitems: false,
- showSubitems: false
- }
-]
+ showSubitems: false,
+ },
+];
function reducer(state, action) {
switch (action.type) {
case "COLLAPSE_MENU":
- return state.map((item) => action.id == item.id ? {
- ...item, showSubitems: !item.showSubitems
- } : item)
- case "COLLAPSE_SUB_ITEMS" :
+ return state.map((item) =>
+ action.id == item.id
+ ? {
+ ...item,
+ showSubitems: !item.showSubitems,
+ }
+ : item
+ );
+ case "COLLAPSE_SUB_ITEMS":
return state.map((item) => {
- return item.hasSubitems ? {
- ...item, Subitems: item.Subitems.map((subitem) => action.id === subitem.id ? {
- ...subitem, showSubitems: !subitem.showSubitems
- } : subitem)
- } : item
- })
- case "COLLAPSE_SUB_SECOND_ITEMS" :
+ return item.hasSubitems
+ ? {
+ ...item,
+ Subitems: item.Subitems.map((subitem) =>
+ action.id === subitem.id
+ ? {
+ ...subitem,
+ showSubitems: !subitem.showSubitems,
+ }
+ : subitem
+ ),
+ }
+ : item;
+ });
+ case "COLLAPSE_SUB_SECOND_ITEMS":
return state.map((item) => {
- return item.hasSubitems ? {
- ...item, Subitems: item.Subitems.map((subitem) => {
- return subitem.hasSubitems ? {
- ...subitem,
- Subitems: subitem.Subitems.map((secondSubitem) => action.id === secondSubitem.id ? {
- ...secondSubitem, showSubitems: !secondSubitem.showSubitems
- } : secondSubitem)
- } : subitem
- })
- } : item
- })
+ return item.hasSubitems
+ ? {
+ ...item,
+ Subitems: item.Subitems.map((subitem) => {
+ return subitem.hasSubitems
+ ? {
+ ...subitem,
+ Subitems: subitem.Subitems.map((secondSubitem) =>
+ action.id === secondSubitem.id
+ ? {
+ ...secondSubitem,
+ showSubitems: !secondSubitem.showSubitems,
+ }
+ : secondSubitem
+ ),
+ }
+ : subitem;
+ }),
+ }
+ : item;
+ });
case "SELECTED":
return state.map((item) => {
- return item.type === "page" ? {
- ...item, selected: action.route === item.route,showSubitems: item.route === action.route
- } : item.Subitems && Array.isArray(item.Subitems) ? {
- ...item, Subitems: item.Subitems.map((subitem) => {
- return subitem.type === "page" ? {
- ...subitem, selected: action.route === subitem.route,showSubitems: subitem.route === action.route
- } : subitem.Subitems && Array.isArray(subitem.Subitems) ? {
- ...subitem, Subitems: subitem.Subitems.map((secondSubItem) => ({
- ...secondSubItem, selected: secondSubItem.route === action.route
- })),showSubitems: subitem.Subitems.some((secondSubItem) => secondSubItem.route === action.route),
- } : subitem
- }),showSubitems: item.Subitems.some((subitem) => subitem.showSubitems),
- } : item
+ return item.type === "page"
+ ? {
+ ...item,
+ selected: action.route === item.route,
+ showSubitems: item.route === action.route,
+ }
+ : item.Subitems && Array.isArray(item.Subitems)
+ ? {
+ ...item,
+ Subitems: item.Subitems.map((subitem) => {
+ return subitem.type === "page"
+ ? {
+ ...subitem,
+ selected: action.route === subitem.route,
+ showSubitems: subitem.route === action.route,
+ }
+ : subitem.Subitems && Array.isArray(subitem.Subitems)
+ ? {
+ ...subitem,
+ Subitems: subitem.Subitems.map((secondSubItem) => ({
+ ...secondSubItem,
+ selected: secondSubItem.route === action.route,
+ })),
+ showSubitems: subitem.Subitems.some(
+ (secondSubItem) => secondSubItem.route === action.route
+ ),
+ }
+ : subitem;
+ }),
+ showSubitems: item.Subitems.some((subitem) => subitem.showSubitems),
+ }
+ : item;
});
// case "SELECTED":
// return state.map((item) => {
@@ -165,7 +217,6 @@ function reducer(state, action) {
// } : item
// });
-
default:
throw new Error();
}
@@ -173,29 +224,27 @@ function reducer(state, action) {
const SidebarMenu = () => {
const [menuItems, dispatch] = useReducer(reducer, data);
- const pathname = usePathname()
+ const pathname = usePathname();
const [selectedKey, setSelectedKey] = useState(null);
useEffect(() => {
- dispatch({type: "SELECTED", route: pathname});
+ dispatch({ type: "SELECTED", route: pathname });
setSelectedKey(pathname);
}, [pathname]);
useEffect(() => {
- selectedKey && document.querySelector(`[data-route="${selectedKey}"]`)?.scrollIntoView({
- behavior: "smooth", block: "center"
- });
+ selectedKey &&
+ document.querySelector(`[data-route="${selectedKey}"]`)?.scrollIntoView({
+ behavior: "smooth",
+ block: "center",
+ });
}, [selectedKey]);
return (
- {
- menuItems.map((menuItem) => {
- return (
-
- )
- })
- }
+ {menuItems.map((menuItem) => {
+ return ;
+ })}
- )
-}
-export default SidebarMenu
\ No newline at end of file
+ );
+};
+export default SidebarMenu;
diff --git a/src/core/components/SidebarSubitems.jsx b/src/core/components/SidebarSubitems.jsx
index 275befb..18c1016 100644
--- a/src/core/components/SidebarSubitems.jsx
+++ b/src/core/components/SidebarSubitems.jsx
@@ -1,18 +1,22 @@
-import {Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText} from "@mui/material";
-import {ExpandLess, ExpandMore} from "@mui/icons-material";
+import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
-const SidebarSubitems = ({subitem, dispatch}) => {
+const SidebarSubitems = ({ subitem, dispatch }) => {
return (
<>
- {
- dispatch({type: "COLLAPSE_SUB_ITEMS", id: subitem.id})
- }}>
+ {
+ dispatch({ type: "COLLAPSE_SUB_ITEMS", id: subitem.id });
+ }}
+ >
{
>
{subitem.icon}
-
- {subitem.hasSubitems ? (subitem.showSubitems ? : ) : null
- }
+
+ {subitem.hasSubitems ? subitem.showSubitems ? : : null}
- {
- subitem.hasSubitems ? (subitem.Subitems.map((subSubitem, index) => {
- return (
-
-
-
- {
- dispatch({type: "COLLAPSE_SUB_SECOND_ITEMS", id: subSubitem.id})
- }}
- selected={subSubitem.selected}
- sx={{
- '&.Mui-selected': {
- backgroundColor: 'rgba(0, 0, 0, 0.05)',
- },
- }}
- >
-
- {subSubitem.icon}
-
-
-
-
-
-
- )
- })) : null
- }
+ {subitem.hasSubitems
+ ? subitem.Subitems.map((subSubitem, index) => {
+ return (
+
+
+
+ {
+ dispatch({ type: "COLLAPSE_SUB_SECOND_ITEMS", id: subSubitem.id });
+ }}
+ selected={subSubitem.selected}
+ sx={{
+ "&.Mui-selected": {
+ backgroundColor: "rgba(0, 0, 0, 0.05)",
+ },
+ }}
+ >
+
+ {subSubitem.icon}
+
+
+
+
+
+
+ );
+ })
+ : null}
- )
-}
-export default SidebarSubitems
\ No newline at end of file
+ );
+};
+export default SidebarSubitems;
diff --git a/src/core/utils/cacheRtl.js b/src/core/utils/cacheRtl.js
index bf8c809..1393e2e 100644
--- a/src/core/utils/cacheRtl.js
+++ b/src/core/utils/cacheRtl.js
@@ -1,16 +1,16 @@
-'use client'
+"use client";
import createCache from "@emotion/cache";
-import {prefixer} from "stylis";
+import { prefixer } from "stylis";
import stylisRTLPlugin from "stylis-plugin-rtl";
-import {CacheProvider} from "@emotion/react";
+import { CacheProvider } from "@emotion/react";
const cache = createCache({
- key: 'mui-rtl',
+ key: "mui-rtl",
stylisPlugins: [prefixer, stylisRTLPlugin],
});
const cacheProviderRtl = (props) => {
return {props.children};
-}
+};
-export default cacheProviderRtl
\ No newline at end of file
+export default cacheProviderRtl;
diff --git a/src/core/utils/flattenArrayOfObjects.js b/src/core/utils/flattenArrayOfObjects.js
index 4dd4612..5b1564c 100644
--- a/src/core/utils/flattenArrayOfObjects.js
+++ b/src/core/utils/flattenArrayOfObjects.js
@@ -7,4 +7,4 @@ export const flattenArrayOfObjects = (array, key) => {
}
return acc;
}, []);
-};
\ No newline at end of file
+};
diff --git a/src/core/utils/theme.js b/src/core/utils/theme.js
index d96fc53..efe56eb 100644
--- a/src/core/utils/theme.js
+++ b/src/core/utils/theme.js
@@ -1,12 +1,12 @@
-'use client'
-import {createTheme} from "@mui/material";
+"use client";
+import { createTheme } from "@mui/material";
const theme = createTheme({
- direction: 'rtl',
+ direction: "rtl",
typography: {
fontFamily: `IRANSansFaNum, sans-serif`,
- fontSize: 12
+ fontSize: 12,
},
});
-export default theme
\ No newline at end of file
+export default theme;
diff --git a/src/core/utils/utils.js b/src/core/utils/utils.js
index 98e0252..a0a320d 100644
--- a/src/core/utils/utils.js
+++ b/src/core/utils/utils.js
@@ -1,162 +1,120 @@
import { alpha, darken } from "@mui/material";
-export const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
+export const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, "_");
-export const parseFromValuesOrFunc = (
- fn,
- arg
-) => (fn instanceof Function ? fn(arg) : fn);
+export const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
-export const getCommonToolbarStyles = ({
- table,
-}) => ({
- alignItems: 'flex-start',
- backgroundColor: table.options.mrtTheme.baseBackgroundColor,
- display: 'grid',
- flexWrap: 'wrap-reverse',
- minHeight: '3.5rem',
- overflow: 'hidden',
- position: 'relative',
- transition: 'all 150ms ease-in-out',
- zIndex: 1,
+export const getCommonToolbarStyles = ({ table }) => ({
+ alignItems: "flex-start",
+ backgroundColor: table.options.mrtTheme.baseBackgroundColor,
+ display: "grid",
+ flexWrap: "wrap-reverse",
+ minHeight: "3.5rem",
+ overflow: "hidden",
+ position: "relative",
+ transition: "all 150ms ease-in-out",
+ zIndex: 1,
});
-export const getCommonTooltipProps = (
- placement,
-) => ({
- disableInteractive: true,
- enterDelay: 500,
- enterNextDelay: 500,
- placement,
+export const getCommonTooltipProps = (placement) => ({
+ disableInteractive: true,
+ enterDelay: 500,
+ enterNextDelay: 500,
+ placement,
});
export const flipIconStyles = (theme) =>
- theme.direction === 'rtl'
- ? { style: { transform: 'scaleX(-1)' } }
- : undefined;
+ theme.direction === "rtl" ? { style: { transform: "scaleX(-1)" } } : undefined;
-export const getCommonPinnedCellStyles = ({
- column,
- table,
- theme,
-}) => {
- const { baseBackgroundColor } = table.options.mrtTheme;
- const isPinned = column?.getIsPinned();
+export const getCommonPinnedCellStyles = ({ column, table, theme }) => {
+ const { baseBackgroundColor } = table.options.mrtTheme;
+ const isPinned = column?.getIsPinned();
- return {
- '&[data-pinned="true"]': {
- '&:before': {
- backgroundColor: alpha(
- darken(
- baseBackgroundColor,
- theme.palette.mode === 'dark' ? 0.05 : 0.01,
- ),
- 0.97,
- ),
- boxShadow: column
- ? isPinned === 'left' && column.getIsLastColumn(isPinned)
- ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
- : isPinned === 'right' && column.getIsFirstColumn(isPinned)
- ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
- : undefined
- : undefined,
- ...commonCellBeforeAfterStyles,
- },
- },
- };
+ return {
+ '&[data-pinned="true"]': {
+ "&:before": {
+ backgroundColor: alpha(darken(baseBackgroundColor, theme.palette.mode === "dark" ? 0.05 : 0.01), 0.97),
+ boxShadow: column
+ ? isPinned === "left" && column.getIsLastColumn(isPinned)
+ ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+ : isPinned === "right" && column.getIsFirstColumn(isPinned)
+ ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+ : undefined
+ : undefined,
+ ...commonCellBeforeAfterStyles,
+ },
+ },
+ };
};
-export const getCommonMRTCellStyles = ({
- column,
- header,
- table,
- tableCellProps,
- theme,
-}) => {
- const {
- getState,
- options: { enableColumnVirtualization, layoutMode },
- } = table;
- const { draggingColumn } = getState();
- const { columnDef } = column;
- const { columnDefType } = columnDef;
+export const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme }) => {
+ const {
+ getState,
+ options: { enableColumnVirtualization, layoutMode },
+ } = table;
+ const { draggingColumn } = getState();
+ const { columnDef } = column;
+ const { columnDefType } = columnDef;
- const isColumnPinned =
- columnDef.columnDefType !== 'group' && column.getIsPinned();
+ const isColumnPinned = columnDef.columnDefType !== "group" && column.getIsPinned();
- const widthStyles = {
- minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
- header?.id ?? column.id,
- )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
- width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
- header?.id ?? column.id,
- )}-size) * 1px)`,
- };
+ const widthStyles = {
+ minWidth: `max(calc(var(--${header ? "header" : "col"}-${parseCSSVarId(
+ header?.id ?? column.id
+ )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
+ width: `calc(var(--${header ? "header" : "col"}-${parseCSSVarId(header?.id ?? column.id)}-size) * 1px)`,
+ };
- if (layoutMode === 'grid') {
- widthStyles.flex = `${[0, false].includes(columnDef.grow)
- ? 0
- : `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
- header?.id ?? column.id,
- )}-size)`
- } 0 auto`;
- } else if (layoutMode === 'grid-no-grow') {
- widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
- }
-
- const pinnedStyles = isColumnPinned
- ? {
- ...getCommonPinnedCellStyles({ column, table, theme }),
- left:
- isColumnPinned === 'left'
- ? `${column.getStart('left')}px`
- : undefined,
- opacity: 0.97,
- position: 'sticky',
- right:
- isColumnPinned === 'right'
- ? `${column.getAfter('right')}px`
- : undefined,
+ if (layoutMode === "grid") {
+ widthStyles.flex = `${
+ [0, false].includes(columnDef.grow)
+ ? 0
+ : `var(--${header ? "header" : "col"}-${parseCSSVarId(header?.id ?? column.id)}-size)`
+ } 0 auto`;
+ } else if (layoutMode === "grid-no-grow") {
+ widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
}
- : {};
- return {
- backgroundColor: 'inherit',
- backgroundImage: 'inherit',
- display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
- justifyContent:
- columnDefType === 'group'
- ? 'center'
- : layoutMode?.startsWith('grid')
- ? tableCellProps.align
- : undefined,
- opacity:
- table.getState().draggingColumn?.id === column.id ||
- table.getState().hoveredColumn?.id === column.id
- ? 0.5
- : 1,
- position: 'relative',
- transition: enableColumnVirtualization
- ? 'none'
- : `padding 150ms ease-in-out`,
- zIndex:
- column.getIsResizing() || draggingColumn?.id === column.id
- ? 2
- : columnDefType !== 'group' && isColumnPinned
- ? 1
- : 0,
- ...pinnedStyles,
- ...widthStyles,
- ...(parseFromValuesOrFunc(tableCellProps?.sx, theme)),
- };
+ const pinnedStyles = isColumnPinned
+ ? {
+ ...getCommonPinnedCellStyles({ column, table, theme }),
+ left: isColumnPinned === "left" ? `${column.getStart("left")}px` : undefined,
+ opacity: 0.97,
+ position: "sticky",
+ right: isColumnPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+ }
+ : {};
+
+ return {
+ backgroundColor: "inherit",
+ backgroundImage: "inherit",
+ display: layoutMode?.startsWith("grid") ? "flex" : undefined,
+ justifyContent:
+ columnDefType === "group" ? "center" : layoutMode?.startsWith("grid") ? tableCellProps.align : undefined,
+ opacity:
+ table.getState().draggingColumn?.id === column.id || table.getState().hoveredColumn?.id === column.id
+ ? 0.5
+ : 1,
+ position: "relative",
+ transition: enableColumnVirtualization ? "none" : `padding 150ms ease-in-out`,
+ zIndex:
+ column.getIsResizing() || draggingColumn?.id === column.id
+ ? 2
+ : columnDefType !== "group" && isColumnPinned
+ ? 1
+ : 0,
+ ...pinnedStyles,
+ ...widthStyles,
+ ...parseFromValuesOrFunc(tableCellProps?.sx, theme),
+ };
};
export const commonCellBeforeAfterStyles = {
- content: '""',
- height: '100%',
- left: 0,
- position: 'absolute',
- top: 0,
- width: '100%',
- zIndex: -1,
-};
\ No newline at end of file
+ content: '""',
+ height: "100%",
+ left: 0,
+ position: "absolute",
+ top: 0,
+ width: "100%",
+ zIndex: -1,
+};
diff --git a/src/lib/contexts/DataTable.jsx b/src/lib/contexts/DataTable.jsx
index cd1fe1d..32b2a7c 100644
--- a/src/lib/contexts/DataTable.jsx
+++ b/src/lib/contexts/DataTable.jsx
@@ -1,30 +1,110 @@
-import {createContext, useEffect, useState} from "react";
-import {toast} from "react-toastify";
+import { createContext, useEffect, useState } from "react";
+import { toast } from "react-toastify";
import AskForKeepData from "@/core/components/NotificationDesign/AskForKeepData";
+import useTableSetting from "@/lib/hooks/useTableSetting";
+import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects";
export const DataTableContext = createContext();
-const DataTableProvider = ({children}) => {
+const DataTableProvider = ({ children, user_id, page_name, table_name, columns }) => {
+ const { settingStore } = useTableSetting();
+ const [isInitStates, setInitStates] = useState(false);
+ const flatColumns = flattenArrayOfObjects(columns, "columns");
+ const [initFilter, setInitFilter] = useState({});
+ const [initSort, setInitSort] = useState([]);
const [filterData, setFilterData] = useState({});
const [sortData, setSortData] = useState([]);
useEffect(() => {
- toast(, {
- containerId: "datatable",
- className: "filter-toast",
- position: "bottom-left",
- draggable: true,
- autoClose: false,
- });
+ if (!settingStore) return;
+ const values = flatColumns.reduce((acc, column) => {
+ if (!column.enableColumnFilter) return acc;
+ const filter = settingStore?.[user_id]?.[page_name]?.[table_name]?.["filters"]?.find(
+ (filter) => filter.id === column.id
+ );
+ if (column.datatype === "array") {
+ acc[column.id] = {
+ id: column.id,
+ value: filter?.value || [],
+ filterFn: filter?.filterFn || column._filterFn,
+ datatype: column.datatype,
+ };
+ } else if (column._filterFn === "between") {
+ acc[column.id] = {
+ id: column.id,
+ value: filter?.value || ["", ""],
+ filterFn: filter?.filterFn || column._filterFn,
+ datatype: column.datatype,
+ };
+ } else {
+ acc[column.id] = {
+ id: column.id,
+ value: filter?.value || "",
+ filterFn: filter?.filterFn || column._filterFn,
+ datatype: column.datatype,
+ };
+ }
+ return acc;
+ }, {});
+ setFilterData(values);
+ setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []);
+ setInitFilter(values);
+ setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []);
+ setInitStates(true);
+ }, [settingStore, isInitStates]);
+
+ useEffect(() => {
+ if (
+ JSON.stringify(initFilter) !== JSON.stringify(filterData) ||
+ JSON.stringify(initSort) !== JSON.stringify(sortData)
+ ) {
+ if (!toast.isActive("keep_data", "datatable")) {
+ toast(
+ ,
+ {
+ containerId: "datatable",
+ toastId: "keep_data",
+ className: "filter-toast",
+ position: "bottom-left",
+ draggable: true,
+ autoClose: false,
+ }
+ );
+ } else {
+ toast.update("keep_data", {
+ containerId: "datatable",
+ toastId: "keep_data",
+ render: (
+
+ ),
+ });
+ }
+ } else {
+ toast.dismiss({ containerId: "datatable" });
+ }
}, [filterData, sortData]);
+ if (!isInitStates) return null;
+
return (
-
+
{children}
);
};
-export default DataTableProvider;
\ No newline at end of file
+export default DataTableProvider;
diff --git a/src/lib/contexts/tableSetting.jsx b/src/lib/contexts/tableSetting.jsx
index abc2ad7..8b05828 100644
--- a/src/lib/contexts/tableSetting.jsx
+++ b/src/lib/contexts/tableSetting.jsx
@@ -1,26 +1,26 @@
-'use client'
-import {createContext, useCallback, useEffect, useState} from "react";
+"use client";
+import { createContext, useCallback, useEffect, useState } from "react";
export const TableSettingContext = createContext();
-export const TableSettingProvider = ({children}) => {
+export const TableSettingProvider = ({ children }) => {
const [settingStore, setSettingStore] = useState({});
useEffect(() => {
- const _localStorage = localStorage.getItem("_setting-app")
+ const _localStorage = localStorage.getItem("_setting-app");
if (_localStorage) {
- setSettingStore(JSON.parse(_localStorage))
+ setSettingStore(JSON.parse(_localStorage));
}
}, []);
const hideAction = useCallback((user_id, page_name, table_name, settingValue, columns) => {
updateSettingStorage(user_id, page_name, table_name, "hides", settingValue, columns);
- }, [])
+ }, []);
const sortAction = useCallback((user_id, page_name, table_name, settingValue, columns) => {
updateSettingStorage(user_id, page_name, table_name, "sorts", settingValue, columns);
- }, [])
+ }, []);
const filterAction = (user_id, page_name, table_name, settingValue, columns) => {
updateSettingStorage(user_id, page_name, table_name, "filters", settingValue, columns);
- }
+ };
const updateSettingStorage = (user_id, page_name, table_name, settingType, settingValue, columns) => {
const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {};
const userSettings = prevLocalStorage[user_id] || {};
@@ -30,7 +30,7 @@ export const TableSettingProvider = ({children}) => {
if (settingType === "sorts" || settingType === "filters") {
newSettings = [...settingValue];
} else {
- newSettings = {...tableSettings[settingType] || {}, ...settingValue};
+ newSettings = { ...(tableSettings[settingType] || {}), ...settingValue };
}
const updatedLocalStorage = {
...prevLocalStorage,
@@ -40,18 +40,21 @@ export const TableSettingProvider = ({children}) => {
...pageSettings,
[table_name]: {
...tableSettings,
- [settingType]: Array.isArray(settingValue) ? [...newSettings] : {...newSettings},
- summary: SummaryTextMessage({
- ...tableSettings,
- [settingType]: Array.isArray(settingValue) ? [...newSettings] : {...newSettings},
- }, columns)
+ [settingType]: Array.isArray(settingValue) ? [...newSettings] : { ...newSettings },
+ summary: SummaryTextMessage(
+ {
+ ...tableSettings,
+ [settingType]: Array.isArray(settingValue) ? [...newSettings] : { ...newSettings },
+ },
+ columns
+ ),
},
},
},
};
localStorage.setItem("_setting-app", JSON.stringify(updatedLocalStorage));
setSettingStore(updatedLocalStorage);
- }
+ };
const refactorAction = (user_id, page_name, table_name) => {
const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {};
const userSettings = prevLocalStorage[user_id] || {};
@@ -68,7 +71,7 @@ export const TableSettingProvider = ({children}) => {
};
localStorage.setItem("_setting-app", JSON.stringify(refactorData));
setSettingStore(refactorData);
- }
+ };
const SummaryTextMessage = (values, columns) => {
let SummaryText = "";
let HideText = "";
@@ -76,38 +79,32 @@ export const TableSettingProvider = ({children}) => {
let SortText = "";
if (values.sorts && values.sorts.length > 0) {
- const _list = []
+ const _list = [];
for (const sort of values.sorts) {
- const _column = columns.find(column => column.id == sort.id)
- if (_column)
- _list.push(`${_column.header}` + `(${sort.desc ? "نزولی" : "صعودی"})`)
+ const _column = columns.find((column) => column.id == sort.id);
+ if (_column) _list.push(`${_column.header}` + `(${sort.desc ? "نزولی" : "صعودی"})`);
}
- if (_list.length > 0)
- SortText = " مرتب شده بر اساس : " + _list.join(", ")
+ if (_list.length > 0) SortText = " مرتب شده بر اساس : " + _list.join(", ");
}
if (values.filters && values.filters.length > 0) {
- const _list = []
+ const _list = [];
for (const filter of values.filters) {
- const _column = columns.find(column => column.id == filter.id)
- if (_column)
- _list.push(`${_column.header}`)
+ const _column = columns.find((column) => column.id == filter.id);
+ if (_column) _list.push(`${_column.header}`);
}
- if (_list.length > 0)
- FilterText = " فیلتر شده بر اساس : " + _list.join(", ")
+ if (_list.length > 0) FilterText = " فیلتر شده بر اساس : " + _list.join(", ");
}
if (values.hides) {
- const hidesArray = Object.entries(values.hides).map((e) => ({id: e[0], value: e[1]}))
+ const hidesArray = Object.entries(values.hides).map((e) => ({ id: e[0], value: e[1] }));
if (hidesArray.length > 0) {
- const _list = []
+ const _list = [];
for (const hide of hidesArray) {
- if (hide.value) continue
- const _column = columns.find(c => c.id == hide.id)
- if (_column)
- _list.push(_column.header)
+ if (hide.value) continue;
+ const _column = columns.find((c) => c.id == hide.id);
+ if (_column) _list.push(_column.header);
}
- if (_list.length > 0)
- HideText = "ستون های مخفی شده : " + _list.join(", ");
+ if (_list.length > 0) HideText = "ستون های مخفی شده : " + _list.join(", ");
}
}
@@ -128,7 +125,7 @@ export const TableSettingProvider = ({children}) => {
}
}
if (FilterText) {
- SummaryText += FilterText
+ SummaryText += FilterText;
}
}
@@ -136,9 +133,8 @@ export const TableSettingProvider = ({children}) => {
};
return (
-
+
{children}
);
-};
\ No newline at end of file
+};
diff --git a/src/lib/hooks/useDataTable.jsx b/src/lib/hooks/useDataTable.jsx
index a38f648..e2feecb 100644
--- a/src/lib/hooks/useDataTable.jsx
+++ b/src/lib/hooks/useDataTable.jsx
@@ -1,9 +1,9 @@
-import {useContext} from "react";
-import {DataTableContext} from "@/lib/contexts/DataTable";
+import { useContext } from "react";
+import { DataTableContext } from "@/lib/contexts/DataTable";
const useTableSetting = () => {
- const {filterData, setFilterData, sortData, setSortData} = useContext(DataTableContext);
- return {filterData, setFilterData, sortData, setSortData};
+ const { filterData, setFilterData, sortData, setSortData } = useContext(DataTableContext);
+ return { filterData, setFilterData, sortData, setSortData };
};
export default useTableSetting;
diff --git a/src/lib/hooks/useTableSetting.jsx b/src/lib/hooks/useTableSetting.jsx
index 7617655..6588446 100644
--- a/src/lib/hooks/useTableSetting.jsx
+++ b/src/lib/hooks/useTableSetting.jsx
@@ -1,10 +1,9 @@
-import {useContext} from "react";
-import {TableSettingContext} from "../contexts/tableSetting";
+import { useContext } from "react";
+import { TableSettingContext } from "../contexts/tableSetting";
const useTableSetting = () => {
- const {settingStore, hideAction, sortAction, filterAction, refactorAction} =
- useContext(TableSettingContext);
- return {settingStore, hideAction, sortAction, filterAction, refactorAction};
+ const { settingStore, hideAction, sortAction, filterAction, refactorAction } = useContext(TableSettingContext);
+ return { settingStore, hideAction, sortAction, filterAction, refactorAction };
};
export default useTableSetting;
|