implementation of datatable

2024-04-16 11:45:14 +03:30
parent 78548e89e7
commit a8e28a4f8c
29 changed files with 2983 additions and 2 deletions
--- a/src/core/components/DataTable/body/TableBodyCellValue.js
+++ b/src/core/components/DataTable/body/TableBodyCellValue.js
@@ -0,0 +1,112 @@
+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();
+
+  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,
+    });
+  }
+
+  return renderedCellValue;
+};
+export default DataTable_TableBodyCellValue;