complete sorting and filtering datatable and working with local storage for caching data

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 120,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "endOfLine": "crlf"
+}

editorconfig

@@ -1,485 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-end_of_line = crlf
-indent_size = 4
-indent_style = space
-insert_final_newline = false
-max_line_length = 120
-tab_width = 4
-ij_continuation_indent_size = 4
-ij_formatter_off_tag = @formatter:off
-ij_formatter_on_tag = @formatter:on
-ij_formatter_tags_enabled = true
-ij_smart_tabs = false
-ij_visual_guides = none
-ij_wrap_on_typing = false
-
-[*.css]
-ij_css_align_closing_brace_with_properties = false
-ij_css_blank_lines_around_nested_selector = 1
-ij_css_blank_lines_between_blocks = 1
-ij_css_block_comment_add_space = false
-ij_css_brace_placement = end_of_line
-ij_css_enforce_quotes_on_format = false
-ij_css_hex_color_long_format = false
-ij_css_hex_color_lower_case = false
-ij_css_hex_color_short_format = false
-ij_css_hex_color_upper_case = false
-ij_css_keep_blank_lines_in_code = 2
-ij_css_keep_indents_on_empty_lines = false
-ij_css_keep_single_line_blocks = false
-ij_css_properties_order = font, font-family, font-size, font-weight, font-style, font-variant, font-size-adjust, font-stretch, line-height, position, z-index, top, right, bottom, left, display, visibility, float, clear, overflow, overflow-x, overflow-y, clip, zoom, align-content, align-items, align-self, flex, flex-flow, flex-basis, flex-direction, flex-grow, flex-shrink, flex-wrap, justify-content, order, box-sizing, width, min-width, max-width, height, min-height, max-height, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, table-layout, empty-cells, caption-side, border-spacing, border-collapse, list-style, list-style-position, list-style-type, list-style-image, content, quotes, counter-reset, counter-increment, resize, cursor, user-select, nav-index, nav-up, nav-right, nav-down, nav-left, transition, transition-delay, transition-timing-function, transition-duration, transition-property, transform, transform-origin, animation, animation-name, animation-duration, animation-play-state, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, text-align, text-align-last, vertical-align, white-space, text-decoration, text-emphasis, text-emphasis-color, text-emphasis-style, text-emphasis-position, text-indent, text-justify, letter-spacing, word-spacing, text-outline, text-transform, text-wrap, text-overflow, text-overflow-ellipsis, text-overflow-mode, word-wrap, word-break, tab-size, hyphens, pointer-events, opacity, color, border, border-width, border-style, border-color, border-top, border-top-width, border-top-style, border-top-color, border-right, border-right-width, border-right-style, border-right-color, border-bottom, border-bottom-width, border-bottom-style, border-bottom-color, border-left, border-left-width, border-left-style, border-left-color, border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat, outline, outline-width, outline-style, outline-color, outline-offset, background, background-color, background-image, background-repeat, background-attachment, background-position, background-position-x, background-position-y, background-clip, background-origin, background-size, box-decoration-break, box-shadow, text-shadow
-ij_css_space_after_colon = true
-ij_css_space_before_opening_brace = true
-ij_css_use_double_quotes = true
-ij_css_value_alignment = do_not_align
-
-[*.sass]
-indent_size = 2
-ij_sass_align_closing_brace_with_properties = false
-ij_sass_blank_lines_around_nested_selector = 1
-ij_sass_blank_lines_between_blocks = 1
-ij_sass_brace_placement = 0
-ij_sass_enforce_quotes_on_format = false
-ij_sass_hex_color_long_format = false
-ij_sass_hex_color_lower_case = false
-ij_sass_hex_color_short_format = false
-ij_sass_hex_color_upper_case = false
-ij_sass_keep_blank_lines_in_code = 2
-ij_sass_keep_indents_on_empty_lines = false
-ij_sass_keep_single_line_blocks = false
-ij_sass_line_comment_add_space = false
-ij_sass_line_comment_at_first_column = false
-ij_sass_properties_order = font, font-family, font-size, font-weight, font-style, font-variant, font-size-adjust, font-stretch, line-height, position, z-index, top, right, bottom, left, display, visibility, float, clear, overflow, overflow-x, overflow-y, clip, zoom, align-content, align-items, align-self, flex, flex-flow, flex-basis, flex-direction, flex-grow, flex-shrink, flex-wrap, justify-content, order, box-sizing, width, min-width, max-width, height, min-height, max-height, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, table-layout, empty-cells, caption-side, border-spacing, border-collapse, list-style, list-style-position, list-style-type, list-style-image, content, quotes, counter-reset, counter-increment, resize, cursor, user-select, nav-index, nav-up, nav-right, nav-down, nav-left, transition, transition-delay, transition-timing-function, transition-duration, transition-property, transform, transform-origin, animation, animation-name, animation-duration, animation-play-state, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, text-align, text-align-last, vertical-align, white-space, text-decoration, text-emphasis, text-emphasis-color, text-emphasis-style, text-emphasis-position, text-indent, text-justify, letter-spacing, word-spacing, text-outline, text-transform, text-wrap, text-overflow, text-overflow-ellipsis, text-overflow-mode, word-wrap, word-break, tab-size, hyphens, pointer-events, opacity, color, border, border-width, border-style, border-color, border-top, border-top-width, border-top-style, border-top-color, border-right, border-right-width, border-right-style, border-right-color, border-bottom, border-bottom-width, border-bottom-style, border-bottom-color, border-left, border-left-width, border-left-style, border-left-color, border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat, outline, outline-width, outline-style, outline-color, outline-offset, background, background-color, background-image, background-repeat, background-attachment, background-position, background-position-x, background-position-y, background-clip, background-origin, background-size, box-decoration-break, box-shadow, text-shadow
-ij_sass_space_after_colon = true
-ij_sass_space_before_opening_brace = true
-ij_sass_use_double_quotes = true
-ij_sass_value_alignment = 0
-
-[*.scss]
-indent_size = 2
-ij_scss_align_closing_brace_with_properties = false
-ij_scss_blank_lines_around_nested_selector = 1
-ij_scss_blank_lines_between_blocks = 1
-ij_scss_block_comment_add_space = false
-ij_scss_brace_placement = 0
-ij_scss_enforce_quotes_on_format = false
-ij_scss_hex_color_long_format = false
-ij_scss_hex_color_lower_case = false
-ij_scss_hex_color_short_format = false
-ij_scss_hex_color_upper_case = false
-ij_scss_keep_blank_lines_in_code = 2
-ij_scss_keep_indents_on_empty_lines = false
-ij_scss_keep_single_line_blocks = false
-ij_scss_line_comment_add_space = false
-ij_scss_line_comment_at_first_column = false
-ij_scss_properties_order = font, font-family, font-size, font-weight, font-style, font-variant, font-size-adjust, font-stretch, line-height, position, z-index, top, right, bottom, left, display, visibility, float, clear, overflow, overflow-x, overflow-y, clip, zoom, align-content, align-items, align-self, flex, flex-flow, flex-basis, flex-direction, flex-grow, flex-shrink, flex-wrap, justify-content, order, box-sizing, width, min-width, max-width, height, min-height, max-height, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, table-layout, empty-cells, caption-side, border-spacing, border-collapse, list-style, list-style-position, list-style-type, list-style-image, content, quotes, counter-reset, counter-increment, resize, cursor, user-select, nav-index, nav-up, nav-right, nav-down, nav-left, transition, transition-delay, transition-timing-function, transition-duration, transition-property, transform, transform-origin, animation, animation-name, animation-duration, animation-play-state, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, text-align, text-align-last, vertical-align, white-space, text-decoration, text-emphasis, text-emphasis-color, text-emphasis-style, text-emphasis-position, text-indent, text-justify, letter-spacing, word-spacing, text-outline, text-transform, text-wrap, text-overflow, text-overflow-ellipsis, text-overflow-mode, word-wrap, word-break, tab-size, hyphens, pointer-events, opacity, color, border, border-width, border-style, border-color, border-top, border-top-width, border-top-style, border-top-color, border-right, border-right-width, border-right-style, border-right-color, border-bottom, border-bottom-width, border-bottom-style, border-bottom-color, border-left, border-left-width, border-left-style, border-left-color, border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat, outline, outline-width, outline-style, outline-color, outline-offset, background, background-color, background-image, background-repeat, background-attachment, background-position, background-position-x, background-position-y, background-clip, background-origin, background-size, box-decoration-break, box-shadow, text-shadow
-ij_scss_space_after_colon = true
-ij_scss_space_before_opening_brace = true
-ij_scss_use_double_quotes = true
-ij_scss_value_alignment = 0
-
-[{*.ats,*.cts,*.mts,*.ts}]
-ij_continuation_indent_size = 4
-ij_typescript_align_imports = false
-ij_typescript_align_multiline_array_initializer_expression = false
-ij_typescript_align_multiline_binary_operation = false
-ij_typescript_align_multiline_chained_methods = false
-ij_typescript_align_multiline_extends_list = false
-ij_typescript_align_multiline_for = true
-ij_typescript_align_multiline_parameters = true
-ij_typescript_align_multiline_parameters_in_calls = false
-ij_typescript_align_multiline_ternary_operation = false
-ij_typescript_align_object_properties = 0
-ij_typescript_align_union_types = false
-ij_typescript_align_var_statements = 0
-ij_typescript_array_initializer_new_line_after_left_brace = false
-ij_typescript_array_initializer_right_brace_on_new_line = false
-ij_typescript_array_initializer_wrap = off
-ij_typescript_assignment_wrap = off
-ij_typescript_binary_operation_sign_on_next_line = false
-ij_typescript_binary_operation_wrap = off
-ij_typescript_blacklist_imports = rxjs/Rx, node_modules/**, **/node_modules/**, @angular/material, @angular/material/typings/**
-ij_typescript_blank_lines_after_imports = 1
-ij_typescript_blank_lines_around_class = 1
-ij_typescript_blank_lines_around_field = 0
-ij_typescript_blank_lines_around_field_in_interface = 0
-ij_typescript_blank_lines_around_function = 1
-ij_typescript_blank_lines_around_method = 1
-ij_typescript_blank_lines_around_method_in_interface = 1
-ij_typescript_block_brace_style = end_of_line
-ij_typescript_block_comment_add_space = false
-ij_typescript_block_comment_at_first_column = true
-ij_typescript_call_parameters_new_line_after_left_paren = false
-ij_typescript_call_parameters_right_paren_on_new_line = false
-ij_typescript_call_parameters_wrap = off
-ij_typescript_catch_on_new_line = false
-ij_typescript_chained_call_dot_on_new_line = true
-ij_typescript_class_brace_style = end_of_line
-ij_typescript_comma_on_new_line = false
-ij_typescript_do_while_brace_force = never
-ij_typescript_else_on_new_line = false
-ij_typescript_enforce_trailing_comma = keep
-ij_typescript_enum_constants_wrap = on_every_item
-ij_typescript_extends_keyword_wrap = off
-ij_typescript_extends_list_wrap = off
-ij_typescript_field_prefix = _
-ij_typescript_file_name_style = relaxed
-ij_typescript_finally_on_new_line = false
-ij_typescript_for_brace_force = never
-ij_typescript_for_statement_new_line_after_left_paren = false
-ij_typescript_for_statement_right_paren_on_new_line = false
-ij_typescript_for_statement_wrap = off
-ij_typescript_force_quote_style = false
-ij_typescript_force_semicolon_style = false
-ij_typescript_function_expression_brace_style = end_of_line
-ij_typescript_if_brace_force = never
-ij_typescript_import_merge_members = global
-ij_typescript_import_prefer_absolute_path = global
-ij_typescript_import_sort_members = true
-ij_typescript_import_sort_module_name = false
-ij_typescript_import_use_node_resolution = true
-ij_typescript_imports_wrap = on_every_item
-ij_typescript_indent_case_from_switch = true
-ij_typescript_indent_chained_calls = true
-ij_typescript_indent_package_children = 0
-ij_typescript_jsdoc_include_types = false
-ij_typescript_jsx_attribute_value = braces
-ij_typescript_keep_blank_lines_in_code = 2
-ij_typescript_keep_first_column_comment = true
-ij_typescript_keep_indents_on_empty_lines = false
-ij_typescript_keep_line_breaks = true
-ij_typescript_keep_simple_blocks_in_one_line = false
-ij_typescript_keep_simple_methods_in_one_line = false
-ij_typescript_line_comment_add_space = true
-ij_typescript_line_comment_at_first_column = false
-ij_typescript_method_brace_style = end_of_line
-ij_typescript_method_call_chain_wrap = off
-ij_typescript_method_parameters_new_line_after_left_paren = false
-ij_typescript_method_parameters_right_paren_on_new_line = false
-ij_typescript_method_parameters_wrap = off
-ij_typescript_object_literal_wrap = on_every_item
-ij_typescript_object_types_wrap = on_every_item
-ij_typescript_parentheses_expression_new_line_after_left_paren = false
-ij_typescript_parentheses_expression_right_paren_on_new_line = false
-ij_typescript_place_assignment_sign_on_next_line = false
-ij_typescript_prefer_as_type_cast = false
-ij_typescript_prefer_explicit_types_function_expression_returns = false
-ij_typescript_prefer_explicit_types_function_returns = false
-ij_typescript_prefer_explicit_types_vars_fields = false
-ij_typescript_prefer_parameters_wrap = false
-ij_typescript_reformat_c_style_comments = false
-ij_typescript_space_after_colon = true
-ij_typescript_space_after_comma = true
-ij_typescript_space_after_dots_in_rest_parameter = false
-ij_typescript_space_after_generator_mult = true
-ij_typescript_space_after_property_colon = true
-ij_typescript_space_after_quest = true
-ij_typescript_space_after_type_colon = true
-ij_typescript_space_after_unary_not = false
-ij_typescript_space_before_async_arrow_lparen = true
-ij_typescript_space_before_catch_keyword = true
-ij_typescript_space_before_catch_left_brace = true
-ij_typescript_space_before_catch_parentheses = true
-ij_typescript_space_before_class_lbrace = true
-ij_typescript_space_before_class_left_brace = true
-ij_typescript_space_before_colon = true
-ij_typescript_space_before_comma = false
-ij_typescript_space_before_do_left_brace = true
-ij_typescript_space_before_else_keyword = true
-ij_typescript_space_before_else_left_brace = true
-ij_typescript_space_before_finally_keyword = true
-ij_typescript_space_before_finally_left_brace = true
-ij_typescript_space_before_for_left_brace = true
-ij_typescript_space_before_for_parentheses = true
-ij_typescript_space_before_for_semicolon = false
-ij_typescript_space_before_function_left_parenth = true
-ij_typescript_space_before_generator_mult = false
-ij_typescript_space_before_if_left_brace = true
-ij_typescript_space_before_if_parentheses = true
-ij_typescript_space_before_method_call_parentheses = false
-ij_typescript_space_before_method_left_brace = true
-ij_typescript_space_before_method_parentheses = false
-ij_typescript_space_before_property_colon = false
-ij_typescript_space_before_quest = true
-ij_typescript_space_before_switch_left_brace = true
-ij_typescript_space_before_switch_parentheses = true
-ij_typescript_space_before_try_left_brace = true
-ij_typescript_space_before_type_colon = false
-ij_typescript_space_before_unary_not = false
-ij_typescript_space_before_while_keyword = true
-ij_typescript_space_before_while_left_brace = true
-ij_typescript_space_before_while_parentheses = true
-ij_typescript_spaces_around_additive_operators = true
-ij_typescript_spaces_around_arrow_function_operator = true
-ij_typescript_spaces_around_assignment_operators = true
-ij_typescript_spaces_around_bitwise_operators = true
-ij_typescript_spaces_around_equality_operators = true
-ij_typescript_spaces_around_logical_operators = true
-ij_typescript_spaces_around_multiplicative_operators = true
-ij_typescript_spaces_around_relational_operators = true
-ij_typescript_spaces_around_shift_operators = true
-ij_typescript_spaces_around_unary_operator = false
-ij_typescript_spaces_within_array_initializer_brackets = false
-ij_typescript_spaces_within_brackets = false
-ij_typescript_spaces_within_catch_parentheses = false
-ij_typescript_spaces_within_for_parentheses = false
-ij_typescript_spaces_within_if_parentheses = false
-ij_typescript_spaces_within_imports = false
-ij_typescript_spaces_within_interpolation_expressions = false
-ij_typescript_spaces_within_method_call_parentheses = false
-ij_typescript_spaces_within_method_parentheses = false
-ij_typescript_spaces_within_object_literal_braces = false
-ij_typescript_spaces_within_object_type_braces = true
-ij_typescript_spaces_within_parentheses = false
-ij_typescript_spaces_within_switch_parentheses = false
-ij_typescript_spaces_within_type_assertion = false
-ij_typescript_spaces_within_union_types = true
-ij_typescript_spaces_within_while_parentheses = false
-ij_typescript_special_else_if_treatment = true
-ij_typescript_ternary_operation_signs_on_next_line = false
-ij_typescript_ternary_operation_wrap = off
-ij_typescript_union_types_wrap = on_every_item
-ij_typescript_use_chained_calls_group_indents = false
-ij_typescript_use_double_quotes = true
-ij_typescript_use_explicit_js_extension = auto
-ij_typescript_use_path_mapping = always
-ij_typescript_use_public_modifier = false
-ij_typescript_use_semicolon_after_statement = true
-ij_typescript_var_declaration_wrap = normal
-ij_typescript_while_brace_force = never
-ij_typescript_while_on_new_line = false
-ij_typescript_wrap_comments = false
-
-[{*.cjs,*.js}]
-ij_continuation_indent_size = 4
-ij_javascript_align_imports = false
-ij_javascript_align_multiline_array_initializer_expression = false
-ij_javascript_align_multiline_binary_operation = false
-ij_javascript_align_multiline_chained_methods = false
-ij_javascript_align_multiline_extends_list = false
-ij_javascript_align_multiline_for = true
-ij_javascript_align_multiline_parameters = true
-ij_javascript_align_multiline_parameters_in_calls = false
-ij_javascript_align_multiline_ternary_operation = false
-ij_javascript_align_object_properties = 0
-ij_javascript_align_union_types = false
-ij_javascript_align_var_statements = 0
-ij_javascript_array_initializer_new_line_after_left_brace = false
-ij_javascript_array_initializer_right_brace_on_new_line = false
-ij_javascript_array_initializer_wrap = off
-ij_javascript_assignment_wrap = off
-ij_javascript_binary_operation_sign_on_next_line = false
-ij_javascript_binary_operation_wrap = off
-ij_javascript_blacklist_imports = rxjs/Rx, node_modules/**, **/node_modules/**, @angular/material, @angular/material/typings/**
-ij_javascript_blank_lines_after_imports = 1
-ij_javascript_blank_lines_around_class = 1
-ij_javascript_blank_lines_around_field = 0
-ij_javascript_blank_lines_around_function = 1
-ij_javascript_blank_lines_around_method = 1
-ij_javascript_block_brace_style = end_of_line
-ij_javascript_block_comment_add_space = false
-ij_javascript_block_comment_at_first_column = true
-ij_javascript_call_parameters_new_line_after_left_paren = false
-ij_javascript_call_parameters_right_paren_on_new_line = false
-ij_javascript_call_parameters_wrap = off
-ij_javascript_catch_on_new_line = false
-ij_javascript_chained_call_dot_on_new_line = true
-ij_javascript_class_brace_style = end_of_line
-ij_javascript_comma_on_new_line = false
-ij_javascript_do_while_brace_force = never
-ij_javascript_else_on_new_line = false
-ij_javascript_enforce_trailing_comma = keep
-ij_javascript_extends_keyword_wrap = off
-ij_javascript_extends_list_wrap = off
-ij_javascript_field_prefix = _
-ij_javascript_file_name_style = relaxed
-ij_javascript_finally_on_new_line = false
-ij_javascript_for_brace_force = never
-ij_javascript_for_statement_new_line_after_left_paren = false
-ij_javascript_for_statement_right_paren_on_new_line = false
-ij_javascript_for_statement_wrap = off
-ij_javascript_force_quote_style = false
-ij_javascript_force_semicolon_style = false
-ij_javascript_function_expression_brace_style = end_of_line
-ij_javascript_if_brace_force = never
-ij_javascript_import_merge_members = global
-ij_javascript_import_prefer_absolute_path = global
-ij_javascript_import_sort_members = true
-ij_javascript_import_sort_module_name = false
-ij_javascript_import_use_node_resolution = true
-ij_javascript_imports_wrap = on_every_item
-ij_javascript_indent_case_from_switch = true
-ij_javascript_indent_chained_calls = true
-ij_javascript_indent_package_children = 0
-ij_javascript_jsx_attribute_value = braces
-ij_javascript_keep_blank_lines_in_code = 2
-ij_javascript_keep_first_column_comment = true
-ij_javascript_keep_indents_on_empty_lines = false
-ij_javascript_keep_line_breaks = true
-ij_javascript_keep_simple_blocks_in_one_line = false
-ij_javascript_keep_simple_methods_in_one_line = false
-ij_javascript_line_comment_add_space = true
-ij_javascript_line_comment_at_first_column = false
-ij_javascript_method_brace_style = end_of_line
-ij_javascript_method_call_chain_wrap = off
-ij_javascript_method_parameters_new_line_after_left_paren = false
-ij_javascript_method_parameters_right_paren_on_new_line = false
-ij_javascript_method_parameters_wrap = off
-ij_javascript_object_literal_wrap = on_every_item
-ij_javascript_object_types_wrap = on_every_item
-ij_javascript_parentheses_expression_new_line_after_left_paren = false
-ij_javascript_parentheses_expression_right_paren_on_new_line = false
-ij_javascript_place_assignment_sign_on_next_line = false
-ij_javascript_prefer_as_type_cast = false
-ij_javascript_prefer_explicit_types_function_expression_returns = false
-ij_javascript_prefer_explicit_types_function_returns = false
-ij_javascript_prefer_explicit_types_vars_fields = false
-ij_javascript_prefer_parameters_wrap = false
-ij_javascript_reformat_c_style_comments = false
-ij_javascript_space_after_colon = true
-ij_javascript_space_after_comma = true
-ij_javascript_space_after_dots_in_rest_parameter = false
-ij_javascript_space_after_generator_mult = true
-ij_javascript_space_after_property_colon = true
-ij_javascript_space_after_quest = true
-ij_javascript_space_after_type_colon = true
-ij_javascript_space_after_unary_not = false
-ij_javascript_space_before_async_arrow_lparen = true
-ij_javascript_space_before_catch_keyword = true
-ij_javascript_space_before_catch_left_brace = true
-ij_javascript_space_before_catch_parentheses = true
-ij_javascript_space_before_class_lbrace = true
-ij_javascript_space_before_class_left_brace = true
-ij_javascript_space_before_colon = true
-ij_javascript_space_before_comma = false
-ij_javascript_space_before_do_left_brace = true
-ij_javascript_space_before_else_keyword = true
-ij_javascript_space_before_else_left_brace = true
-ij_javascript_space_before_finally_keyword = true
-ij_javascript_space_before_finally_left_brace = true
-ij_javascript_space_before_for_left_brace = true
-ij_javascript_space_before_for_parentheses = true
-ij_javascript_space_before_for_semicolon = false
-ij_javascript_space_before_function_left_parenth = true
-ij_javascript_space_before_generator_mult = false
-ij_javascript_space_before_if_left_brace = true
-ij_javascript_space_before_if_parentheses = true
-ij_javascript_space_before_method_call_parentheses = false
-ij_javascript_space_before_method_left_brace = true
-ij_javascript_space_before_method_parentheses = false
-ij_javascript_space_before_property_colon = false
-ij_javascript_space_before_quest = true
-ij_javascript_space_before_switch_left_brace = true
-ij_javascript_space_before_switch_parentheses = true
-ij_javascript_space_before_try_left_brace = true
-ij_javascript_space_before_type_colon = false
-ij_javascript_space_before_unary_not = false
-ij_javascript_space_before_while_keyword = true
-ij_javascript_space_before_while_left_brace = true
-ij_javascript_space_before_while_parentheses = true
-ij_javascript_spaces_around_additive_operators = true
-ij_javascript_spaces_around_arrow_function_operator = true
-ij_javascript_spaces_around_assignment_operators = true
-ij_javascript_spaces_around_bitwise_operators = true
-ij_javascript_spaces_around_equality_operators = true
-ij_javascript_spaces_around_logical_operators = true
-ij_javascript_spaces_around_multiplicative_operators = true
-ij_javascript_spaces_around_relational_operators = true
-ij_javascript_spaces_around_shift_operators = true
-ij_javascript_spaces_around_unary_operator = false
-ij_javascript_spaces_within_array_initializer_brackets = false
-ij_javascript_spaces_within_brackets = false
-ij_javascript_spaces_within_catch_parentheses = false
-ij_javascript_spaces_within_for_parentheses = false
-ij_javascript_spaces_within_if_parentheses = false
-ij_javascript_spaces_within_imports = false
-ij_javascript_spaces_within_interpolation_expressions = false
-ij_javascript_spaces_within_method_call_parentheses = false
-ij_javascript_spaces_within_method_parentheses = false
-ij_javascript_spaces_within_object_literal_braces = false
-ij_javascript_spaces_within_object_type_braces = true
-ij_javascript_spaces_within_parentheses = false
-ij_javascript_spaces_within_switch_parentheses = false
-ij_javascript_spaces_within_type_assertion = false
-ij_javascript_spaces_within_union_types = true
-ij_javascript_spaces_within_while_parentheses = false
-ij_javascript_special_else_if_treatment = true
-ij_javascript_ternary_operation_signs_on_next_line = false
-ij_javascript_ternary_operation_wrap = off
-ij_javascript_union_types_wrap = on_every_item
-ij_javascript_use_chained_calls_group_indents = false
-ij_javascript_use_double_quotes = true
-ij_javascript_use_explicit_js_extension = auto
-ij_javascript_use_path_mapping = always
-ij_javascript_use_public_modifier = false
-ij_javascript_use_semicolon_after_statement = true
-ij_javascript_var_declaration_wrap = normal
-ij_javascript_while_brace_force = never
-ij_javascript_while_on_new_line = false
-ij_javascript_wrap_comments = false
-
-[{*.har,*.jsb2,*.jsb3,*.json,.babelrc,.eslintrc,.prettierrc,.stylelintrc,bowerrc,jest.config}]
-indent_size = 2
-ij_json_array_wrapping = split_into_lines
-ij_json_keep_blank_lines_in_code = 0
-ij_json_keep_indents_on_empty_lines = false
-ij_json_keep_line_breaks = true
-ij_json_keep_trailing_comma = false
-ij_json_object_wrapping = split_into_lines
-ij_json_property_alignment = do_not_align
-ij_json_space_after_colon = true
-ij_json_space_after_comma = true
-ij_json_space_before_colon = false
-ij_json_space_before_comma = false
-ij_json_spaces_within_braces = false
-ij_json_spaces_within_brackets = false
-ij_json_wrap_long_lines = false
-
-[{*.htm,*.html,*.ng,*.sht,*.shtm,*.shtml}]
-ij_html_add_new_line_before_tags = body, div, p, form, h1, h2, h3
-ij_html_align_attributes = true
-ij_html_align_text = false
-ij_html_attribute_wrap = normal
-ij_html_block_comment_add_space = false
-ij_html_block_comment_at_first_column = true
-ij_html_do_not_align_children_of_min_lines = 0
-ij_html_do_not_break_if_inline_tags = title, h1, h2, h3, h4, h5, h6, p
-ij_html_do_not_indent_children_of_tags = html, body, thead, tbody, tfoot
-ij_html_enforce_quotes = false
-ij_html_inline_tags = a, abbr, acronym, b, basefont, bdo, big, br, cite, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var
-ij_html_keep_blank_lines = 2
-ij_html_keep_indents_on_empty_lines = false
-ij_html_keep_line_breaks = true
-ij_html_keep_line_breaks_in_text = true
-ij_html_keep_whitespaces = false
-ij_html_keep_whitespaces_inside = span, pre, textarea
-ij_html_line_comment_at_first_column = true
-ij_html_new_line_after_last_attribute = never
-ij_html_new_line_before_first_attribute = never
-ij_html_quote_style = double
-ij_html_remove_new_line_before_tags = br
-ij_html_space_after_tag_name = false
-ij_html_space_around_equality_in_attribute = false
-ij_html_space_inside_empty_tag = false
-ij_html_text_wrap = normal
-
-[{*.markdown,*.md}]
-ij_markdown_force_one_space_after_blockquote_symbol = true
-ij_markdown_force_one_space_after_header_symbol = true
-ij_markdown_force_one_space_after_list_bullet = true
-ij_markdown_force_one_space_between_words = true
-ij_markdown_format_tables = true
-ij_markdown_insert_quote_arrows_on_wrap = true
-ij_markdown_keep_indents_on_empty_lines = false
-ij_markdown_keep_line_breaks_inside_text_blocks = true
-ij_markdown_max_lines_around_block_elements = 1
-ij_markdown_max_lines_around_header = 1
-ij_markdown_max_lines_between_paragraphs = 1
-ij_markdown_min_lines_around_block_elements = 1
-ij_markdown_min_lines_around_header = 1
-ij_markdown_min_lines_between_paragraphs = 1
-ij_markdown_wrap_text_if_long = true
-ij_markdown_wrap_text_inside_blockquotes = true

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,html,css,scss}\""
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",
@@ -34,6 +35,7 @@
   },
   "devDependencies": {
     "eslint": "^8",
-    "eslint-config-next": "14.1.0"
+    "eslint-config-next": "14.1.0",
+    "prettier": "^3.3.2"
   }
 }

src/app/(withAuth)/dashboard/layout.js

@@ -1,11 +1,7 @@
-import 'react-toastify/dist/ReactToastify.css';
+import "react-toastify/dist/ReactToastify.css";
 
-const Layout = ({children}) => {
-    return (
-        <>
-            {children}
-        </>
-    )
-}
+const Layout = ({ children }) => {
+    return <>{children}</>;
+};
 
-export default Layout
+export default Layout;

src/app/(withAuth)/dashboard/page.js

@@ -1,7 +1,5 @@
 const Page = () => {
-    return (
-        <div>dashboard</div>
-    )
-}
+    return <div>dashboard</div>;
+};
 
-export default Page
+export default Page;

src/app/(withAuth)/dashboard/template.js

@@ -1,17 +1,17 @@
-import {Box, Stack} from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import HeaderWithLogo from "@/components/layouts/dashboard/headerWithLogo";
 import HeaderWithSidebar from "@/components/layouts/dashboard/headerWithSidebar";
-import 'react-toastify/dist/ReactToastify.css';
+import "react-toastify/dist/ReactToastify.css";
 
-const Template = ({children}) => {
-    return (<Stack>
-        <HeaderWithLogo/>
-        <Box>
-            <HeaderWithSidebar>
-                {children}
-            </HeaderWithSidebar>
-        </Box>
-    </Stack>)
-}
+const Template = ({ children }) => {
+    return (
+        <Stack>
+            <HeaderWithLogo />
+            <Box>
+                <HeaderWithSidebar>{children}</HeaderWithSidebar>
+            </Box>
+        </Stack>
+    );
+};
 
-export default Template
+export default Template;

src/app/layout.js

@@ -1,17 +1,15 @@
-import {TableSettingProvider} from "@/lib/contexts/tableSetting";
+import { TableSettingProvider } from "@/lib/contexts/tableSetting";
 
 export const metadata = {
-    title: 'سامانه جامع راهداری',
-}
+    title: "سامانه جامع راهداری",
+};
 
-export default function RootLayout({children}) {
+export default function RootLayout({ children }) {
     return (
-        <html lang="fa" dir={'rtl'}>
-        <body style={{height: '100vh'}}>
-        <TableSettingProvider>
-            {children}
-        </TableSettingProvider>
-        </body>
+        <html lang="fa" dir={"rtl"}>
+            <body style={{ height: "100vh" }}>
+                <TableSettingProvider>{children}</TableSettingProvider>
+            </body>
         </html>
-    )
+    );
 }

src/app/page.js

@@ -1,8 +1,8 @@
-'use client'
+"use client";
 import HomeComponent from "@/components/home";
 
 function Page() {
-    return <HomeComponent/>;
+    return <HomeComponent />;
 }
 
 export default Page;

src/app/template.js

@@ -1,21 +1,21 @@
 import cacheProviderRtl from "@/core/utils/cacheRtl";
-import {CssBaseline, ThemeProvider} from "@mui/material";
+import { CssBaseline, ThemeProvider } from "@mui/material";
 import theme from "@/core/utils/theme";
-import {AppRouterCacheProvider} from "@mui/material-nextjs/v14-appRouter";
-import 'react-toastify/dist/ReactToastify.css';
+import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
+import "react-toastify/dist/ReactToastify.css";
 import "^/global.scss";
-import {ToastContainer} from "react-toastify";
+import { ToastContainer } from "react-toastify";
 
-const Template = ({children}) => {
+const Template = ({ children }) => {
     return (
-        <AppRouterCacheProvider CacheProvider={cacheProviderRtl} options={{enableCssLayer: true}}>
+        <AppRouterCacheProvider CacheProvider={cacheProviderRtl} options={{ enableCssLayer: true }}>
             <ThemeProvider theme={theme}>
-                <CssBaseline/>
+                <CssBaseline />
                 {children}
-                <ToastContainer rtl containerId="datatable" closeButton={false}/>
+                <ToastContainer rtl containerId="datatable" closeButton={false} />
             </ThemeProvider>
         </AppRouterCacheProvider>
-    )
-}
+    );
+};
 
-export default Template
+export default Template;

src/components/home/Toolbar.jsx

@@ -1,22 +1,10 @@
-import {Button} from "@mui/material";
+import { Button } from "@mui/material";
 
-const Toolbar = ({columns}) => {
+const Toolbar = ({ columns }) => {
     return (
         <>
             <Button>add something</Button>
         </>
-    )
-}
-export default Toolbar
-
-
-
-
-
-
-
-
-
-
-
-
+    );
+};
+export default Toolbar;

src/components/home/index.jsx

@@ -1,149 +1,128 @@
-'use client'
+"use client";
 import DataTable from "@/core/components/DataTable";
-import {useMemo} from "react";
+import { useMemo } from "react";
 
 function HomeComponent() {
     const columns = useMemo(
         () => [
             {
-                accessorKey: 'fullname',
-                header: 'نام کامل',
+                accessorKey: "fullname",
+                header: "نام کامل",
                 id: "fullname",
                 columns: [
                     {
-                        accessorKey: 'name.firstName',
-                        header: 'نام',
+                        accessorKey: "name.firstName",
+                        header: "نام",
                         id: "firstName",
                         enableColumnFilter: true,
                         datatype: "text",
                         filterFn: "contains",
                         enableClickToCopy: true,
-                        columnFilterModeOptions: [
-                            "equals",
-                            "notEquals",
-                            "contains"
-                        ],
+                        columnFilterModeOptions: ["equals", "notEquals", "contains"],
                     },
                     {
-                        accessorKey: 'name.lastName',
-                        header: 'نام خانوادگی',
+                        accessorKey: "name.lastName",
+                        header: "نام خانوادگی",
                         id: "lastName",
                         enableColumnFilter: true,
                         datatype: "text",
                         filterFn: "equals",
-                        columnFilterModeOptions: [
-                            "equals",
-                            "notEquals",
-                            "contains"
-                        ],
+                        columnFilterModeOptions: ["equals", "notEquals", "contains"],
                     },
                 ],
             },
             {
-                accessorKey: 'address',
-                header: 'آدرس',
+                accessorKey: "address",
+                header: "آدرس",
                 id: "address",
                 enableColumnFilter: true,
                 datatype: "text",
                 filterFn: "notEquals",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
             },
             {
-                accessorKey: 'city',
-                header: 'شهر',
+                accessorKey: "city",
+                header: "شهر",
                 id: "city",
                 enableColumnFilter: true,
                 datatype: "text",
                 filterFn: "equals",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains",
-                    "lessThan",
-                    "greaterThan",
-                    "fuzzy"
-                ],
+                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "fuzzy"],
             },
             {
-                accessorKey: 'state',
-                header: 'وضعیت',
+                accessorKey: "state",
+                header: "وضعیت",
                 id: "state",
                 enableColumnFilter: true,
                 datatype: "text",
                 filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
             },
             {
-                accessorKey: 'price',
-                header: 'محدوده',
+                accessorKey: "price",
+                header: "محدوده",
                 id: "price",
                 enableColumnFilter: true,
                 datatype: "numeric",
                 filterFn: "equals",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                ],
+                columnFilterModeOptions: ["equals", "notEquals"],
             },
             {
-                accessorKey: 'created_at',
-                header: 'تاریخ ساخت',
+                accessorKey: "created_at",
+                header: "تاریخ ساخت",
                 id: "created_at",
                 enableColumnFilter: true,
                 datatype: "date",
                 filterFn: "between",
             },
             {
-                accessorKey: 'updated_at',
-                header: 'تاریخ بروزرسانی',
+                accessorKey: "updated_at",
+                header: "تاریخ بروزرسانی",
                 id: "updated_at",
                 enableColumnFilter: true,
                 datatype: "date",
                 filterFn: "equals",
             },
             {
-                accessorKey: 'company',
-                header: 'نام شرکت',
+                accessorKey: "company",
+                header: "نام شرکت",
                 id: "company",
                 enableColumnFilter: true,
                 datatype: "numeric",
                 filterFn: "equals",
                 columnSelectOption: [
-                    {value: 1, label: "وایتل"},
-                    {value: 2, label: "اسنپ"},
-                    {value: 3, label: "تپسی"}
+                    { value: 1, label: "وایتل" },
+                    { value: 2, label: "اسنپ" },
+                    { value: 3, label: "تپسی" },
                 ],
             },
             {
-                accessorKey: 'area',
-                header: 'منطقه',
+                accessorKey: "area",
+                header: "منطقه",
                 id: "area",
                 enableColumnFilter: true,
                 datatype: "array",
                 filterFn: "equals",
                 columnSelectOption: [
-                    {value: 1, label: "وایتل"},
-                    {value: 2, label: "اسنپ"},
-                    {value: 3, label: "تپسی"}
+                    { value: 1, label: "وایتل" },
+                    { value: 2, label: "اسنپ" },
+                    { value: 3, label: "تپسی" },
                 ],
             },
         ],
-        [],
+        []
     );
 
     return (
         <>
-            <DataTable columns={columns} table_url={"api"} user_id={0} page_name={'testPage'} table_name={'testTable'}/>
+            <DataTable
+                columns={columns}
+                table_url={"api"}
+                user_id={0}
+                page_name={"testPage"}
+                table_name={"testTable"}
+            />
         </>
-
     );
 }
 

src/components/layouts/dashboard/headerWithLogo/index.jsx

@@ -1,9 +1,11 @@
-import {Box, Stack} from "@mui/material";
+import { Box, Stack } from "@mui/material";
 
 const HeaderWithLogo = () => {
-    return (<Stack>
-        <Box>header1</Box>
-        <Box>header2</Box>
-    </Stack>)
-}
-export default HeaderWithLogo
+    return (
+        <Stack>
+            <Box>header1</Box>
+            <Box>header2</Box>
+        </Stack>
+    );
+};
+export default HeaderWithLogo;

src/components/layouts/dashboard/headerWithSidebar/index.jsx

@@ -1,43 +1,55 @@
-'use client'
-import {useState} from "react";
-import {Box, Drawer, IconButton, Paper, styled, Toolbar, Typography} from "@mui/material";
-import MuiAppBar from '@mui/material/AppBar';
-import MenuIcon from '@mui/icons-material/Menu';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+"use client";
+import { useState } from "react";
+import { Box, Drawer, IconButton, Paper, styled, Toolbar, Typography } from "@mui/material";
+import MuiAppBar from "@mui/material/AppBar";
+import MenuIcon from "@mui/icons-material/Menu";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import SidebarMenu from "@/core/components/SidebarMenu";
 
 const drawerWidth = 260;
 
-const Main = styled(Paper, {shouldForwardProp: (prop) => prop !== 'open'})(({theme, open}) => ({
-    flexGrow: 1, transition: theme.transitions.create('margin', {
-        easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen,
-    }), marginLeft: `-${drawerWidth}px`, ...(open && {
-        transition: theme.transitions.create('margin', {
-            easing: theme.transitions.easing.easeOut, duration: theme.transitions.duration.enteringScreen,
-        }), marginLeft: 0,
+const Main = styled(Paper, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
+    flexGrow: 1,
+    transition: theme.transitions.create("margin", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
     }),
-}),);
+    marginLeft: `-${drawerWidth}px`,
+    ...(open && {
+        transition: theme.transitions.create("margin", {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+        marginLeft: 0,
+    }),
+}));
 
 const AppBar = styled(MuiAppBar, {
-    shouldForwardProp: (prop) => prop !== 'open',
-})(({theme, open}) => ({
-    transition: theme.transitions.create(['margin', 'width'], {
-        easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen,
-    }), ...(open && {
+    shouldForwardProp: (prop) => prop !== "open",
+})(({ theme, open }) => ({
+    transition: theme.transitions.create(["margin", "width"], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+    }),
+    ...(open && {
         width: `calc(100% - ${drawerWidth}px)`,
         marginLeft: `${drawerWidth}px`,
-        transition: theme.transitions.create(['margin', 'width'], {
-            easing: theme.transitions.easing.easeOut, duration: theme.transitions.duration.enteringScreen,
+        transition: theme.transitions.create(["margin", "width"], {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
         }),
     }),
 }));
 
-const DrawerHeader = styled('div')(({theme}) => ({
-    display: 'flex', alignItems: 'center', padding: theme.spacing(0, 1), // necessary for content to be below app bar
-    ...theme.mixins.toolbar, justifyContent: 'flex-end',
+const DrawerHeader = styled("div")(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing(0, 1), // necessary for content to be below app bar
+    ...theme.mixins.toolbar,
+    justifyContent: "flex-end",
 }));
 
-const HeaderWithSidebar = ({children}) => {
+const HeaderWithSidebar = ({ children }) => {
     const [open, setOpen] = useState(false);
 
     const handleDrawerOpen = () => {
@@ -47,48 +59,52 @@ const HeaderWithSidebar = ({children}) => {
     const handleDrawerClose = () => {
         setOpen(false);
     };
-    return (<Box sx={{display: 'flex'}}>
-        <AppBar sx={{position: 'fixed', top: "unset"}} elevation={0} open={open}>
-            <Toolbar>
-                <IconButton
-                    color="inherit"
-                    aria-label="open drawer"
-                    onClick={handleDrawerOpen}
-                    edge="start"
-                    sx={{mr: 2, ...(open && {display: 'none'})}}
-                >
-                    <MenuIcon/>
-                </IconButton>
-                <Typography variant="h6" noWrap component="div">
-                    menu
-                </Typography>
-            </Toolbar>
-        </AppBar>
-        <Drawer
-            sx={{
-                width: drawerWidth, flexShrink: 0, '& .MuiDrawer-paper': {
+    return (
+        <Box sx={{ display: "flex" }}>
+            <AppBar sx={{ position: "fixed", top: "unset" }} elevation={0} open={open}>
+                <Toolbar>
+                    <IconButton
+                        color="inherit"
+                        aria-label="open drawer"
+                        onClick={handleDrawerOpen}
+                        edge="start"
+                        sx={{ mr: 2, ...(open && { display: "none" }) }}
+                    >
+                        <MenuIcon />
+                    </IconButton>
+                    <Typography variant="h6" noWrap component="div">
+                        menu
+                    </Typography>
+                </Toolbar>
+            </AppBar>
+            <Drawer
+                sx={{
                     width: drawerWidth,
-                    boxSizing: 'border-box',
-                    borderTop: 1,
-                    borderTopColor: 'divider',
-                    top: "unset"
-                },
-            }}
-            variant="persistent"
-            anchor="left"
-            open={open}
-        >
-            <DrawerHeader>
-                <IconButton onClick={handleDrawerClose}>
-                    <ChevronRightIcon/>
-                </IconButton>
-            </DrawerHeader>
-            <SidebarMenu />
-        </Drawer>
-        <Main elevation={0} open={open}>
-            <DrawerHeader/>
-            {children}
-        </Main>
-    </Box>)
-}
-export default HeaderWithSidebar
+                    flexShrink: 0,
+                    "& .MuiDrawer-paper": {
+                        width: drawerWidth,
+                        boxSizing: "border-box",
+                        borderTop: 1,
+                        borderTopColor: "divider",
+                        top: "unset",
+                    },
+                }}
+                variant="persistent"
+                anchor="left"
+                open={open}
+            >
+                <DrawerHeader>
+                    <IconButton onClick={handleDrawerClose}>
+                        <ChevronRightIcon />
+                    </IconButton>
+                </DrawerHeader>
+                <SidebarMenu />
+            </Drawer>
+            <Main elevation={0} open={open}>
+                <DrawerHeader />
+                {children}
+            </Main>
+        </Box>
+    );
+};
+export default HeaderWithSidebar;

src/core/components/DataTable/Main.js

@@ -1,88 +1,86 @@
 import DataTable_Paper from "./table/Paper";
-import {useMaterialReactTable} from "material-react-table";
-import {FA_DATATABLE_LOCALIZATION} from "./localization/fa/datatable";
+import { useMaterialReactTable } from "material-react-table";
+import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable";
 import useTableSetting from "@/lib/hooks/useTableSetting";
-import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
+import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects";
 import Toolbar from "@/components/home/Toolbar";
 import useDataTable from "@/lib/hooks/useDataTable";
-import {useMemo, useState} from "react";
-import {toast} from "react-toastify";
-import AskForKeepSort from "@/core/components/NotificationDesign/AskForKeepSort";
+import { useMemo, useState } from "react";
 
 const data = [
     {
         name: {
-            firstName: 'امین',
-            lastName: 'قاسمپور',
+            firstName: "امین",
+            lastName: "قاسمپور",
         },
-        address: 'فلان جا',
-        city: 'تهران',
-        state: 'بررسی شده',
-        price: '20',
-        updated_at: '2024/05/02',
-        company: 'همراه اول',
-        area: 'منطقه 5',
+        address: "فلان جا",
+        city: "تهران",
+        state: "بررسی شده",
+        price: "20",
+        updated_at: "2024/05/02",
+        company: "همراه اول",
+        area: "منطقه 5",
     },
     {
         name: {
-            firstName: 'امیر حسین',
-            lastName: 'محمودی',
+            firstName: "امیر حسین",
+            lastName: "محمودی",
         },
-        address: 'فلان جا',
-        city: 'تهران',
-        state: 'تکمیل شده',
-        price: '27',
-        updated_at: '2024/05/02',
-        company: 'وایتل',
-        area: 'منطقه 27',
+        address: "فلان جا",
+        city: "تهران",
+        state: "تکمیل شده",
+        price: "27",
+        updated_at: "2024/05/02",
+        company: "وایتل",
+        area: "منطقه 27",
     },
     {
         name: {
-            firstName: 'یاسمن',
-            lastName: 'علی اکبری',
+            firstName: "یاسمن",
+            lastName: "علی اکبری",
         },
-        address: 'فلان جا',
-        city: 'شیراز',
-        state: 'بررسی شده',
-        price: '32',
-        updated_at: '2024/05/02',
-        company: 'ایرانسل',
-        area: 'منطقه 23',
+        address: "فلان جا",
+        city: "شیراز",
+        state: "بررسی شده",
+        price: "32",
+        updated_at: "2024/05/02",
+        company: "ایرانسل",
+        area: "منطقه 23",
     },
     {
         name: {
-            firstName: 'حمیدرضا',
-            lastName: 'رنجبرپور',
+            firstName: "حمیدرضا",
+            lastName: "رنجبرپور",
         },
-        address: 'فلان جا',
-        city: 'اصفهان',
-        state: 'بررسی شده',
-        price: '45',
-        updated_at: '2024/05/02',
-        company: 'ایرانول',
-        area: 'منطقه 21',
+        address: "فلان جا",
+        city: "اصفهان",
+        state: "بررسی شده",
+        price: "45",
+        updated_at: "2024/05/02",
+        company: "ایرانول",
+        area: "منطقه 21",
     },
     {
         name: {
-            firstName: 'محمد',
-            lastName: 'جلالی',
+            firstName: "محمد",
+            lastName: "جلالی",
         },
-        address: 'فلان جا',
-        city: 'رشت',
-        state: 'درحال بررسی',
-        price: '8',
-        updated_at: '2024/05/02',
-        company: 'فیلیمو',
-        area: 'منطقه 8',
+        address: "فلان جا",
+        city: "رشت",
+        state: "درحال بررسی",
+        price: "8",
+        updated_at: "2024/05/02",
+        company: "فیلیمو",
+        area: "منطقه 8",
     },
 ];
 
 const DataTable_Main = (props) => {
-    const {filterData, sortData, setSortData} = useDataTable();
-    const {table_url, user_id, page_name, table_name, columns, initialStateProps} = props
-    const flatColumns = flattenArrayOfObjects(columns, 'columns')
-    const {settingStore, hideAction, sortAction} = useTableSetting();
-    const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10});
+    const { filterData, sortData, setSortData } = useDataTable();
+    const { table_url, user_id, page_name, table_name, columns, initialStateProps } = props;
+    const flatColumns = flattenArrayOfObjects(columns, "columns");
+    const { settingStore, hideAction } = useTableSetting();
+    const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
 
     const onColumnVisibilityChange = (event) => {
         const settingValue = event();
@@ -90,78 +88,54 @@ const DataTable_Main = (props) => {
     };
 
     const onSortingChange = (event) => {
-        toast.dismiss({containerId: "datatable", id: "sort"});
         setSortData(event);
-        setTimeout(() => {
-            toast(<AskForKeepSort event={event} user_id={user_id} page_name={page_name} table_name={table_name}
-                                  columns={columns} flatColumns={flatColumns}/>, {
-                containerId: "datatable",
-                toastId: "sort",
-                className: "filter-toast",
-                position: "bottom-left",
-                draggable: true,
-                autoClose: false,
-            });
-        }, 1000);
-    }
-
-    const filters = 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 storedFilters = settingStore?.[user_id]?.[page_name]?.[table_name]?.filters;
-    const finalFilters = storedFilters || filters;
+    };
 
     const fetchUrl = useMemo(() => {
         const params = new URLSearchParams();
         params.set("start", `${pagination.pageIndex * pagination.pageSize}`);
         params.set("size", pagination.pageSize);
-        params.set("filters", JSON.stringify(finalFilters ?? []));
-        params.set("sorting", JSON.stringify(settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] ?? []));
+        params.set("filters", JSON.stringify(filterData ?? []));
+        params.set("sorting", JSON.stringify(sortData));
         return `${table_url}?${params}`;
-    }, [table_url, finalFilters, pagination, columns]);
-
+    }, [table_url, filterData, pagination, columns]);
+    
     const table = useMaterialReactTable({
         localization: FA_DATATABLE_LOCALIZATION,
         columns,
         data: data,
         initialState: {
-            density: 'compact',
-            columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.['hides'],
+            density: "compact",
+            columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"],
             sorting: sortData,
-            ...initialStateProps
+            ...initialStateProps,
         },
         state: {
-            columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.['hides'],
+            columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"],
             sorting: sortData,
-            pagination
+            pagination,
         },
         muiTableHeadProps: {
             sx: {
                 borderTop: "1px solid #e1e1e1",
                 borderBottom: "2px solid #e1e1e1",
-            }
+            },
         },
         muiTableHeadCellProps: {
             sx: {
                 color: "primary.main",
                 borderLeft: "1px solid #e1e1e1",
                 "&:first-of-type": {
-                    borderLeft: "unset"
-                }
+                    borderLeft: "unset",
+                },
             },
         },
         muiTableBodyCellProps: {
             sx: {
                 borderLeft: "1px solid #e1e1e1",
                 "&:first-of-type": {
-                    borderLeft: "unset"
-                }
+                    borderLeft: "unset",
+                },
             },
         },
         manualFiltering: true,
@@ -170,19 +144,23 @@ const DataTable_Main = (props) => {
         onPaginationChange: setPagination,
         onColumnVisibilityChange: onColumnVisibilityChange,
         onSortingChange: onSortingChange,
-        renderTopToolbarCustomActions: ({table}) => (<>
-            <Toolbar
-                columns={flatColumns}
-            />
-        </>),
-        ...props
-    })
+        renderTopToolbarCustomActions: ({ table }) => (
+            <>
+                <Toolbar columns={flatColumns} />
+            </>
+        ),
+        ...props,
+    });
 
-    return <DataTable_Paper table={table} columns={flatColumns} user_id={user_id} page_name={page_name}
-                            table_name={table_name}/>;
+    return (
+        <DataTable_Paper
+            table={table}
+            columns={flatColumns}
+            user_id={user_id}
+            page_name={page_name}
+            table_name={table_name}
+        />
+    );
 };
 
 export default DataTable_Main;
-
-
-

src/core/components/DataTable/body/TableBody.js

@@ -4,11 +4,7 @@ import { useMRT_RowVirtualizer, useMRT_Rows } from "material-react-table";
 import { memo, useMemo } from "react";
 import DataTable_TableBodyRow, { Memo_DataTable_TableBodyRow } from "./TableBodyRow";
 
-const DataTable_TableBody = ({
-    columnVirtualizer,
-    table,
-    ...rest
-}) => {
+const DataTable_TableBody = ({ columnVirtualizer, table, ...rest }) => {
     const {
         getBottomRows,
         getIsSomeRowsPinned,
@@ -35,12 +31,8 @@ const DataTable_TableBody = ({
         ...rest,
     };
 
-    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 pinnedRowIds = useMemo(() => {
         if (!rowPinning.bottom?.length && !rowPinning.top?.length) return [];
@@ -63,67 +55,63 @@ const DataTable_TableBody = ({
 
     return (
         <>
-            {!rowPinningDisplayMode?.includes('sticky') &&
-                getIsSomeRowsPinned('top') && (
-                    <TableBody
-                        {...tableBodyProps}
-                        sx={(theme) => ({
-                            display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
-                            position: 'sticky',
-                            top: tableHeadHeight - 1,
-                            zIndex: 1,
-                            ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme)),
-                        })}
-                    >
-                        {getTopRows().map((row, staticRowIndex) => {
-                            const props = {
-                                ...commonRowProps,
-                                row,
-                                staticRowIndex,
-                            };
-                            return memoMode === 'rows' ? (
-                                <Memo_DataTable_TableBodyRow key={row.id} {...props} />
-                            ) : (
-                                <DataTable_TableBodyRow key={row.id} {...props} />
-                            );
-                        })}
-                    </TableBody>
-                )}
+            {!rowPinningDisplayMode?.includes("sticky") && getIsSomeRowsPinned("top") && (
+                <TableBody
+                    {...tableBodyProps}
+                    sx={(theme) => ({
+                        display: layoutMode?.startsWith("grid") ? "grid" : undefined,
+                        position: "sticky",
+                        top: tableHeadHeight - 1,
+                        zIndex: 1,
+                        ...parseFromValuesOrFunc(tableBodyProps?.sx, theme),
+                    })}
+                >
+                    {getTopRows().map((row, staticRowIndex) => {
+                        const props = {
+                            ...commonRowProps,
+                            row,
+                            staticRowIndex,
+                        };
+                        return memoMode === "rows" ? (
+                            <Memo_DataTable_TableBodyRow key={row.id} {...props} />
+                        ) : (
+                            <DataTable_TableBodyRow key={row.id} {...props} />
+                        );
+                    })}
+                </TableBody>
+            )}
             <TableBody
                 {...tableBodyProps}
                 sx={(theme) => ({
-                    display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
-                    height: rowVirtualizer
-                        ? `${rowVirtualizer.getTotalSize()}px`
-                        : undefined,
-                    minHeight: !rows.length ? '100px' : undefined,
-                    position: 'relative',
-                    ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme)),
+                    display: layoutMode?.startsWith("grid") ? "grid" : undefined,
+                    height: rowVirtualizer ? `${rowVirtualizer.getTotalSize()}px` : undefined,
+                    minHeight: !rows.length ? "100px" : undefined,
+                    position: "relative",
+                    ...parseFromValuesOrFunc(tableBodyProps?.sx, theme),
                 })}
             >
                 {tableBodyProps?.children ??
                     (!rows.length ? (
                         <tr
                             style={{
-                                display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+                                display: layoutMode?.startsWith("grid") ? "grid" : undefined,
                             }}
                         >
                             <td
                                 colSpan={table.getVisibleLeafColumns().length}
                                 style={{
-                                    display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+                                    display: layoutMode?.startsWith("grid") ? "grid" : undefined,
                                 }}
                             >
                                 {renderEmptyRowsFallback?.({ table }) ?? (
                                     <Typography
                                         sx={{
-                                            color: 'text.secondary',
-                                            fontStyle: 'italic',
-                                            maxWidth: `min(100vw, ${tablePaperRef.current?.clientWidth ?? 360
-                                                }px)`,
-                                            py: '2rem',
-                                            textAlign: 'center',
-                                            width: '100%',
+                                            color: "text.secondary",
+                                            fontStyle: "italic",
+                                            maxWidth: `min(100vw, ${tablePaperRef.current?.clientWidth ?? 360}px)`,
+                                            py: "2rem",
+                                            textAlign: "center",
+                                            width: "100%",
                                         }}
                                     >
                                         {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" ? (
                                     <Memo_DataTable_TableBodyRow key={key} {...props} />
                                 ) : (
                                     <DataTable_TableBodyRow key={key} {...props} />
@@ -169,39 +155,37 @@ const DataTable_TableBody = ({
                         </>
                     ))}
             </TableBody>
-            {!rowPinningDisplayMode?.includes('sticky') &&
-                getIsSomeRowsPinned('bottom') && (
-                    <TableBody
-                        {...tableBodyProps}
-                        sx={(theme) => ({
-                            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' ? (
-                                <Memo_DataTable_TableBodyRow key={row.id} {...props} />
-                            ) : (
-                                <DataTable_TableBodyRow key={row.id} {...props} />
-                            );
-                        })}
-                    </TableBody>
-                )}
+            {!rowPinningDisplayMode?.includes("sticky") && getIsSomeRowsPinned("bottom") && (
+                <TableBody
+                    {...tableBodyProps}
+                    sx={(theme) => ({
+                        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" ? (
+                            <Memo_DataTable_TableBodyRow key={row.id} {...props} />
+                        ) : (
+                            <DataTable_TableBodyRow key={row.id} {...props} />
+                        );
+                    })}
+                </TableBody>
+            )}
         </>
     );
-
-}
-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,
-);
+    (prev, next) => prev.table.options.data === next.table.options.data
+);

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) ? (
-                        <Skeleton
-                            animation="wave"
-                            height={20}
-                            width={skeletonWidth}
-                            {...skeletonProps}
-                        />
-                    ) : columnDefType === 'display' &&
-                        (['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(
-                            column.id,
-                        ) ||
-                            !row.getIsGrouped()) ? (
+                        <Skeleton animation="wave" height={20} width={skeletonWidth} {...skeletonProps} />
+                    ) : 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 = ({
                     ) : (
                         <DataTable_TableBodyCellValue {...cellValueProps} />
                     )}
-                    {cell.getIsGrouped() && !columnDef.GroupedCell && (
-                        <> ({row.subRows?.length})</>
-                    )}
+                    {cell.getIsGrouped() && !columnDef.GroupedCell && <> ({row.subRows?.length})</>}
                 </>
             )}
         </TableCell>
     );
-
-}
+};
 export default DataTable_TableBodyCell;
 
-export const Memo_DataTable_TableBodyCell = memo(
-    DataTable_TableBodyCell,
-    (prev, next) => next.cell === prev.cell,
-);
+export const Memo_DataTable_TableBodyCell = memo(DataTable_TableBodyCell, (prev, next) => next.cell === prev.cell);

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 = (
+                <span aria-label={renderedCellValue} role="note">
+                    {chunks?.map(({ key, match, text }) => (
+                        <Box
+                            aria-hidden="true"
+                            component="span"
+                            key={key}
+                            sx={
+                                match
+                                    ? {
+                                          backgroundColor: matchHighlightColor,
+                                          borderRadius: "2px",
+                                          color: (theme) =>
+                                              theme.palette.mode === "dark"
+                                                  ? theme.palette.common.white
+                                                  : theme.palette.common.black,
+                                          padding: "2px 1px",
+                                      }
+                                    : undefined
+                            }
+                        >
+                            {text}
+                        </Box>
+                    )) ?? renderedCellValue}
+                </span>
+            );
+        }
+    }
+
+    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 = (
-        <span aria-label={renderedCellValue} role="note">
-          {chunks?.map(({ key, match, text }) => (
-            <Box
-              aria-hidden="true"
-              component="span"
-              key={key}
-              sx={
-                match
-                  ? {
-                    backgroundColor: matchHighlightColor,
-                    borderRadius: "2px",
-                    color: (theme) =>
-                      theme.palette.mode === "dark"
-                        ? theme.palette.common.white
-                        : theme.palette.common.black,
-                    padding: "2px 1px",
-                  }
-                  : undefined
-              }
-            >
-              {text}
-            </Box>
-          )) ?? renderedCellValue}
-        </span>
-      );
+        });
     }
-  }
 
-  if (columnDef.Cell && !isGroupedValue) {
-    renderedCellValue = columnDef.Cell({
-      cell,
-      column,
-      renderedCellValue,
-      row,
-      rowRef,
-      staticColumnIndex,
-      staticRowIndex,
-      table,
-    });
-  }
-
-  return renderedCellValue;
+    return renderedCellValue;
 };
 export default DataTable_TableBodyCellValue;

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 ? (
-                    <td style={{ display: 'flex', width: 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 ? (
-                                <Memo_DataTable_TableBodyCell key={cell.id} {...props} />
-                            ) : (
-                                <DataTable_TableBodyCell key={cell.id} {...props} />
-                            )
-                        ) : null;
-                    },
-                )}
-                {virtualPaddingRight ? (
-                    <td style={{ display: 'flex', width: virtualPaddingRight }} />
-                ) : null}
+                {virtualPaddingLeft ? <td style={{ display: "flex", width: 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 ? (
+                            <Memo_DataTable_TableBodyCell key={cell.id} {...props} />
+                        ) : (
+                            <DataTable_TableBodyCell key={cell.id} {...props} />
+                        )
+                    ) : null;
+                })}
+                {virtualPaddingRight ? <td style={{ display: "flex", width: virtualPaddingRight }} /> : null}
             </TableRow>
             {renderDetailPanel && !row.getIsGrouped() && (
                 <DataTable_TableDetailPanel
@@ -244,11 +208,10 @@ const DataTable_TableBodyRow = ({
             )}
         </>
     );
-}
-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,
-);
+    (prev, next) => prev.row === next.row && prev.staticRowIndex === next.staticRowIndex
+);

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),
             })}
         >
             <TableCell
@@ -70,12 +65,12 @@ const DataTable_TableDetailPanel = ({
                 {...tableCellProps}
                 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 = ({
             </TableCell>
         </TableRow>
     );
-
-}
-export default DataTable_TableDetailPanel
+};
+export default DataTable_TableDetailPanel;

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 (
         <Tooltip
-            {...getCommonTooltipProps('top')}
-            title={
-                buttonProps?.title ??
-                (copied ? localization.copiedToClipboard : localization.clickToCopy)
-            }
+            {...getCommonTooltipProps("top")}
+            title={buttonProps?.title ?? (copied ? localization.copiedToClipboard : localization.clickToCopy)}
         >
             <Button
                 onClick={(e) => handleCopy(e, cell.getValue())}
@@ -53,23 +46,23 @@ const DataTable_CopyButton = ({
                 variant="text"
                 {...buttonProps}
                 sx={(theme) => ({
-                    backgroundColor: 'transparent',
-                    border: 'none',
-                    color: 'inherit',
-                    cursor: 'copy',
-                    fontFamily: 'inherit',
-                    fontSize: 'inherit',
-                    letterSpacing: 'inherit',
-                    m: '-0.25rem',
-                    minWidth: 'unset',
+                    backgroundColor: "transparent",
+                    border: "none",
+                    color: "inherit",
+                    cursor: "copy",
+                    fontFamily: "inherit",
+                    fontSize: "inherit",
+                    letterSpacing: "inherit",
+                    m: "-0.25rem",
+                    minWidth: "unset",
                     py: 0,
-                    textAlign: 'inherit',
-                    textTransform: 'inherit',
-                    ...(parseFromValuesOrFunc(buttonProps?.sx, theme)),
+                    textAlign: "inherit",
+                    textTransform: "inherit",
+                    ...parseFromValuesOrFunc(buttonProps?.sx, theme),
                 })}
                 title={undefined}
             />
         </Tooltip>
     );
-}
-export default DataTable_CopyButton
+};
+export default DataTable_CopyButton;

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 (
-        <Tooltip
-            {...getCommonTooltipProps('top')}
-            title={rest?.title ?? localization.move}
-        >
+        <Tooltip {...getCommonTooltipProps("top")} title={rest?.title ?? localization.move}>
             <IconButton
                 aria-label={rest.title ?? localization.move}
                 disableRipple
@@ -29,19 +22,19 @@ const DataTable_GrabHandleButton = ({
                     rest?.onClick?.(e);
                 }}
                 sx={(theme) => ({
-                    '&: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 = ({
             </IconButton>
         </Tooltip>
     );
-
-}
-export default DataTable_GrabHandleButton
+};
+export default DataTable_GrabHandleButton;

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

@@ -19,23 +19,12 @@ const DataTable_ShowHideColumnsButton = ({ table, ...rest }) => {
     return (
         <>
             <Tooltip title={rest?.title ?? localization.showHideColumns}>
-                <IconButton
-                    aria-label={localization.showHideColumns}
-                    onClick={handleClick}
-                    {...rest}
-                    title={undefined}
-                >
+                <IconButton aria-label={localization.showHideColumns} onClick={handleClick} {...rest} title={undefined}>
                     <ViewColumnIcon />
                 </IconButton>
             </Tooltip>
-            {anchorEl && (
-                <DataTable_ShowHideColumnsMenu
-                    anchorEl={anchorEl}
-                    setAnchorEl={setAnchorEl}
-                    table={table}
-                />
-            )}
+            {anchorEl && <DataTable_ShowHideColumnsMenu anchorEl={anchorEl} setAnchorEl={setAnchorEl} table={table} />}
         </>
     );
-}
-export default DataTable_ShowHideColumnsButton
+};
+export default DataTable_ShowHideColumnsButton;

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

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

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 (
-        <Drawer open={drawerState} onClose={() => setDrawerState(false)}
-                sx={{overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%"}}>
-            <FilterHeader setDrawerState={setDrawerState}/>
+        <Drawer
+            open={drawerState}
+            onClose={() => setDrawerState(false)}
+            sx={{ overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%" }}
+        >
+            <FilterHeader setDrawerState={setDrawerState} />
             {Object.keys(initialValues).length > 0 && (
                 <ScrollBox>
-                    <Formik
-                        initialValues={initialValues}
-                        onSubmit={handleSubmit}
-                        validationSchema={validationSchema}
-                    >
-                        {
-                            ({
-                                 values,
-                                 handleChange,
-                                 handleBlur,
-                                 setFieldValue,
-                                 errors,
-                                 touched,
-                                 isSubmitting,
-                                 isValid,
-                                 dirty,
-                                 resetForm
-                             }) => (
-                                <Form>
-                                    <Box sx={{px: 1, py: 2}}>
-                                        {
-                                            columns.map((column) => (
-                                                column.enableColumnFilter && (
-                                                    <FilterBodyField
-                                                        key={column.id}
-                                                        column={column}
-                                                        filterParameters={values[column.id]}
-                                                        handleChange={handleChange}
-                                                        handleBlur={handleBlur}
-                                                        setFieldValue={setFieldValue}
-                                                        resetForm={resetForm}
-                                                        errors={errors}
-                                                        touched={touched}
-                                                    />
-                                                )
-                                            ))
-                                        }
-                                    </Box>
-                                    <Box sx={{
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        alignItems: 'center',
-                                        pb: 2
-                                    }}>
-                                        <Button
-                                            type="submit"
-                                            variant="contained"
-                                            size="large"
-                                            disabled={isSubmitting || !isValid || !dirty}
-                                            sx={{
-                                                px: 8,
-                                                boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
-                                                backgroundColor: "#155175", ':hover': {
-                                                    backgroundColor: "#155175",
-                                                }
-                                            }}>
-                                            اعمال فیلتر
-                                        </Button>
-                                    </Box>
-                                </Form>
-                            )}
+                    <Formik initialValues={initialValues} onSubmit={handleSubmit} validationSchema={validationSchema}>
+                        {({
+                            values,
+                            handleChange,
+                            handleBlur,
+                            setFieldValue,
+                            errors,
+                            touched,
+                            isSubmitting,
+                            isValid,
+                            dirty,
+                            resetForm,
+                        }) => (
+                            <Form>
+                                <Box sx={{ px: 1, py: 2 }}>
+                                    {columns.map(
+                                        (column) =>
+                                            column.enableColumnFilter && (
+                                                <FilterBodyField
+                                                    key={column.id}
+                                                    column={column}
+                                                    filterParameters={values[column.id]}
+                                                    handleChange={handleChange}
+                                                    handleBlur={handleBlur}
+                                                    setFieldValue={setFieldValue}
+                                                    resetForm={resetForm}
+                                                    errors={errors}
+                                                    touched={touched}
+                                                />
+                                            )
+                                    )}
+                                </Box>
+                                <Box
+                                    sx={{
+                                        display: "flex",
+                                        justifyContent: "center",
+                                        alignItems: "center",
+                                        pb: 2,
+                                    }}
+                                >
+                                    <Button
+                                        type="submit"
+                                        variant="contained"
+                                        size="large"
+                                        disabled={isSubmitting || !isValid || !dirty}
+                                        sx={{
+                                            px: 8,
+                                            boxShadow:
+                                                "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
+                                            backgroundColor: "#155175",
+                                            ":hover": {
+                                                backgroundColor: "#155175",
+                                            },
+                                        }}
+                                    >
+                                        اعمال فیلتر
+                                    </Button>
+                                </Box>
+                            </Form>
+                        )}
                     </Formik>
                 </ScrollBox>
             )}
@@ -179,4 +153,4 @@ function FilterBody({columns, drawerState, setDrawerState, user_id, page_name, t
     );
 }
 
-export default FilterBody;
+export default FilterBody;

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) ? (
                 <CustomSelect
                     column={column}
                     filterParameters={filterParameters}
@@ -108,4 +110,4 @@ function FilterBodyField({
     );
 }
 
-export default FilterBodyField;
+export default FilterBodyField;

src/core/components/DataTable/filter/FilterButton.jsx

@@ -1,14 +1,17 @@
-'use client'
-import FilterAltIcon from '@mui/icons-material/FilterAlt';
-import {IconButton, Tooltip} from "@mui/material";
+"use client";
+import FilterAltIcon from "@mui/icons-material/FilterAlt";
+import { IconButton, Tooltip } from "@mui/material";
 
-function FilterButton({drawerState, setDrawerState}) {
+function FilterButton({ drawerState, setDrawerState }) {
     return (
         <Tooltip title="فیلتر">
-            <IconButton onClick={() => {
-                setDrawerState(!drawerState)
-            }} aria-label="filter table">
-                <FilterAltIcon/>
+            <IconButton
+                onClick={() => {
+                    setDrawerState(!drawerState);
+                }}
+                aria-label="filter table"
+            >
+                <FilterAltIcon />
             </IconButton>
         </Tooltip>
     );

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 (
         <Box
             sx={{
@@ -15,18 +15,20 @@ function FilterHeader({setDrawerState}) {
                 py: 1,
                 backgroundColor: "#155175",
                 boxShadow: "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
-                maxWidth: "450px"
+                maxWidth: "450px",
             }}
         >
-            <Box sx={{display: "flex", alignItems: "center"}}>
-                <FilterAltIcon sx={{color: "#fff"}}/>
-                <Typography variant="h6" sx={{color: "#fff"}}>فیلتر</Typography>
+            <Box sx={{ display: "flex", alignItems: "center" }}>
+                <FilterAltIcon sx={{ color: "#fff" }} />
+                <Typography variant="h6" sx={{ color: "#fff" }}>
+                    فیلتر
+                </Typography>
             </Box>
-            <IconButton sx={{color: "#fff"}} onClick={() => setDrawerState(false)}>
-                <CancelIcon sx={{fontSize: "1em"}}/>
+            <IconButton sx={{ color: "#fff" }} onClick={() => setDrawerState(false)}>
+                <CancelIcon sx={{ fontSize: "1em" }} />
             </IconButton>
         </Box>
     );
 }
 
-export default FilterHeader;
+export default FilterHeader;

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 (
-        <Menu
-            id="simple-menu"
-            anchorEl={anchorEl}
-            keepMounted
-            open={Boolean(anchorEl)}
-            onClose={handleCloseFilterBox}
-        >
+        <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleCloseFilterBox}>
             {filterOption.map((option, index) => (
-                <ListItem key={index}
-                          onClick={(event) => handleChangeItem(event, index)}
-                          selected={option === selectedFilter}
-                          sx={{cursor: 'pointer', width: "100px", display: "flex", justifyContent: "center"}}>
+                <ListItem
+                    key={index}
+                    onClick={(event) => handleChangeItem(event, index)}
+                    selected={option === selectedFilter}
+                    sx={{ cursor: "pointer", width: "100px", display: "flex", justifyContent: "center" }}
+                >
                     {columnFilterModeOptionFa[option]}
                 </ListItem>
             ))}
@@ -45,4 +41,4 @@ function FilterOptionList({
     );
 }
 
-export default FilterOptionList;
+export default FilterOptionList;

src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from "react";
 import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
-import {Typography} from "@mui/material";
+import { Typography } from "@mui/material";
 
-function CustomDatePicker({column, filterParameters, defaultFilterTranslation, setFieldValue}) {
+function CustomDatePicker({ column, filterParameters, defaultFilterTranslation, setFieldValue }) {
     return (
         <MuiDatePicker
             name={`${column.id}.value`}
@@ -10,7 +10,7 @@ function CustomDatePicker({column, filterParameters, defaultFilterTranslation, s
             setFieldValue={setFieldValue}
             placeholder={column.header}
             helperText={
-                <Typography variant="button" sx={{color: "#155175"}}>
+                <Typography variant="button" sx={{ color: "#155175" }}>
                     نوع فیلتر: {defaultFilterTranslation} (تاریخ)
                 </Typography>
             }
@@ -18,4 +18,4 @@ function CustomDatePicker({column, filterParameters, defaultFilterTranslation, s
     );
 }
 
-export default CustomDatePicker;
+export default CustomDatePicker;

src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx

@@ -1,12 +1,12 @@
-'use client'
+"use client";
 
 import React from "react";
-import {Box, Typography} from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
 
-function CustomDatePickerRange({column, filterParameters, defaultFilterTranslation, setFieldValue, errors, touched}) {
+function CustomDatePickerRange({ column, filterParameters, defaultFilterTranslation, setFieldValue, errors, touched }) {
     return (
-        <Box sx={{display: "flex", gap: 1}}>
+        <Box sx={{ display: "flex", gap: 1 }}>
             <MuiDatePicker
                 name={`${column.id}.value[0]`}
                 value={filterParameters.value[0]}
@@ -14,7 +14,7 @@ function CustomDatePickerRange({column, filterParameters, defaultFilterTranslati
                 maxDate={filterParameters.value[1]}
                 placeholder={`از تاریخ`}
                 helperText={
-                    <Typography variant="button" sx={{color: "#155175"}}>
+                    <Typography variant="button" sx={{ color: "#155175" }}>
                         نوع فیلتر: {defaultFilterTranslation} (تاریخ)
                     </Typography>
                 }

src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx

@@ -1,33 +1,31 @@
-import React from 'react';
-import {LocalizationProvider, MobileDatePicker} from "@mui/x-date-pickers";
-import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
-import {faIR} from "@mui/x-date-pickers/locales";
-import {Box, FormHelperText, IconButton, InputAdornment} from "@mui/material";
+import React from "react";
+import { LocalizationProvider, MobileDatePicker } from "@mui/x-date-pickers";
+import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import { faIR } from "@mui/x-date-pickers/locales";
+import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import moment from "jalali-moment";
 
-function MuiDatePicker({value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error}) {
-
+function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error }) {
     // console.log("error", error);
     //
     // console.log("helperText", helperText)
 
     return (
-        <Box sx={{display: "flex", flexDirection: "column", my: 1}}>
-            <LocalizationProvider dateAdapter={AdapterDateFnsJalali}
-                                  localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
+        <Box sx={{ display: "flex", flexDirection: "column", my: 1 }}>
+            <LocalizationProvider
+                dateAdapter={AdapterDateFnsJalali}
+                localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
             >
                 <MobileDatePicker
                     value={value ? new Date(value) : null}
-                    sx={{width: "100%"}}
+                    sx={{ width: "100%" }}
                     id={name}
                     name={name}
                     aria-describedby="component-helper-text"
                     onChange={(value) => {
                         const date = new Date(value);
-                        const formattedDate = moment(date)
-                            .locale("en")
-                            .format("YYYY-MM-DD");
+                        const formattedDate = moment(date).locale("en").format("YYYY-MM-DD");
                         setFieldValue(name, formattedDate);
                     }}
                     minDate={minDate ? new Date(minDate) : null}
@@ -47,13 +45,13 @@ function MuiDatePicker({value, setFieldValue, name, minDate, maxDate, helperText
                                             }}
                                             sx={{
                                                 color: "#bfbfbf",
-                                                '&:hover': {
-                                                    backgroundColor: 'rgba(189, 189, 189, 0.1)',
-                                                    color: "#363434"
+                                                "&:hover": {
+                                                    backgroundColor: "rgba(189, 189, 189, 0.1)",
+                                                    color: "#363434",
                                                 },
                                             }}
                                         >
-                                            <ClearIcon/>
+                                            <ClearIcon />
                                         </IconButton>
                                     </InputAdornment>
                                 ),
@@ -61,7 +59,7 @@ function MuiDatePicker({value, setFieldValue, name, minDate, maxDate, helperText
                         },
                     }}
                 />
-                <FormHelperText id="component-helper-text" sx={{ml: 2, color: error ? '#d32f2f' : "unset"}}>
+                <FormHelperText id="component-helper-text" sx={{ ml: 2, color: error ? "#d32f2f" : "unset" }}>
                     {helperText ? helperText : ""}
                 </FormHelperText>
             </LocalizationProvider>
@@ -69,4 +67,4 @@ function MuiDatePicker({value, setFieldValue, name, minDate, maxDate, helperText
     );
 }
 
-export default MuiDatePicker;
+export default MuiDatePicker;

src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx

@@ -1,35 +1,32 @@
-'use client'
+"use client";
 
-import {FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography} from "@mui/material";
+import { FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography } from "@mui/material";
 
-function CustomSelect({column, filterParameters, defaultFilterTranslation, setFieldValue}) {
+function CustomSelect({ column, filterParameters, defaultFilterTranslation, setFieldValue }) {
     const columnSelectOption = column.columnSelectOption;
 
     return (
-        <FormControl fullWidth sx={{marginY: 1}}>
+        <FormControl fullWidth sx={{ marginY: 1 }}>
             <InputLabel id={`label${column.id}`}>{column.header}</InputLabel>
             <Select
                 labelId={`label${column.id}`}
                 id={column.id}
                 name={`${column.id}.value`}
                 value={filterParameters.value}
-                input={<OutlinedInput label={column.header}/>}
+                input={<OutlinedInput label={column.header} />}
                 onChange={(e) => {
-                    setFieldValue(`${column.id}.value`, e.target.value)
+                    setFieldValue(`${column.id}.value`, e.target.value);
                 }}
             >
                 <MenuItem value="">{column.header}</MenuItem>
                 {columnSelectOption.map((option) => (
-                    <MenuItem
-                        key={option.value}
-                        value={option.value}
-                    >
+                    <MenuItem key={option.value} value={option.value}>
                         {option.label}
                     </MenuItem>
                 ))}
             </Select>
             <FormHelperText>
-                <Typography variant="button" sx={{color: "#155175"}}>
+                <Typography variant="button" sx={{ color: "#155175" }}>
                     نوع فیلتر: {defaultFilterTranslation}
                 </Typography>
             </FormHelperText>

src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 
 import {
     Box,
@@ -9,49 +9,47 @@ import {
     MenuItem,
     OutlinedInput,
     Select,
-    Typography
+    Typography,
 } from "@mui/material";
 
-function CustomSelectMultiple({column, filterParameters, defaultFilterTranslation, setFieldValue}) {
+function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslation, setFieldValue }) {
     const columnSelectOption = column.columnSelectOption;
 
     const getLabelForValue = (value) => {
-        const option = columnSelectOption.find(opt => opt.value === value);
+        const option = columnSelectOption.find((opt) => opt.value === value);
         return option ? option.label : value;
     };
 
     return (
-        <FormControl fullWidth sx={{marginY: 1}}>
-            <InputLabel htmlFor="uncontrolled-native"
-                        id={`label${column.id}`}>{column.header}</InputLabel>
+        <FormControl fullWidth sx={{ marginY: 1 }}>
+            <InputLabel htmlFor="uncontrolled-native" id={`label${column.id}`}>
+                {column.header}
+            </InputLabel>
             <Select
                 labelId={`label${column.id}`}
                 id={column.id}
                 value={filterParameters.value}
                 multiple
                 onChange={(e) => {
-                    setFieldValue(`${column.id}.value`, e.target.value)
+                    setFieldValue(`${column.id}.value`, e.target.value);
                 }}
                 renderValue={(selected) => (
-                    <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5}}>
+                    <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
                         {selected.map((value) => (
-                            <Chip key={value} label={getLabelForValue(value)}/>
+                            <Chip key={value} label={getLabelForValue(value)} />
                         ))}
                     </Box>
                 )}
-                input={<OutlinedInput label={column.header}/>}
+                input={<OutlinedInput label={column.header} />}
             >
                 {columnSelectOption.map((option) => (
-                    <MenuItem
-                        key={option.value}
-                        value={option.value}
-                    >
+                    <MenuItem key={option.value} value={option.value}>
                         {option.label}
                     </MenuItem>
                 ))}
             </Select>
             <FormHelperText>
-                <Typography variant="button" sx={{color: "#155175"}}>
+                <Typography variant="button" sx={{ color: "#155175" }}>
                     نوع فیلتر: {defaultFilterTranslation}
                 </Typography>
             </FormHelperText>

src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx

@@ -1,15 +1,14 @@
-import {InputAdornment, TextField, Typography} from "@mui/material";
-import FilterListIcon from '@mui/icons-material/FilterList';
+import { InputAdornment, TextField, Typography } from "@mui/material";
+import FilterListIcon from "@mui/icons-material/FilterList";
 
 function CustomTextField({
-                             column,
-                             filterParameters,
-                             defaultFilterTranslation,
-                             handleOpenFilterBox,
-                             handleChange,
-                             handleBlur
-                         }) {
-
+    column,
+    filterParameters,
+    defaultFilterTranslation,
+    handleOpenFilterBox,
+    handleChange,
+    handleBlur,
+}) {
     return (
         <TextField
             id={column.id}
@@ -19,16 +18,18 @@ function CustomTextField({
             onChange={handleChange}
             onBlur={handleBlur}
             fullWidth
-            helperText={<Typography variant="button" sx={{color: "#155175"}}>
-                نوع فیلتر: {defaultFilterTranslation}
-            </Typography>}
+            helperText={
+                <Typography variant="button" sx={{ color: "#155175" }}>
+                    نوع فیلتر: {defaultFilterTranslation}
+                </Typography>
+            }
             variant="outlined"
             size="normal"
-            sx={{marginY: 1}}
+            sx={{ marginY: 1 }}
             InputProps={{
                 endAdornment: (
-                    <InputAdornment position="end" sx={{cursor: "pointer"}} onClick={handleOpenFilterBox}>
-                        <FilterListIcon/>
+                    <InputAdornment position="end" sx={{ cursor: "pointer" }} onClick={handleOpenFilterBox}>
+                        <FilterListIcon />
                     </InputAdornment>
                 ),
             }}
@@ -36,4 +37,4 @@ function CustomTextField({
     );
 }
 
-export default CustomTextField;
+export default CustomTextField;

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 (
-        <Box sx={{display: "flex"}}>
+        <Box sx={{ display: "flex" }}>
             <TextField
                 id={`${column.id}.value[0]`}
                 name={`${column.id}.value[0]`}
@@ -22,11 +22,14 @@ function CustomTextFieldRange({
                 value={filterParameters.value[0]}
                 fullWidth
                 error={touched?.[`${column.id}`]?.value && Boolean(errors?.[`${column.id}`]?.value)}
-                helperText={<Typography variant="button" sx={{color: "#155175"}}>نوع
-                    فیلتر: {defaultFilterTranslation}</Typography>}
+                helperText={
+                    <Typography variant="button" sx={{ color: "#155175" }}>
+                        نوع فیلتر: {defaultFilterTranslation}
+                    </Typography>
+                }
                 variant="outlined"
                 size="normal"
-                sx={{marginY: 1, marginRight: 1}}
+                sx={{ marginY: 1, marginRight: 1 }}
             />
             <TextField
                 id={`${column.id}.value[1]`}
@@ -40,11 +43,11 @@ function CustomTextFieldRange({
                 fullWidth
                 variant="outlined"
                 size="normal"
-                sx={{marginY: 1}}
+                sx={{ marginY: 1 }}
                 InputProps={{
                     endAdornment: (
-                        <InputAdornment position="end" sx={{cursor: "pointer"}} onClick={handleOpenFilterBox}>
-                            <FilterListIcon/>
+                        <InputAdornment position="end" sx={{ cursor: "pointer" }} onClick={handleOpenFilterBox}>
+                            <FilterListIcon />
                         </InputAdornment>
                     ),
                 }}
@@ -53,4 +56,4 @@ function CustomTextFieldRange({
     );
 }
 
-export default CustomTextFieldRange;
+export default CustomTextFieldRange;

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 (
         <>
-            <FilterButton drawerState={open} setDrawerState={setOpen}/>
-            <FilterBody columns={columns} drawerState={open} setDrawerState={setOpen} user_id={user_id}
-                        page_name={page_name} table_name={table_name}/>
+            <FilterButton drawerState={open} setDrawerState={setOpen} />
+            <FilterBody
+                columns={columns}
+                drawerState={open}
+                setDrawerState={setOpen}
+                user_id={user_id}
+                page_name={page_name}
+                table_name={table_name}
+            />
         </>
     );
 }

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) => (
-                    <DataTable_TableHeadRow
-                        columnVirtualizer={columnVirtualizer}
-                        headerGroup={headerGroup}
-                        key={headerGroup.id}
-                        table={table}
-                        index={index}
-                    />
-                ))
-            }
+            {table.getHeaderGroups().map((headerGroup, index) => (
+                <DataTable_TableHeadRow
+                    columnVirtualizer={columnVirtualizer}
+                    headerGroup={headerGroup}
+                    key={headerGroup.id}
+                    table={table}
+                    index={index}
+                />
+            ))}
         </TableHead>
     );
-
-}
-export default DataTable_TableHead
+};
+export default DataTable_TableHead;

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 (
         <TableCell
-            align={
-                columnDefType === 'group'
-                    ? 'center'
-                    : theme.direction === 'rtl'
-                        ? 'right'
-                        : 'left'
-            }
+            align={columnDefType === "group" ? "center" : theme.direction === "rtl" ? "right" : "left"}
             colSpan={header.colSpan}
             rowSpan={rowSpan}
             data-index={staticColumnIndex}
@@ -165,123 +132,107 @@ const DataTable_TableHeadCell = ({
             ref={(node) => {
                 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 ?? (
                 <Box
                     className="Mui-TableHeadCell-Content"
                     sx={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection:
-                            tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
+                        alignItems: "center",
+                        display: "flex",
+                        flexDirection: tableCellProps?.align === "right" ? "row-reverse" : "row",
                         justifyContent:
-                            columnDefType === 'group' ||
-                            tableCellProps?.align === 'center'
-                                ? 'center'
+                            columnDefType === "group" || tableCellProps?.align === "center"
+                                ? "center"
                                 : column.getCanResize()
-                                    ? 'space-between'
-                                    : 'flex-start',
-                        position: 'relative',
-                        width: '100%',
+                                  ? "space-between"
+                                  : "flex-start",
+                        position: "relative",
+                        width: "100%",
                     }}
                 >
                     <Box
                         className="Mui-TableHeadCell-Content-Labels"
                         onClick={column.getToggleSortingHandler()}
                         sx={{
-                            alignItems: 'center',
-                            cursor:
-                                column.getCanSort() && columnDefType !== 'group'
-                                    ? 'pointer'
-                                    : undefined,
-                            display: 'flex',
-                            flexDirection:
-                                tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
-                            overflow: columnDefType === 'data' ? 'hidden' : undefined,
-                            pl:
-                                tableCellProps?.align === 'center'
-                                    ? `${headerPL}rem`
-                                    : undefined,
+                            alignItems: "center",
+                            cursor: column.getCanSort() && columnDefType !== "group" ? "pointer" : undefined,
+                            display: "flex",
+                            flexDirection: tableCellProps?.align === "right" ? "row-reverse" : "row",
+                            overflow: columnDefType === "data" ? "hidden" : undefined,
+                            pl: tableCellProps?.align === "center" ? `${headerPL}rem` : undefined,
                         }}
                     >
                         <Box
                             className="Mui-TableHeadCell-Content-Wrapper"
                             sx={{
-                                '&:hover': {
-                                    textOverflow: 'clip',
+                                "&:hover": {
+                                    textOverflow: "clip",
                                 },
                                 minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
-                                overflow: columnDefType === 'data' ? 'hidden' : undefined,
-                                textOverflow: 'ellipsis',
+                                overflow: columnDefType === "data" ? "hidden" : undefined,
+                                textOverflow: "ellipsis",
                                 color: "#fff",
                                 fontSize: "14px",
                                 fontWeight: "500",
-                                whiteSpace:
-                                    (columnDef.header?.length ?? 0) < 20
-                                        ? 'nowrap'
-                                        : 'normal',
+                                whiteSpace: (columnDef.header?.length ?? 0) < 20 ? "nowrap" : "normal",
                             }}
                         >
                             {HeaderElement}
                         </Box>
-                        {(column.getCanSort() && columnDefType !== 'group') && (
-                            <MRT_TableHeadCellSortLabel sx={{width: 20, color: "#fff"}} header={header}
-                                                        table={table}/>
+                        {column.getCanSort() && columnDefType !== "group" && (
+                            <MRT_TableHeadCellSortLabel
+                                sx={{ width: 20, color: "#fff" }}
+                                header={header}
+                                table={table}
+                            />
                         )}
                     </Box>
                 </Box>
             )}
         </TableCell>
     );
-
-}
-export default DataTable_TableHeadCell;
+};
+export default DataTable_TableHeadCell;

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 (
         <TableRow {...tableRowProps}>
-            {virtualPaddingLeft && <th style={{display: 'flex', width: virtualPaddingLeft}}/>}
+            {virtualPaddingLeft && <th style={{ display: "flex", width: 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 ? (
                     <DataTable_TableHeadCell
@@ -52,9 +50,9 @@ const DataTable_TableHeadRow = ({
                     />
                 ) : null;
             })}
-            {virtualPaddingRight && <th style={{display: 'flex', width: virtualPaddingRight}}/>}
+            {virtualPaddingRight && <th style={{ display: "flex", width: virtualPaddingRight }} />}
         </TableRow>
     );
 };
 
-export default DataTable_TableHeadRow;
+export default DataTable_TableHeadRow;

src/core/components/DataTable/index.js

@@ -3,10 +3,15 @@ import DataTableProvider from "@/lib/contexts/DataTable";
 
 const DataTable = (props) => {
     return (
-        <DataTableProvider>
-            <DataTable_Main {...props}/>
+        <DataTableProvider
+            user_id={props.user_id}
+            page_name={props.page_name}
+            table_name={props.table_name}
+            columns={props.columns}
+        >
+            <DataTable_Main {...props} />
         </DataTableProvider>
     );
 };
 
-export default DataTable;
+export default DataTable;

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: "بدون مرتب سازی",
-};
+};

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 (
         <MenuItem
             sx={{
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                minWidth: '120px',
+                alignItems: "center",
+                justifyContent: "space-between",
+                minWidth: "120px",
                 my: 0,
-                py: '6px',
+                py: "6px",
             }}
             {...rest}
         >
             <Box
                 sx={{
-                    alignItems: 'center',
-                    display: 'flex',
+                    alignItems: "center",
+                    display: "flex",
                 }}
             >
                 <ListItemIcon>{icon}</ListItemIcon>
                 {label}
             </Box>
             {onOpenSubMenu && (
-                <IconButton
-                    onClick={onOpenSubMenu}
-                    onMouseEnter={onOpenSubMenu}
-                    size="small"
-                    sx={{ p: 0 }}
-                >
+                <IconButton onClick={onOpenSubMenu} onMouseEnter={onOpenSubMenu} size="small" sx={{ p: 0 }}>
                     <ArrowRightIcon />
                 </IconButton>
             )}
         </MenuItem>
     );
-
-}
-export default DataTable_ActionMenuItem
+};
+export default DataTable_ActionMenuItem;

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") && (
             <DataTable_ActionMenuItem
                 icon={<ContentCopy />}
-                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" && (
             <DataTable_ActionMenuItem
                 icon={<EditIcon />}
-                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) && (
             <Menu
                 MenuListProps={{
-                    dense: density === 'compact',
+                    dense: density === "compact",
                     sx: {
                         backgroundColor: menuBackgroundColor,
                     },
@@ -95,6 +90,5 @@ const DataTable_CellActionMenu = ({
             </Menu>
         )
     );
-
-}
-export default DataTable_CellActionMenu
+};
+export default DataTable_CellActionMenu;

src/core/components/DataTable/menus/ShowHideColumnsMenu.js

@@ -2,11 +2,7 @@ import { Box, Button, Divider, Menu } from "@mui/material";
 import { useMemo, useState } from "react";
 import DataTable_ShowHideColumnsMenuItems from "./ShowHideColumnsMenuItems";
 
-const DataTable_ShowHideColumnsMenu = ({ anchorEl,
-    setAnchorEl,
-    table,
-    ...rest
-}) => {
+const DataTable_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, ...rest }) => {
     const {
         getAllColumns,
         getAllLeafColumns,
@@ -36,14 +32,11 @@ const DataTable_ShowHideColumnsMenu = ({ anchorEl,
 
     const allColumns = useMemo(() => {
         const columns = getAllColumns();
-        if (
-            columnOrder.length > 0 &&
-            !columns.some((col) => col.columnDef.columnDefType === 'group')
-        ) {
+        if (columnOrder.length > 0 && !columns.some((col) => col.columnDef.columnDefType === "group")) {
             return [
                 ...getLeftLeafColumns(),
                 ...Array.from(new Set(columnOrder)).map((colId) =>
-                    getCenterLeafColumns().find((col) => col?.id === colId),
+                    getCenterLeafColumns().find((col) => col?.id === colId)
                 ),
                 ...getRightLeafColumns(),
             ].filter(Boolean);
@@ -58,16 +51,14 @@ const DataTable_ShowHideColumnsMenu = ({ anchorEl,
         getRightLeafColumns(),
     ]);
 
-    const isNestedColumns = allColumns.some(
-        (col) => col.columnDef.columnDefType === 'group',
-    );
+    const isNestedColumns = allColumns.some((col) => col.columnDef.columnDefType === "group");
 
     const [hoveredColumn, setHoveredColumn] = useState(null);
 
     return (
         <Menu
             MenuListProps={{
-                dense: density === 'compact',
+                dense: density === "compact",
                 sx: {
                     backgroundColor: menuBackgroundColor,
                 },
@@ -80,44 +71,29 @@ const DataTable_ShowHideColumnsMenu = ({ anchorEl,
         >
             <Box
                 sx={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    p: '0.5rem',
+                    display: "flex",
+                    justifyContent: "space-between",
+                    p: "0.5rem",
                     pt: 0,
                 }}
             >
                 {enableHiding && (
-                    <Button
-                        disabled={!getIsSomeColumnsVisible()}
-                        onClick={() => handleToggleAllColumns(false)}
-                    >
+                    <Button disabled={!getIsSomeColumnsVisible()} onClick={() => handleToggleAllColumns(false)}>
                         {localization.hideAll}
                     </Button>
                 )}
                 {enableColumnOrdering && (
-                    <Button
-                        onClick={() =>
-                            table.setColumnOrder(
-                                getDefaultColumnOrderIds(table.options, true),
-                            )
-                        }
-                    >
+                    <Button onClick={() => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true))}>
                         {localization.resetOrder}
                     </Button>
                 )}
                 {enableColumnPinning && (
-                    <Button
-                        disabled={!getIsSomeColumnsPinned()}
-                        onClick={() => table.resetColumnPinning(true)}
-                    >
+                    <Button disabled={!getIsSomeColumnsPinned()} onClick={() => table.resetColumnPinning(true)}>
                         {localization.unpinAll}
                     </Button>
                 )}
                 {enableHiding && (
-                    <Button
-                        disabled={getIsAllColumnsVisible()}
-                        onClick={() => handleToggleAllColumns(true)}
-                    >
+                    <Button disabled={getIsAllColumnsVisible()} onClick={() => handleToggleAllColumns(true)}>
                         {localization.showAll}
                     </Button>
                 )}
@@ -136,5 +112,5 @@ const DataTable_ShowHideColumnsMenu = ({ anchorEl,
             ))}
         </Menu>
     );
-}
-export default DataTable_ShowHideColumnsMenu
+};
+export default DataTable_ShowHideColumnsMenu;

src/core/components/DataTable/menus/ShowHideColumnsMenuItems.js

@@ -30,7 +30,7 @@ const DataTable_ShowHideColumnsMenuItems = ({
     const switchChecked = column.getIsVisible();
 
     const handleToggleColumnHidden = (column) => {
-        if (columnDefType === 'group') {
+        if (columnDefType === "group") {
             column?.columns?.forEach?.((childColumn) => {
                 childColumn.toggleVisibility(!switchChecked);
             });
@@ -78,29 +78,29 @@ const DataTable_ShowHideColumnsMenuItems = ({
                 ref={menuItemRef}
                 {...rest}
                 sx={(theme) => ({
-                    alignItems: 'center',
-                    justifyContent: 'flex-start',
+                    alignItems: "center",
+                    justifyContent: "flex-start",
                     my: 0,
                     opacity: isDragging ? 0.5 : 1,
                     outline: isDragging
                         ? `2px dashed ${theme.palette.grey[500]}`
                         : hoveredColumn?.id === column.id
-                            ? `2px dashed ${draggingBorderColor}`
-                            : 'none',
-                    outlineOffset: '-2px',
+                          ? `2px dashed ${draggingBorderColor}`
+                          : "none",
+                    outlineOffset: "-2px",
                     pl: `${(column.depth + 0.5) * 2}rem`,
-                    py: '6px',
-                    ...(parseFromValuesOrFunc(rest?.sx, theme)),
+                    py: "6px",
+                    ...parseFromValuesOrFunc(rest?.sx, theme),
                 })}
             >
                 <Box
                     sx={{
-                        display: 'flex',
-                        flexWrap: 'nowrap',
-                        gap: '8px',
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        gap: "8px",
                     }}
                 >
-                    {columnDefType !== 'group' &&
+                    {columnDefType !== "group" &&
                         enableColumnOrdering &&
                         !isNestedColumns &&
                         (columnDef.enableColumnOrdering !== false ? (
@@ -110,7 +110,7 @@ const DataTable_ShowHideColumnsMenuItems = ({
                                 table={table}
                             />
                         ) : (
-                            <Box sx={{ width: '28px' }} />
+                            <Box sx={{ width: "28px" }} />
                         ))}
                     {enableHiding ? (
                         <FormControlLabel
@@ -119,15 +119,12 @@ const DataTable_ShowHideColumnsMenuItems = ({
                                 typography: {
                                     sx: {
                                         mb: 0,
-                                        opacity: columnDefType !== 'display' ? 1 : 0.5,
+                                        opacity: columnDefType !== "display" ? 1 : 0.5,
                                     },
                                 },
                             }}
                             control={
-                                <Tooltip
-                                    {...getCommonTooltipProps()}
-                                    title={localization.toggleVisibility}
-                                >
+                                <Tooltip {...getCommonTooltipProps()} title={localization.toggleVisibility}>
                                     <Switch />
                                 </Tooltip>
                             }
@@ -136,9 +133,7 @@ const DataTable_ShowHideColumnsMenuItems = ({
                             onChange={() => handleToggleColumnHidden(column)}
                         />
                     ) : (
-                        <Typography sx={{ alignSelf: 'center' }}>
-                            {columnDef.header}
-                        </Typography>
+                        <Typography sx={{ alignSelf: "center" }}>{columnDef.header}</Typography>
                     )}
                 </Box>
             </MenuItem>
@@ -155,6 +150,5 @@ const DataTable_ShowHideColumnsMenuItems = ({
             ))}
         </>
     );
-
-}
-export default DataTable_ShowHideColumnsMenuItems;
+};
+export default DataTable_ShowHideColumnsMenuItems;

src/core/components/DataTable/refactor/RefactorTable.jsx

@@ -1,14 +1,14 @@
-"use client"
-import {IconButton, Tooltip} from '@mui/material';
-import RestartAltIcon from '@mui/icons-material/RestartAlt';
+"use client";
+import { IconButton, Tooltip } from "@mui/material";
+import RestartAltIcon from "@mui/icons-material/RestartAlt";
 import useTableSetting from "@/lib/hooks/useTableSetting";
-import {useState} from "react";
+import { useState } from "react";
 
 function RefactorTable() {
-    const {refactorAction} = useTableSetting();
+    const { refactorAction } = useTableSetting();
     const [userId, setUserId] = useState(0);
-    const [pageName, setPageName] = useState('testPage');
-    const [tableName, setTableName] = useState('testTable');
+    const [pageName, setPageName] = useState("testPage");
+    const [tableName, setTableName] = useState("testTable");
 
     const refactor = () => {
         refactorAction(userId, pageName, tableName);
@@ -17,12 +17,10 @@ function RefactorTable() {
     return (
         <Tooltip title="بازنشانی اطلاعات">
             <IconButton onClick={refactor} aria-label="refactor table">
-                <RestartAltIcon/>
+                <RestartAltIcon />
             </IconButton>
         </Tooltip>
     );
 }
 
 export default RefactorTable;
-
-

src/core/components/DataTable/table/Paper.js

@@ -1,27 +1,27 @@
-import {parseFromValuesOrFunc} from "@/core/utils/utils";
-import {Paper} from "@mui/material";
+import { parseFromValuesOrFunc } from "@/core/utils/utils";
+import { Paper } from "@mui/material";
 import DataTable_BottomToolbar from "../toolbar/BottomToolbar";
 import DataTable_TopToolbar from "../toolbar/TopToolbar";
 import DataTable_TableContainer from "./TableContainer";
 
-const DataTable_Paper = ({table, ...rest}) => {
+const DataTable_Paper = ({ table, ...rest }) => {
     const {
         getState,
         options: {
             enableBottomToolbar,
             enableTopToolbar,
-            mrtTheme: {baseBackgroundColor},
+            mrtTheme: { baseBackgroundColor },
             muiTablePaperProps,
             renderBottomToolbar,
             renderTopToolbar,
         },
-        refs: {tablePaperRef},
+        refs: { tablePaperRef },
     } = table;
 
-    const {isFullScreen} = getState();
+    const { isFullScreen } = getState();
 
     const paperProps = {
-        ...parseFromValuesOrFunc(muiTablePaperProps, {table}),
+        ...parseFromValuesOrFunc(muiTablePaperProps, { table }),
         ...rest,
     };
 
@@ -39,42 +39,44 @@ const DataTable_Paper = ({table, ...rest}) => {
             style={{
                 ...(isFullScreen
                     ? {
-                        bottom: 0,
-                        height: '100dvh',
-                        left: 0,
-                        margin: 0,
-                        maxHeight: '100dvh',
-                        maxWidth: '100dvw',
-                        padding: 0,
-                        position: 'fixed',
-                        right: 0,
-                        top: 0,
-                        width: '100dvw',
-                        zIndex: 999,
-                    }
+                          bottom: 0,
+                          height: "100dvh",
+                          left: 0,
+                          margin: 0,
+                          maxHeight: "100dvh",
+                          maxWidth: "100dvw",
+                          padding: 0,
+                          position: "fixed",
+                          right: 0,
+                          top: 0,
+                          width: "100dvw",
+                          zIndex: 999,
+                      }
                     : {}),
                 ...paperProps?.style,
             }}
             sx={(theme) => ({
                 backgroundColor: baseBackgroundColor,
-                backgroundImage: 'unset',
-                overflow: 'hidden',
-                transition: 'all 100ms ease-in-out',
-                ...(parseFromValuesOrFunc(paperProps?.sx, theme)),
+                backgroundImage: "unset",
+                overflow: "hidden",
+                transition: "all 100ms ease-in-out",
+                ...parseFromValuesOrFunc(paperProps?.sx, theme),
             })}
         >
             {enableTopToolbar &&
-                (parseFromValuesOrFunc(renderTopToolbar, {table}) ?? (
-                    <DataTable_TopToolbar table={table} columns={paperProps.columns} table_url={paperProps.table_url}
-                                          user_id={paperProps.user_id}
-                                          page_name={paperProps.page_name}
-                                          table_name={paperProps.table_name}/>
+                (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
+                    <DataTable_TopToolbar
+                        table={table}
+                        columns={paperProps.columns}
+                        table_url={paperProps.table_url}
+                        user_id={paperProps.user_id}
+                        page_name={paperProps.page_name}
+                        table_name={paperProps.table_name}
+                    />
                 ))}
-            <DataTable_TableContainer table={table}/>
+            <DataTable_TableContainer table={table} />
             {enableBottomToolbar &&
-                (parseFromValuesOrFunc(renderBottomToolbar, {table}) ?? (
-                    <DataTable_BottomToolbar table={table}/>
-                ))}
+                (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? <DataTable_BottomToolbar table={table} />)}
         </Paper>
     );
 };

src/core/components/DataTable/table/Table.js

@@ -5,10 +5,7 @@ import { useMemo } from "react";
 import DataTable_TableBody, { Memo_DataTable_TableBody } from "../body/TableBody";
 import DataTable_TableHead from "../head/TableHead";
 
-const DataTable_Table = ({
-    table,
-    ...rest
-}) => {
+const DataTable_Table = ({ table, ...rest }) => {
     const {
         getFlatHeaders,
         getState,
@@ -23,8 +20,7 @@ const DataTable_Table = ({
             renderCaption,
         },
     } = table;
-    const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } =
-        getState();
+    const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } = getState();
 
     const tableProps = {
         ...parseFromValuesOrFunc(muiTableProps, { table }),
@@ -58,14 +54,14 @@ const DataTable_Table = ({
             {...tableProps}
             style={{ ...columnSizeVars, ...tableProps?.style }}
             sx={(theme) => ({
-                display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
-                position: 'relative',
-                ...(parseFromValuesOrFunc(tableProps?.sx, theme)),
+                display: layoutMode?.startsWith("grid") ? "grid" : undefined,
+                position: "relative",
+                ...parseFromValuesOrFunc(tableProps?.sx, theme),
             })}
         >
             {!!Caption && <caption>{Caption}</caption>}
             {enableTableHead && <DataTable_TableHead {...commonTableGroupProps} />}
-            {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
+            {memoMode === "table-body" || columnSizingInfo.isResizingColumn ? (
                 <Memo_DataTable_TableBody {...commonTableGroupProps} />
             ) : (
                 <DataTable_TableBody {...commonTableGroupProps} />
@@ -73,5 +69,5 @@ const DataTable_Table = ({
             {/* {enableTableFooter && <MRT_TableFooter {...commonTableGroupProps} />} */}
         </Table>
     );
-}
-export default DataTable_Table
+};
+export default DataTable_Table;

src/core/components/DataTable/table/TableContainer.js

@@ -5,31 +5,17 @@ import DataTable_CellActionMenu from "../menus/CellActionMenu";
 import DataTable_Table from "./Table";
 import DataTable_TableLoadingOverlay from "./TableLoadingOverlay";
 
-const useIsomorphicLayoutEffect =
-    typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 
-const DataTable_TableContainer = ({
-    table,
-    ...rest
-}) => {
+const DataTable_TableContainer = ({ table, ...rest }) => {
     const {
         getState,
-        options: {
-            enableCellActions,
-            enableStickyHeader,
-            muiTableContainerProps,
-        },
+        options: { enableCellActions, enableStickyHeader, muiTableContainerProps },
         refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
     } = table;
-    const {
-        actionCell,
-        isFullScreen,
-        isLoading,
-        showLoadingOverlay,
-    } = getState();
+    const { actionCell, isFullScreen, isLoading, showLoadingOverlay } = getState();
 
-    const loading =
-        showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
+    const loading = showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
 
     const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
@@ -41,15 +27,9 @@ const DataTable_TableContainer = ({
     };
 
     useIsomorphicLayoutEffect(() => {
-        const topToolbarHeight =
-            typeof document !== 'undefined'
-                ? topToolbarRef.current?.offsetHeight ?? 0
-                : 0;
+        const topToolbarHeight = typeof document !== "undefined" ? topToolbarRef.current?.offsetHeight ?? 0 : 0;
 
-        const bottomToolbarHeight =
-            typeof document !== 'undefined'
-                ? bottomToolbarRef?.current?.offsetHeight ?? 0
-                : 0;
+        const bottomToolbarHeight = typeof document !== "undefined" ? bottomToolbarRef?.current?.offsetHeight ?? 0 : 0;
 
         setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
     });
@@ -57,7 +37,7 @@ const DataTable_TableContainer = ({
     return (
         <TableContainer
             aria-busy={loading}
-            aria-describedby={loading ? 'mrt-progress' : undefined}
+            aria-describedby={loading ? "mrt-progress" : undefined}
             {...tableContainerProps}
             ref={(node) => {
                 if (node) {
@@ -69,19 +49,17 @@ const DataTable_TableContainer = ({
                 }
             }}
             style={{
-                maxHeight: isFullScreen
-                    ? `calc(100vh - ${totalToolbarHeight}px)`
-                    : undefined,
+                maxHeight: isFullScreen ? `calc(100vh - ${totalToolbarHeight}px)` : undefined,
                 ...tableContainerProps?.style,
             }}
             sx={(theme) => ({
                 maxHeight: enableStickyHeader
                     ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
                     : undefined,
-                maxWidth: '100%',
-                overflow: 'auto',
-                position: 'relative',
-                ...(parseFromValuesOrFunc(tableContainerProps?.sx, theme)),
+                maxWidth: "100%",
+                overflow: "auto",
+                position: "relative",
+                ...parseFromValuesOrFunc(tableContainerProps?.sx, theme),
             })}
         >
             {loading ? <DataTable_TableLoadingOverlay table={table} /> : null}
@@ -89,6 +67,5 @@ const DataTable_TableContainer = ({
             {enableCellActions && actionCell && <DataTable_CellActionMenu table={table} />}
         </TableContainer>
     );
-
-}
-export default DataTable_TableContainer
+};
+export default DataTable_TableContainer;

src/core/components/DataTable/table/TableLoadingOverlay.js

@@ -1,9 +1,6 @@
 import { Box, CircularProgress } from "@mui/material";
 
-const DataTable_TableLoadingOverlay = ({
-    table,
-    ...rest
-}) => {
+const DataTable_TableLoadingOverlay = ({ table, ...rest }) => {
     const {
         options: {
             localization,
@@ -20,17 +17,17 @@ const DataTable_TableLoadingOverlay = ({
     return (
         <Box
             sx={{
-                alignItems: 'center',
+                alignItems: "center",
                 backgroundColor: alpha(baseBackgroundColor, 0.5),
                 bottom: 0,
-                display: 'flex',
-                justifyContent: 'center',
+                display: "flex",
+                justifyContent: "center",
                 left: 0,
-                maxHeight: '100vh',
-                position: 'absolute',
+                maxHeight: "100vh",
+                position: "absolute",
                 right: 0,
                 top: 0,
-                width: '100%',
+                width: "100%",
                 zIndex: 3,
             }}
         >
@@ -43,6 +40,5 @@ const DataTable_TableLoadingOverlay = ({
             )}
         </Box>
     );
-
-}
-export default DataTable_TableLoadingOverlay
+};
+export default DataTable_TableLoadingOverlay;

src/core/components/DataTable/toolbar/BottomToolbar.js

@@ -3,23 +3,15 @@ import { Box, alpha, useMediaQuery } from "@mui/material";
 import DataTable_LinearProgressBar from "./LinearProgressBar";
 import DataTable_TablePagination from "./TablePagination";
 
-const DataTable_BottomToolbar = ({
-    table,
-    ...rest
-}) => {
+const DataTable_BottomToolbar = ({ table, ...rest }) => {
     const {
         getState,
-        options: {
-            enablePagination,
-            muiBottomToolbarProps,
-            positionPagination,
-            renderBottomToolbarCustomActions,
-        },
+        options: { enablePagination, muiBottomToolbarProps, positionPagination, renderBottomToolbarCustomActions },
         refs: { bottomToolbarRef },
     } = table;
     const { isFullScreen } = getState();
 
-    const isMobile = useMediaQuery('(max-width:720px)');
+    const isMobile = useMediaQuery("(max-width:720px)");
     const toolbarProps = {
         ...parseFromValuesOrFunc(muiBottomToolbarProps, { table }),
         ...rest,
@@ -40,49 +32,41 @@ const DataTable_BottomToolbar = ({
             }}
             sx={(theme) => ({
                 ...getCommonToolbarStyles({ table, theme }),
-                bottom: isFullScreen ? '0' : undefined,
-                boxShadow: `0 1px 2px -1px ${alpha(
-                    theme.palette.grey[700],
-                    0.5,
-                )} inset`,
+                bottom: isFullScreen ? "0" : undefined,
+                boxShadow: `0 1px 2px -1px ${alpha(theme.palette.grey[700], 0.5)} inset`,
                 left: 0,
-                position: isFullScreen ? 'fixed' : 'relative',
+                position: isFullScreen ? "fixed" : "relative",
                 right: 0,
-                ...(parseFromValuesOrFunc(toolbarProps?.sx, theme)),
+                ...parseFromValuesOrFunc(toolbarProps?.sx, theme),
             })}
         >
             <DataTable_LinearProgressBar isTopToolbar={false} table={table} />
             <Box
                 sx={{
-                    alignItems: 'center',
-                    boxSizing: 'border-box',
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    p: '0.5rem',
-                    width: '100%',
+                    alignItems: "center",
+                    boxSizing: "border-box",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    p: "0.5rem",
+                    width: "100%",
                 }}
             >
-                {renderBottomToolbarCustomActions ? (
-                    renderBottomToolbarCustomActions({ table })
-                ) : (
-                    <span />
-                )}
+                {renderBottomToolbarCustomActions ? renderBottomToolbarCustomActions({ table }) : <span />}
                 <Box
                     sx={{
-                        display: 'flex',
-                        justifyContent: 'flex-end',
-                        position: stackAlertBanner ? 'relative' : 'absolute',
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        position: stackAlertBanner ? "relative" : "absolute",
                         right: 0,
                         top: 0,
                     }}
                 >
-                    {enablePagination &&
-                        ['both', 'bottom'].includes(positionPagination ?? '') && (
-                            <DataTable_TablePagination position="bottom" table={table} />
-                        )}
+                    {enablePagination && ["both", "bottom"].includes(positionPagination ?? "") && (
+                        <DataTable_TablePagination position="bottom" table={table} />
+                    )}
                 </Box>
             </Box>
         </Box>
     );
-}
-export default DataTable_BottomToolbar
+};
+export default DataTable_BottomToolbar;

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
         >
             <LinearProgress
                 aria-busy="true"
                 aria-label="Loading"
-                sx={{ position: 'relative' }}
+                sx={{ position: "relative" }}
                 {...linearProgressProps}
             />
         </Collapse>
     );
-}
-export default DataTable_LinearProgressBar
+};
+export default DataTable_LinearProgressBar;

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 = ({
         <Box
             className="MuiTablePagination-root"
             sx={{
-                alignItems: 'center',
-                display: 'flex',
-                flexWrap: 'wrap',
-                gap: '8px',
-                justifyContent: { md: 'space-between', sm: 'center' },
-                justifySelf: 'flex-end',
-                mt:
-                    position === 'top' &&
-                        enableToolbarInternalActions &&
-                        !showGlobalFilter
-                        ? '3rem'
-                        : undefined,
-                position: 'relative',
-                px: '8px',
-                py: '12px',
+                alignItems: "center",
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "8px",
+                justifyContent: { md: "space-between", sm: "center" },
+                justifySelf: "flex-end",
+                mt: position === "top" && enableToolbarInternalActions && !showGlobalFilter ? "3rem" : undefined,
+                position: "relative",
+                px: "8px",
+                py: "12px",
                 zIndex: 2,
             }}
         >
             {showRowsPerPage && (
-                <Box sx={{ alignItems: 'center', display: 'flex', gap: '8px' }}>
+                <Box sx={{ alignItems: "center", display: "flex", gap: "8px" }}>
                     <InputLabel htmlFor="mrt-rows-per-page" sx={{ mb: 0 }}>
                         {localization.rowsPerPage}
                     </InputLabel>
@@ -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 = ({
                     </Select>
                 </Box>
             )}
-            {paginationDisplayMode === 'pages' ? (
+            {paginationDisplayMode === "pages" ? (
                 <Pagination
                     count={numberOfPages}
                     disabled={disabled}
@@ -145,16 +144,18 @@ const DataTable_TablePagination = ({
                     showLastButton={showLastButton}
                     {...restPaginationProps}
                 />
-            ) : paginationDisplayMode === 'default' ? (
+            ) : paginationDisplayMode === "default" ? (
                 <>
                     <Typography
                         align="center"
                         component="span"
-                        sx={{ m: '0 4px', minWidth: '8ch' }}
+                        sx={{ m: "0 4px", minWidth: "8ch" }}
                         variant="body2"
-                    >{`${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
-                        }-${lastRowIndex.toLocaleString()} ${localization.of
-                        } ${totalRowCount.toLocaleString()}`}</Typography>
+                    >{`${
+                        lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
+                    }-${lastRowIndex.toLocaleString()} ${
+                        localization.of
+                    } ${totalRowCount.toLocaleString()}`}</Typography>
                     <Box gap="xs">
                         {showFirstButton && (
                             <Tooltip {...tooltipProps} title={localization.goToFirstPage}>
@@ -213,5 +214,5 @@ const DataTable_TablePagination = ({
             ) : null}
         </Box>
     );
-}
-export default DataTable_TablePagination
+};
+export default DataTable_TablePagination;

src/core/components/DataTable/toolbar/ToolbarInternalButtons.js

@@ -16,32 +16,29 @@ const DataTable_ToolbarInternalButtons = ({ table, ...rest }) => {
         },
     } = table;
 
-
     return (
         <Box
             {...rest}
             sx={(theme) => ({
-                alignItems: 'center',
-                display: 'flex',
+                alignItems: "center",
+                display: "flex",
                 zIndex: 3,
-                ...(parseFromValuesOrFunc(rest?.sx, theme)),
+                ...parseFromValuesOrFunc(rest?.sx, theme),
             })}
         >
             {renderToolbarInternalActions?.({
                 table,
             }) ?? (
-                    <>
-                        {enableFilters &&
-                            enableColumnFilters &&
-                            columnFilterDisplayMode !== 'popover' && (
-                                <DataTable_ToggleFiltersButton table={table} />
-                            )}
-                        {(enableHiding || enableColumnOrdering || enableColumnPinning) && (
-                            <DataTable_ShowHideColumnsButton table={table} />
-                        )}
-                    </>
-                )}
+                <>
+                    {enableFilters && enableColumnFilters && columnFilterDisplayMode !== "popover" && (
+                        <DataTable_ToggleFiltersButton table={table} />
+                    )}
+                    {(enableHiding || enableColumnOrdering || enableColumnPinning) && (
+                        <DataTable_ShowHideColumnsButton table={table} />
+                    )}
+                </>
+            )}
         </Box>
     );
-}
-export default DataTable_ToolbarInternalButtons
+};
+export default DataTable_ToolbarInternalButtons;

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 (
         <Box
@@ -41,51 +38,55 @@ const DataTable_TopToolbar = ({table, columns, table_url, user_id, page_name, ta
                 }
             }}
             sx={(theme) => ({
-                ...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),
             })}
         >
             <Box
                 sx={{
-                    alignItems: 'flex-start',
-                    boxSizing: 'border-box',
-                    display: 'flex',
-                    gap: '0.5rem',
-                    justifyContent: 'space-between',
-                    p: '0.5rem',
-                    position: stackAlertBanner ? 'relative' : 'absolute',
+                    alignItems: "flex-start",
+                    boxSizing: "border-box",
+                    display: "flex",
+                    gap: "0.5rem",
+                    justifyContent: "space-between",
+                    p: "0.5rem",
+                    position: stackAlertBanner ? "relative" : "absolute",
                     right: 0,
                     top: 0,
-                    width: '100%',
+                    width: "100%",
                 }}
             >
-                {renderTopToolbarCustomActions?.({table}) ?? <span/>}
+                {renderTopToolbarCustomActions?.({ table }) ?? <span />}
                 {enableToolbarInternalActions && (
                     <Box
                         sx={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexWrap: 'wrap-reverse',
-                            gap: '0.5rem',
-                            justifyContent: 'flex-end',
+                            alignItems: "center",
+                            display: "flex",
+                            flexWrap: "wrap-reverse",
+                            gap: "0.5rem",
+                            justifyContent: "flex-end",
                         }}
                     >
-                        <RefactorTable/>
-                        <FilterColumn columns={columns} table_url={table_url} user_id={user_id} page_name={page_name}
-                                      table_name={table_name}/>
-                        <DataTable_ToolbarInternalButtons table={table}/>
+                        <RefactorTable />
+                        <FilterColumn
+                            columns={columns}
+                            table_url={table_url}
+                            user_id={user_id}
+                            page_name={page_name}
+                            table_name={table_name}
+                        />
+                        <DataTable_ToolbarInternalButtons table={table} />
                     </Box>
                 )}
             </Box>
-            {enablePagination &&
-                ['both', 'top'].includes(positionPagination ?? '') && (
-                    <DataTable_TablePagination position="top" table={table}/>
-                )}
-            <DataTable_LinearProgressBar isTopToolbar table={table}/>
+            {enablePagination && ["both", "top"].includes(positionPagination ?? "") && (
+                <DataTable_TablePagination position="top" table={table} />
+            )}
+            <DataTable_LinearProgressBar isTopToolbar table={table} />
         </Box>
     );
-}
+};
 
-export default DataTable_TopToolbar
+export default DataTable_TopToolbar;

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 (
-        <Box sx={{width: "100%"}}>
-            <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1}}>
-                <Typography color="#155175" variant="subtitle1" sx={{fontWeight: "500"}}>
+        <Box sx={{ width: "100%" }}>
+            <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1 }}>
+                <Typography color="#155175" variant="subtitle1" sx={{ fontWeight: "500" }}>
                     ذخیره سازی تغییرات
                 </Typography>
-                <SaveIcon sx={{color: "#155175"}}/>
+                <SaveIcon sx={{ color: "#155175" }} />
             </Box>
-            <Box sx={{display: "flex", flexDirection: "column"}}>
-                <Typography variant="caption">
-                    آیا مایل به ذخیره تغییر های اعمال شده برای دفعات بعد هستید؟
-                </Typography>
+            <Box sx={{ display: "flex", flexDirection: "column" }}>
+                <Typography variant="caption">آیا مایل به ذخیره تغییر های اعمال شده برای دفعات بعد هستید؟</Typography>
             </Box>
-            <Box sx={{display: "flex", gap: 1, mt: 1}}>
-                <Button variant="contained" onClick={handleDismiss} sx={{
-                    backgroundColor: "#792626",
-                    ':hover': {backgroundColor: "#792626"},
-                    boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
-                }}>رد
-                    کردن</Button>
-                <Button variant="contained" component="label" endIcon={<DownloadIcon/>}
-                        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",
-                        }}>ذخیره
-                    فیلتر</Button>
+            <Box sx={{ display: "flex", gap: 1, mt: 1 }}>
+                <Button
+                    variant="contained"
+                    onClick={handleDismiss}
+                    sx={{
+                        backgroundColor: "#792626",
+                        ":hover": { backgroundColor: "#792626" },
+                        boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
+                    }}
+                >
+                    رد کردن
+                </Button>
+                <Button
+                    variant="contained"
+                    component="label"
+                    endIcon={<DownloadIcon />}
+                    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",
+                    }}
+                >
+                    ذخیره
+                </Button>
             </Box>
         </Box>
     );

src/core/components/NotificationDesign/AskForKeepFilter.jsx

@@ -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 (
-        <Box sx={{width: "100%"}}>
-            <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1}}>
-                <Typography color="#155175" variant="subtitle1" sx={{fontWeight: "500"}}>
-                    ذخیره سازی فیلتر
-                </Typography>
-                <SaveIcon sx={{color: "#155175"}}/>
-            </Box>
-            <Box sx={{display: "flex", flexDirection: "column"}}>
-                <Typography variant="caption">
-                    آیا مایل به ذخیره فیلتر های اعمال شده برای دفعات بعد هستید؟
-                </Typography>
-            </Box>
-            <Box sx={{display: "flex", gap: 1, mt: 1}}>
-                <Button variant="contained" onClick={handleDismiss} sx={{
-                    backgroundColor: "#792626",
-                    ':hover': {backgroundColor: "#792626"},
-                    boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
-                }}>رد
-                    کردن</Button>
-                <Button variant="contained" component="label" endIcon={<DownloadIcon/>}
-                        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",
-                        }}>ذخیره
-                    فیلتر</Button>
-            </Box>
-        </Box>
-    );
-}
-
-export default AskForKeepFilter;

src/core/components/NotificationDesign/AskForKeepSort.jsx

@@ -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 (
-        <Box sx={{width: "100%"}}>
-            <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1}}>
-                <Typography color="#155175" variant="subtitle1" sx={{fontWeight: "500"}}>
-                    ذخیره سازی ترتیب
-                </Typography>
-                <SaveIcon sx={{color: "#155175"}}/>
-            </Box>
-            <Box sx={{display: "flex", flexDirection: "column"}}>
-                <Typography variant="caption">
-                    آیا مایل به ذخیره ترتیب های اعمال شده برای دفعات بعد هستید؟
-                </Typography>
-            </Box>
-            <Box sx={{display: "flex", gap: 1, mt: 1}}>
-                <Button variant="contained" onClick={handleDismiss} sx={{
-                    backgroundColor: "#792626",
-                    ':hover': {backgroundColor: "#792626"},
-                    boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
-                }}>رد
-                    کردن</Button>
-                <Button variant="contained" component="label" endIcon={<DownloadIcon/>}
-                        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",
-                        }}>ذخیره
-                    ترتیب</Button>
-            </Box>
-        </Box>
-    );
-}
-
-export default AskForKeepSort;

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 (
         <>
-            <ListItem disablePadding sx={{p : 0}}>
-                <ListItemButton sx={{
-                    '&.Mui-selected': {
-                        backgroundColor: 'rgba(0, 0, 0, 0.2)',
-                    },
-                }} selected={menuItem.selected} onClick={() => {
-                    dispatch({type: "COLLAPSE_MENU", id: menuItem.id})
-                }}>
+            <ListItem disablePadding sx={{ p: 0 }}>
+                <ListItemButton
+                    sx={{
+                        "&.Mui-selected": {
+                            backgroundColor: "rgba(0, 0, 0, 0.2)",
+                        },
+                    }}
+                    selected={menuItem.selected}
+                    onClick={() => {
+                        dispatch({ type: "COLLAPSE_MENU", id: menuItem.id });
+                    }}
+                >
                     <ListItemIcon
                         sx={{
                             minWidth: 0,
@@ -27,20 +31,17 @@ const SidebarListItems = ({menuItem, dispatch}) => {
                         {menuItem.icon}
                     </ListItemIcon>
                     <ListItemText primary={menuItem.id} />
-                    {menuItem.hasSubitems ? (menuItem.showSubitems ? <ExpandLess /> : <ExpandMore />) : null }
+                    {menuItem.hasSubitems ? menuItem.showSubitems ? <ExpandLess /> : <ExpandMore /> : null}
                 </ListItemButton>
             </ListItem>
             <Collapse in={menuItem.showSubitems} timeout="auto" mountOnEnter={true} unmountOnExit={true}>
-                {
-                    menuItem.hasSubitems ?  (menuItem.Subitems.map((subitem,index)=>{
-                        return(
-                            <SidebarSubitems dispatch={dispatch} key={index} subitem={subitem}/>
-                        )
-                    })) : null
-                }
+                {menuItem.hasSubitems
+                    ? menuItem.Subitems.map((subitem, index) => {
+                          return <SidebarSubitems dispatch={dispatch} key={index} subitem={subitem} />;
+                      })
+                    : null}
             </Collapse>
-
         </>
-    )
-}
-export default SidebarListItems
+    );
+};
+export default SidebarListItems;

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: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
+        icon: <SecurityIcon sx={{ width: "inherit", height: "inherit" }} />,
         selected: false,
         Subitems: [
             {
                 id: "amin",
                 route: "/s",
-                icon: <SpaceDashboardIcon sx={{width: 'inherit', height: 'inherit'}}/>,
+                icon: <SpaceDashboardIcon sx={{ width: "inherit", height: "inherit" }} />,
                 firstName: "amin",
                 lastName: "ali",
                 Subitems: [
                     {
-                        id: "shahrokh", shahrokh: "shahrokh", type: "page", selected: false, route: "/dashbssoard", icon: <AssessmentIcon sx={{width: 'inherit', height: 'inherit'}}/>
+                        id: "shahrokh",
+                        shahrokh: "shahrokh",
+                        type: "page",
+                        selected: false,
+                        route: "/dashbssoard",
+                        icon: <AssessmentIcon sx={{ width: "inherit", height: "inherit" }} />,
                     },
                     {
-                        id: "shasdasdsahrokh", shahrokh: "shahroasdasdkh", type: "page", selected: false, route: "/dashboardsd", icon: <AirlineSeatReclineNormalIcon sx={{width: 'inherit', height: 'inherit'}}/>
-                    }
+                        id: "shasdasdsahrokh",
+                        shahrokh: "shahroasdasdkh",
+                        type: "page",
+                        selected: false,
+                        route: "/dashboardsd",
+                        icon: <AirlineSeatReclineNormalIcon sx={{ width: "inherit", height: "inherit" }} />,
+                    },
                 ],
                 hasSubitems: true,
                 showSubitems: false,
@@ -39,7 +49,7 @@ const data = [
             {
                 id: "amir",
                 route: "/dashboarsad",
-                icon: <RepartitionIcon sx={{width: 'inherit', height: 'inherit'}}/>,
+                icon: <RepartitionIcon sx={{ width: "inherit", height: "inherit" }} />,
                 firstName: "amir",
                 lastName: "akbar",
                 hasSubitems: false,
@@ -49,12 +59,12 @@ const data = [
             },
         ],
         hasSubitems: true,
-        showSubitems: false
+        showSubitems: false,
     },
     {
         id: "hi",
         type: "menu",
-        icon: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
+        icon: <SecurityIcon sx={{ width: "inherit", height: "inherit" }} />,
         route: "/hi",
         selected: false,
         Subitems: [
@@ -63,7 +73,7 @@ const data = [
                 route: "/dashboardss",
                 firstName: "ali",
                 lastName: "ali",
-                icon: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
+                icon: <SecurityIcon sx={{ width: "inherit", height: "inherit" }} />,
                 hasSubitems: false,
                 showSubitems: false,
                 type: "page",
@@ -73,7 +83,7 @@ const data = [
                 id: "akbar",
                 route: "/akbar",
                 firstName: "akbar",
-                icon: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
+                icon: <SecurityIcon sx={{ width: "inherit", height: "inherit" }} />,
                 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: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
+        icon: <SecurityIcon sx={{ width: "inherit", height: "inherit" }} />,
         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 (
         <List disablePadding>
-            {
-                menuItems.map((menuItem) => {
-                    return (
-                        <SidebarListItems dispatch={dispatch} key={menuItem.id} menuItem={menuItem}/>
-                    )
-                })
-            }
+            {menuItems.map((menuItem) => {
+                return <SidebarListItems dispatch={dispatch} key={menuItem.id} menuItem={menuItem} />;
+            })}
         </List>
-    )
-}
-export default SidebarMenu
+    );
+};
+export default SidebarMenu;

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 (
         <>
             <List disablePadding>
                 <ListItem disablePadding>
-                    <ListItemButton sx={{
-                        '&.Mui-selected': {
-                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                        },
-                    }} selected={subitem.selected} onClick={() => {
-                        dispatch({type: "COLLAPSE_SUB_ITEMS", id: subitem.id})
-                    }}>
+                    <ListItemButton
+                        sx={{
+                            "&.Mui-selected": {
+                                backgroundColor: "rgba(0, 0, 0, 0.1)",
+                            },
+                        }}
+                        selected={subitem.selected}
+                        onClick={() => {
+                            dispatch({ type: "COLLAPSE_SUB_ITEMS", id: subitem.id });
+                        }}
+                    >
                         <ListItemIcon
                             sx={{
                                 minWidth: 0,
@@ -25,50 +29,55 @@ const SidebarSubitems = ({subitem, dispatch}) => {
                         >
                             {subitem.icon}
                         </ListItemIcon>
-                        <ListItemText primary={subitem.firstName}/>
-                        {subitem.hasSubitems ? (subitem.showSubitems ? <ExpandLess/> : <ExpandMore/>) : null
-                        }
+                        <ListItemText primary={subitem.firstName} />
+                        {subitem.hasSubitems ? subitem.showSubitems ? <ExpandLess /> : <ExpandMore /> : null}
                     </ListItemButton>
                 </ListItem>
             </List>
-            {
-                subitem.hasSubitems ? (subitem.Subitems.map((subSubitem, index) => {
-                    return (
-                        <Collapse key={index} in={subitem.showSubitems} timeout="auto" mountOnEnter={true} unmountOnExit={true}>
-                            <List disablePadding>
-                                <ListItem disablePadding>
-                                    <ListItemButton
-                                        onClick={() => {
-                                            dispatch({type: "COLLAPSE_SUB_SECOND_ITEMS", id: subSubitem.id})
-                                        }}
-                                        selected={subSubitem.selected}
-                                        sx={{
-                                            '&.Mui-selected': {
-                                                backgroundColor: 'rgba(0, 0, 0, 0.05)',
-                                            },
-                                        }}
-                                    >
-                                        <ListItemIcon
-                                            sx={{
-                                                minWidth: 0,
-                                                justifyContent: "center",
-                                                color: "primary.main",
-                                                width: 40,
-                                                height: 24,
-                                                pr: 2,
-                                            }}
-                                        >
-                                            {subSubitem.icon}
-                                        </ListItemIcon>
-                                        <ListItemText primary={subSubitem.shahrokh}/>
-                                    </ListItemButton>
-                                </ListItem>
-                            </List>
-                        </Collapse>
-                    )
-                })) : null
-            }
+            {subitem.hasSubitems
+                ? subitem.Subitems.map((subSubitem, index) => {
+                      return (
+                          <Collapse
+                              key={index}
+                              in={subitem.showSubitems}
+                              timeout="auto"
+                              mountOnEnter={true}
+                              unmountOnExit={true}
+                          >
+                              <List disablePadding>
+                                  <ListItem disablePadding>
+                                      <ListItemButton
+                                          onClick={() => {
+                                              dispatch({ type: "COLLAPSE_SUB_SECOND_ITEMS", id: subSubitem.id });
+                                          }}
+                                          selected={subSubitem.selected}
+                                          sx={{
+                                              "&.Mui-selected": {
+                                                  backgroundColor: "rgba(0, 0, 0, 0.05)",
+                                              },
+                                          }}
+                                      >
+                                          <ListItemIcon
+                                              sx={{
+                                                  minWidth: 0,
+                                                  justifyContent: "center",
+                                                  color: "primary.main",
+                                                  width: 40,
+                                                  height: 24,
+                                                  pr: 2,
+                                              }}
+                                          >
+                                              {subSubitem.icon}
+                                          </ListItemIcon>
+                                          <ListItemText primary={subSubitem.shahrokh} />
+                                      </ListItemButton>
+                                  </ListItem>
+                              </List>
+                          </Collapse>
+                      );
+                  })
+                : null}
         </>
-    )
-}
-export default SidebarSubitems
+    );
+};
+export default SidebarSubitems;

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 <CacheProvider value={cache}>{props.children}</CacheProvider>;
-}
+};
 
-export default cacheProviderRtl
+export default cacheProviderRtl;

src/core/utils/flattenArrayOfObjects.js

@@ -7,4 +7,4 @@ export const flattenArrayOfObjects = (array, key) => {
         }
         return acc;
     }, []);
-};
+};

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
+export default theme;

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,
-};
+    content: '""',
+    height: "100%",
+    left: 0,
+    position: "absolute",
+    top: 0,
+    width: "100%",
+    zIndex: -1,
+};

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(<AskForKeepData filterData={filterData} sortData={sortData} user_id={user_id} page_name={page_name}
-                              table_name={table_name}
-                              columns={columns}/>, {
-            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(
+                    <AskForKeepData
+                        filterData={filterData}
+                        sortData={sortData}
+                        user_id={user_id}
+                        page_name={page_name}
+                        table_name={table_name}
+                        columns={flatColumns}
+                    />,
+                    {
+                        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: (
+                        <AskForKeepData
+                            filterData={filterData}
+                            sortData={sortData}
+                            user_id={user_id}
+                            page_name={page_name}
+                            table_name={table_name}
+                            columns={flatColumns}
+                        />
+                    ),
+                });
+            }
+        } else {
+            toast.dismiss({ containerId: "datatable" });
+        }
     }, [filterData, sortData]);
 
+    if (!isInitStates) return null;
+
     return (
-        <DataTableContext.Provider value={{filterData, setFilterData, sortData, setSortData}}>
+        <DataTableContext.Provider value={{ filterData, setFilterData, sortData, setSortData }}>
             {children}
         </DataTableContext.Provider>
     );
 };
 
-export default DataTableProvider;
+export default DataTableProvider;

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 (
-        <TableSettingContext.Provider
-            value={{settingStore, hideAction, sortAction, filterAction, refactorAction}}>
+        <TableSettingContext.Provider value={{ settingStore, hideAction, sortAction, filterAction, refactorAction }}>
             {children}
         </TableSettingContext.Provider>
     );
-};
+};

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;

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;