@careharmony/mantine-react-table-ng 0.0.0-stage → 4.0.0-beta.0

package/src/components/body/MRT_TableBodyCellValue.tsx

@@ -0,0 +1,114 @@
+'use no memo';
+
+import { Highlight, type HighlightProps } from '@mantine/core';
+
+import {
+  type MRT_Cell,
+  type MRT_CellValue,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+const allowedTypes = ['string', 'number'];
+const allowedFilterVariants = ['text', 'autocomplete'];
+
+interface Props<TData extends MRT_RowData, TValue = MRT_CellValue> {
+  cell: MRT_Cell<TData, TValue>;
+  renderedColumnIndex?: number;
+  renderedRowIndex?: number;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
+  cell,
+  renderedColumnIndex = 0,
+  renderedRowIndex = 0,
+  table,
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      enableFilterMatchHighlighting,
+      mantineHighlightProps = { size: 'sm' },
+    },
+  } = table;
+  const { column, row } = cell;
+  const { columnDef } = column;
+  const { globalFilter, globalFilterFn } = getState();
+  const filterValue = column.getFilterValue();
+
+  const highlightProps = parseFromValuesOrFunc(mantineHighlightProps, {
+    cell,
+    column,
+    row,
+    table,
+  }) as Partial<HighlightProps>;
+
+  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() as number | string;
+  }
+
+  if (
+    enableFilterMatchHighlighting &&
+    columnDef.enableFilterMatchHighlighting !== false &&
+    renderedCellValue &&
+    allowedTypes.includes(typeof renderedCellValue) &&
+    ((filterValue &&
+      allowedTypes.includes(typeof filterValue) &&
+      allowedFilterVariants.includes(columnDef.filterVariant as string)) ||
+      (globalFilter &&
+        allowedTypes.includes(typeof globalFilter) &&
+        column.getCanGlobalFilter()))
+  ) {
+    let highlight: string | string[] = (
+      column.getFilterValue() ??
+      globalFilter ??
+      ''
+    ).toString() as string;
+    if ((filterValue ? columnDef._filterFn : globalFilterFn) === 'fuzzy') {
+      highlight = highlight.split(' ');
+    }
+
+    renderedCellValue = (
+      <Highlight color="yellow.3" highlight={highlight} {...highlightProps}>
+        {renderedCellValue?.toString()}
+      </Highlight>
+    );
+  }
+
+  if (columnDef.Cell && !isGroupedValue) {
+    renderedCellValue = columnDef.Cell({
+      cell,
+      column,
+      renderedCellValue,
+      renderedColumnIndex,
+      renderedRowIndex,
+      row,
+      table,
+    });
+  }
+
+  return renderedCellValue;
+};

package/src/components/body/MRT_TableBodyEmptyRow.tsx

@@ -0,0 +1,89 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TableBody.module.css';
+
+import { useMemo } from 'react';
+
+import { createRow } from '@tanstack/react-table';
+
+import { type TableProps, type TableTrProps, Text } from '@mantine/core';
+
+import { MRT_TableBodyRow } from './MRT_TableBodyRow';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData> extends TableTrProps {
+  table: MRT_TableInstance<TData>;
+  tableProps: Partial<TableProps>;
+}
+
+export const MRT_TableBodyEmptyRow = <TData extends MRT_RowData>({
+  table,
+  tableProps,
+  ...commonRowProps
+}: Props<TData>) => {
+  const {
+    getState,
+    options: { layoutMode, localization, renderEmptyRowsFallback },
+    refs: { tablePaperRef },
+  } = table;
+  const { columnFilters, globalFilter } = getState();
+
+  const emptyRow = useMemo(
+    () =>
+      createRow(
+        table as any,
+        'mrt-row-empty',
+        {} as TData,
+        0,
+        0,
+      ) as MRT_Row<TData>,
+    [],
+  );
+
+  const emptyRowProps = {
+    ...commonRowProps,
+    renderedRowIndex: 0,
+    row: emptyRow,
+    virtualRow: undefined,
+  };
+
+  return (
+    <MRT_TableBodyRow
+      className={clsx(
+        'mrt-table-body-row',
+        layoutMode?.startsWith('grid') && classes['empty-row-tr-grid'],
+      )}
+      table={table}
+      tableProps={tableProps}
+      {...emptyRowProps}
+    >
+      <td
+        className={clsx(
+          'mrt-table-body-cell',
+          layoutMode?.startsWith('grid') && classes['empty-row-td-grid'],
+        )}
+        colSpan={table.getVisibleLeafColumns().length}
+      >
+        {renderEmptyRowsFallback?.({ table }) ?? (
+          <Text
+            __vars={{
+              '--mrt-paper-width': `${tablePaperRef.current?.clientWidth}`,
+            }}
+            className={clsx(classes['empty-row-td-content'])}
+          >
+            {globalFilter || columnFilters.length
+              ? localization.noResultsFound
+              : localization.noRecordsToDisplay}
+          </Text>
+        )}
+      </td>
+    </MRT_TableBodyRow>
+  );
+};

package/src/components/body/MRT_TableBodyRow.module.css

@@ -0,0 +1,261 @@
+.root {
+  --hover-thickness: 3px;
+  --drag-thickness: 1px;
+
+  box-sizing: border-box;
+  transition: all 150ms ease-in-out;
+  width: 100%;
+
+  /* default background-color */
+  &:not([data-striped], [data-striped='false']) {
+    background-color: var(--mrt-base-background-color);
+  }
+  /* striped background-colors (take detail panels and virtualization into account) */
+  &:not([data-selected], [data-row-pinned]) {
+    &[data-striped='odd'] {
+      background-color: var(--mrt-striped-row-background-color);
+    }
+    &[data-striped='even'] {
+      background-color: var(--mrt-striped-row-background-color);
+    }
+  }
+
+  /* column pinning styles */
+  &:not([data-selected], [data-row-pinned]) {
+    td {
+      &[data-column-pinned] {
+        &::before {
+          background-color: var(--mrt-pinned-column-background-color);
+        }
+      }
+    }
+    &[data-striped='odd'] {
+      td {
+        &[data-column-pinned] {
+          &::before {
+            background-color: var(--mrt-striped-row-background-color);
+          }
+        }
+      }
+    }
+    &[data-striped='even'] {
+      td {
+        &[data-column-pinned] {
+          &::before {
+            background-color: var(--mrt-striped-row-background-color);
+          }
+        }
+      }
+    }
+  }
+
+  td {
+    &[data-column-pinned] {
+      background-color: var(--mrt-pinned-column-background-color);
+      opacity: 0.97;
+      position: sticky;
+      z-index: 1;
+
+      &::before {
+        content: '';
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: -1;
+      }
+
+      &[data-column-pinned='left'] {
+        /* logical offsets keep columns pinned to the same side of the row in rtl */
+        inset-inline-start: calc(var(--mrt-table-cell-left, 0) * 1px);
+        &[data-last-left-pinned] {
+          &::before {
+            --mrt-pinned-shadow-x: -6px;
+            @mixin rtl {
+              --mrt-pinned-shadow-x: 6px;
+            }
+            box-shadow: var(--mrt-pinned-shadow-x) 0 6px -6px alpha(
+                light-dark(
+                  var(--mantine-color-gray-outline),
+                  var(--mantine-color-dark-outline)
+                ),
+                0.5
+              ) inset;
+          }
+        }
+      }
+
+      &[data-column-pinned='right'] {
+        inset-inline-end: calc(var(--mrt-table-cell-right, 0) * 1px);
+        &[data-first-right-pinned] {
+          &::before {
+            --mrt-pinned-shadow-x: 6px;
+            @mixin rtl {
+              --mrt-pinned-shadow-x: -6px;
+            }
+            box-shadow: var(--mrt-pinned-shadow-x) 0 6px -6px alpha(
+                light-dark(
+                  var(--mantine-color-gray-outline),
+                  var(--mantine-color-dark-outline)
+                ),
+                0.5
+              ) inset;
+          }
+        }
+      }
+    }
+  }
+  /* end column pinning styles */
+  /* row pinning styles */
+  &[data-row-pinned] {
+    background-color: var(--mrt-pinned-row-background-color, --mantine-color-body);
+    bottom: calc(var(--mrt-pinned-row-bottom) * 1px);
+    opacity: 0.97;
+    top: calc(var(--mrt-pinned-row-top) * 1px);
+
+    td {
+      &::before {
+        background-color: var(--mrt-pinned-row-background-color);
+        content: '';
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: -1;
+      }
+      &[data-column-pinned] {
+        background-color: var(--mrt-pinned-column-background-color);
+
+        &::before {
+          background-color: var(--mrt-pinned-row-background-color);
+          content: '';
+          height: 100%;
+          left: 0;
+          position: absolute;
+          top: 0;
+          width: 100%;
+          z-index: -1;
+        }
+      }
+    }
+  }
+
+  &[data-row-pinned='sticky'] {
+    z-index: 2;
+    position: sticky;
+  }
+  /* end row pinning styles */
+
+  /* selection styles */
+  &[data-selected] {
+    background-color: var(--mrt-selected-row-background-color, --mantine-color-body);
+
+    td {
+      &[data-column-pinned] {
+        background-color: var(--mrt-pinned-column-background-color);
+
+        &::before {
+          background-color: var(--mrt-selected-row-background-color);
+        }
+      }
+    }
+  }
+  /* end selection styles */
+
+  &[data-hover] {
+    &:hover {
+      td {
+        background-color: var(--mrt-row-hover-background-color);
+        &[data-column-pinned] {
+          background-color: var(--mrt-base-background-color);
+          &::before {
+            background-color: var(--mrt-row-hover-background-color);
+          }
+        }
+      }
+      &:not([data-selected], [data-row-pinned]) {
+        &[data-striped='odd'] {
+          td {
+            background-color: var(--mrt-striped-row-hover-background-color);
+            &[data-column-pinned] {
+              background-color: var(--mrt-base-background-color);
+              &::before {
+                background-color: var(--mrt-striped-row-hover-background-color);
+              }
+            }
+          }
+        }
+        &[data-striped='even'] {
+          td {
+            background-color: var(--mrt-striped-row-hover-background-color);
+            &[data-column-pinned] {
+              background-color: var(--mrt-base-background-color);
+              &::before {
+                background-color: var(--mrt-striped-row-hover-background-color);
+              }
+            }
+          }
+        }
+      }
+      &[data-selected] {
+        td {
+          background-color: var(--mrt-selected-row-hover-background-color);
+
+          &[data-column-pinned] {
+            background-color: var(--mrt-base-background-color);
+
+            &::before {
+              background-color: var(--mrt-selected-row-hover-background-color);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &[data-dragging-row] {
+    opacity: 0.5;
+    border-bottom: var(--drag-thickness) dashed var(--drag-color);
+    border-top: var(--drag-thickness) dashed var(--drag-color);
+    td {
+      &:first-child {
+        border-left: var(--drag-thickness) dashed var(--drag-color);
+      }
+      &:last-child {
+        border-right: var(--drag-thickness) dashed var(--drag-color);
+      }
+    }
+  }
+
+  &[data-hovered-row-target] {
+    td {
+      opacity: 0.5;
+      border-top: var(--hover-thickness) dashed
+        var(--mrt-dragging-hovered-border-color);
+      border-bottom: var(--hover-thickness) dashed
+        var(--mrt-dragging-hovered-border-color);
+      &:first-child {
+        border-left: var(--hover-thickness) dashed
+          var(--mrt-dragging-hovered-border-color);
+      }
+      &:last-child {
+        border-right: var(--hover-thickness) dashed
+          var(--mrt-dragging-hovered-border-color);
+      }
+    }
+  }
+}
+
+.root-grid {
+  display: flex;
+}
+
+.root-virtualized {
+  position: absolute !important;
+  top: 0;
+  transition: none !important;
+  transform: translateY(var(--mrt-virtual-row-start));
+  will-change: transform;
+}