@kissesses/mantine-react-table-open 9.0.3

package/src/components/footer/MRT_TableFooter.tsx

@@ -0,0 +1,72 @@
+import clsx from 'clsx';
+
+import classes from './MRT_TableFooter.module.css';
+
+import { TableTfoot, type TableTfootProps } from '@mantine/core';
+
+import { MRT_TableFooterRow } from './MRT_TableFooterRow';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends TableTfootProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableFooter = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getFooterGroups,
+    getState,
+    options: { enableStickyFooter, layoutMode, mantineTableFooterProps },
+    refs: { tableFooterRef },
+  } = table;
+  const { isFullScreen } = getState();
+
+  const tableFooterProps = {
+    ...parseFromValuesOrFunc(mantineTableFooterProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const stickFooter =
+    (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
+
+  return (
+    <TableTfoot
+      {...tableFooterProps}
+      className={clsx(
+        classes.root,
+        tableFooterProps?.className,
+        stickFooter && classes.sticky,
+        layoutMode?.startsWith('grid') && classes.grid,
+      )}
+      ref={(ref: HTMLTableSectionElement) => {
+        tableFooterRef.current = ref;
+        if (tableFooterProps?.ref) {
+          // @ts-ignore
+          tableFooterProps.ref.current = ref;
+        }
+      }}
+    >
+      {getFooterGroups().map((footerGroup) => (
+        <MRT_TableFooterRow
+          columnVirtualizer={columnVirtualizer}
+          footerGroup={footerGroup as any}
+          key={footerGroup.id}
+          table={table}
+        />
+      ))}
+    </TableTfoot>
+  );
+};

package/src/components/footer/MRT_TableFooterCell.module.css

@@ -0,0 +1,50 @@
+.root {
+  font-size: 0.8rem;
+  font-weight: bold;
+  padding: 1rem;
+  text-align: var(--mrt-cell-align, left);
+  vertical-align: top;
+  z-index: 1;
+
+  &.grid {
+    display: flex;
+    justify-content: var(--mrt-cell-align, flex-start);
+  }
+
+  &.group {
+    text-align: center;
+    justify-content: center;
+  }
+
+  background-color: var(--mrt-base-background-color);
+
+  &[data-column-pinned] {
+    position: sticky;
+  }
+
+  &[data-column-pinned='left'] {
+    left: calc(var(--mrt-table-cell-left, 0) * 1px);
+    &[data-last-left-pinned] {
+      box-shadow: -6px 0 6px -6px alpha(
+          light-dark(
+            var(--mantine-color-gray-outline),
+            var(--mantine-color-dark-outline)
+          ),
+          0.5
+        ) inset;
+    }
+  }
+
+  &[data-column-pinned='right'] {
+    right: calc(var(--mrt-table-cell-right, 0) * 1px);
+    &[data-first-right-pinned] {
+      box-shadow: 6px 0 6px -6px alpha(
+          light-dark(
+            var(--mantine-color-gray-outline),
+            var(--mantine-color-dark-outline)
+          ),
+          0.5
+        ) inset;
+    }
+  }
+}

package/src/components/footer/MRT_TableFooterCell.tsx

@@ -0,0 +1,122 @@
+import clsx from 'clsx';
+
+import classes from './MRT_TableFooterCell.module.css';
+
+import { type CSSProperties } from 'react';
+
+import { TableTh, type TableThProps, useDirection } from '@mantine/core';
+
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseCSSVarId } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends TableThProps {
+  footer: MRT_Header<TData>;
+  renderedColumnIndex?: number;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableFooterCell = <TData extends MRT_RowData>({
+  footer,
+  renderedColumnIndex,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const direction = useDirection();
+  const {
+    options: { enableColumnPinning, layoutMode, mantineTableFooterCellProps },
+  } = table;
+  const { column } = footer;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const isColumnPinned =
+    enableColumnPinning &&
+    columnDef.columnDefType !== 'group' &&
+    column.getIsPinned();
+
+  const args = { column, table };
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(mantineTableFooterCellProps, args),
+    ...parseFromValuesOrFunc(columnDef.mantineTableFooterCellProps, args),
+    ...rest,
+  };
+
+  const widthStyles: CSSProperties = {
+    minWidth: `max(calc(var(--header-${parseCSSVarId(
+      footer?.id,
+    )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
+    width: `calc(var(--header-${parseCSSVarId(footer.id)}-size) * 1px)`,
+  };
+  if (layoutMode === 'grid') {
+    widthStyles.flex = `${
+      [0, false].includes(columnDef.grow!)
+        ? 0
+        : `var(--header-${parseCSSVarId(footer.id)}-size)`
+    } 0 auto`;
+  } else if (layoutMode === 'grid-no-grow') {
+    widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
+  }
+
+  return (
+    <TableTh
+      colSpan={footer.colSpan}
+      data-column-pinned={isColumnPinned || undefined}
+      data-first-right-pinned={
+        (isColumnPinned === 'right' &&
+          column.getIsFirstColumn(isColumnPinned)) ||
+        undefined
+      }
+      data-index={renderedColumnIndex}
+      data-last-left-pinned={
+        (isColumnPinned === 'left' && column.getIsLastColumn(isColumnPinned)) ||
+        undefined
+      }
+      {...tableCellProps}
+      __vars={{
+        '--mrt-cell-align':
+          tableCellProps.align ??
+          (columnDefType === 'group'
+            ? 'center'
+            : direction.dir === 'rtl'
+              ? 'right'
+              : 'left'),
+        '--mrt-table-cell-left':
+          isColumnPinned === 'left'
+            ? `${column.getStart(isColumnPinned)}`
+            : undefined,
+        '--mrt-table-cell-right':
+          isColumnPinned === 'right'
+            ? `${column.getAfter(isColumnPinned)}`
+            : undefined,
+        ...tableCellProps?.__vars,
+      }}
+      className={clsx(
+        classes.root,
+        layoutMode?.startsWith('grid') && classes.grid,
+        columnDefType === 'group' && classes.group,
+        tableCellProps?.className,
+      )}
+      style={(theme) => ({
+        ...widthStyles,
+        ...parseFromValuesOrFunc(tableCellProps.style, theme),
+      })}
+    >
+      {tableCellProps.children ??
+        (footer.isPlaceholder
+          ? null
+          : (parseFromValuesOrFunc(columnDef.Footer, {
+              column,
+              footer,
+              table,
+            }) ??
+            columnDef.footer ??
+            null))}
+    </TableTh>
+  );
+};

package/src/components/footer/MRT_TableFooterRow.module.css

@@ -0,0 +1,10 @@
+.root {
+  width: 100%;
+  display: table-row;
+  &.layout-mode-grid {
+    display: flex;
+  }
+  background-color: light-dark(var(--light-bg-color), var(--dark-bg-color));
+  border-top: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}

package/src/components/footer/MRT_TableFooterRow.tsx

@@ -0,0 +1,94 @@
+import clsx from 'clsx';
+
+import classes from './MRT_TableFooterRow.module.css';
+
+import { Box, TableTr, type TableTrProps } from '@mantine/core';
+
+import { MRT_TableFooterCell } from './MRT_TableFooterCell';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_Header,
+  type MRT_HeaderGroup,
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_VirtualItem,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends TableTrProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  footerGroup: MRT_HeaderGroup<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableFooterRow = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  footerGroup,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    options: { layoutMode, mantineTableFooterRowProps },
+  } = table;
+
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
+
+  // if no content in row, skip row
+  if (
+    !footerGroup.headers?.some(
+      (header) =>
+        (typeof header.column.columnDef.footer === 'string' &&
+          !!header.column.columnDef.footer) ||
+        header.column.columnDef.Footer,
+    )
+  ) {
+    return null;
+  }
+
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(mantineTableFooterRowProps, {
+      footerGroup,
+      table,
+    }),
+    ...rest,
+  };
+
+  return (
+    <TableTr
+      className={clsx(
+        classes.root,
+        layoutMode?.startsWith('grid') && classes['layout-mode-grid'],
+      )}
+      {...tableRowProps}
+    >
+      {virtualPaddingLeft ? (
+        <Box component="th" display="flex" w={virtualPaddingLeft} />
+      ) : null}
+      {(virtualColumns ?? footerGroup.headers).map(
+        (footerOrVirtualFooter, renderedColumnIndex) => {
+          let footer = footerOrVirtualFooter as MRT_Header<TData>;
+          if (columnVirtualizer) {
+            renderedColumnIndex = (footerOrVirtualFooter as MRT_VirtualItem)
+              .index;
+            footer = footerGroup.headers[renderedColumnIndex];
+          }
+
+          return (
+            <MRT_TableFooterCell
+              footer={footer}
+              key={footer.id}
+              renderedColumnIndex={renderedColumnIndex}
+              table={table}
+            />
+          );
+        },
+      )}
+      {virtualPaddingRight ? (
+        <Box component="th" display="flex" w={virtualPaddingRight} />
+      ) : null}
+    </TableTr>
+  );
+};

package/src/components/head/MRT_TableHead.module.css

@@ -0,0 +1,32 @@
+.root {
+  background-color: var(--mrt-base-background-color);
+  opacity: 0.97;
+  position: relative;
+}
+
+.root-grid {
+  display: grid;
+}
+
+.root-table-row-group {
+  display: table-row-group;
+}
+
+.root-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+
+.banner-tr {
+  display: table-row;
+}
+
+.banner-th {
+  display: table-cell;
+  padding: 0;
+}
+
+.grid {
+  display: grid;
+}

package/src/components/head/MRT_TableHead.tsx

@@ -0,0 +1,108 @@
+import clsx from 'clsx';
+
+import classes from './MRT_TableHead.module.css';
+
+import {
+  TableTh,
+  TableThead,
+  type TableTheadProps,
+  TableTr,
+} from '@mantine/core';
+
+import { MRT_TableHeadRow } from './MRT_TableHeadRow';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_ToolbarAlertBanner } from '../toolbar/MRT_ToolbarAlertBanner';
+
+interface Props<TData extends MRT_RowData> extends TableTheadProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHead = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getHeaderGroups,
+    getSelectedRowModel,
+    getState,
+    options: {
+      enableStickyHeader,
+      layoutMode,
+      mantineTableHeadProps,
+      positionToolbarAlertBanner,
+    },
+    refs: { tableHeadRef },
+  } = table;
+  const { isFullScreen, showAlertBanner } = getState();
+
+  const tableHeadProps = {
+    ...parseFromValuesOrFunc(mantineTableHeadProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const stickyHeader = enableStickyHeader || isFullScreen;
+
+  return (
+    <TableThead
+      {...tableHeadProps}
+      className={clsx(
+        classes.root,
+        layoutMode?.startsWith('grid')
+          ? classes['root-grid']
+          : classes['root-table-row-group'],
+        stickyHeader && classes['root-sticky'],
+        tableHeadProps?.className,
+      )}
+      pos={
+        stickyHeader && layoutMode?.startsWith('grid') ? 'sticky' : 'relative'
+      }
+      ref={(ref: HTMLTableSectionElement) => {
+        tableHeadRef.current = ref;
+        if (tableHeadProps?.ref) {
+          // @ts-ignore
+          tableHeadProps.ref.current = ref;
+        }
+      }}
+    >
+      {positionToolbarAlertBanner === 'head-overlay' &&
+      (showAlertBanner || getSelectedRowModel().rows.length > 0) ? (
+        <TableTr
+          className={clsx(
+            classes['banner-tr'],
+            layoutMode?.startsWith('grid') && classes.grid,
+          )}
+        >
+          <TableTh
+            className={clsx(
+              classes['banner-th'],
+              layoutMode?.startsWith('grid') && classes.grid,
+            )}
+            colSpan={table.getVisibleLeafColumns().length}
+          >
+            <MRT_ToolbarAlertBanner table={table} />
+          </TableTh>
+        </TableTr>
+      ) : (
+        getHeaderGroups().map((headerGroup) => (
+          <MRT_TableHeadRow
+            columnVirtualizer={columnVirtualizer}
+            headerGroup={headerGroup as any}
+            key={headerGroup.id}
+            table={table}
+          />
+        ))
+      )}
+    </TableThead>
+  );
+};

package/src/components/head/MRT_TableHeadCell.module.css

@@ -0,0 +1,163 @@
+.root {
+  --resize-border-color: var(--mantine-primary-color-filled);
+  --hover-color: var(--mantine-primary-color-filled);
+  --drag-color: var(--mantine-color-gray-7);
+  --resize-thickness: 2px;
+  --hover-thickness: 3px;
+  --drag-thickness: 1px;
+
+  background-color: var(--mrt-base-background-color);
+  background-clip: padding-box;
+  font-weight: bold;
+  overflow: visible;
+  position: relative;
+  transition: padding 150ms ease-in-out;
+  vertical-align: top;
+  z-index: 1;
+
+  &:active {
+    z-index: 3;
+  }
+
+  &[data-column-pinned] {
+    background-color: var(--mrt-base-background-color);
+    opacity: 0.97;
+    position: sticky;
+    z-index: 4;
+    &[data-column-pinned='left'] {
+      left: calc(var(--mrt-table-cell-left, 0) * 1px);
+      &[data-last-left-pinned] {
+        box-shadow: -6px 0 6px -6px alpha(
+            light-dark(
+              var(--mantine-color-gray-outline),
+              var(--mantine-color-dark-outline)
+            ),
+            0.5
+          ) inset;
+      }
+    }
+
+    &[data-column-pinned='right'] {
+      right: calc(var(--mrt-table-cell-right, 0) * 1px);
+      &[data-first-right-pinned] {
+        box-shadow: 6px 0 6px -6px alpha(
+            light-dark(
+              var(--mantine-color-gray-outline),
+              var(--mantine-color-dark-outline)
+            ),
+            0.5
+          ) inset;
+      }
+    }
+  }
+
+  &[data-resizing] {
+    &[data-resizing='ltr'] {
+      border-right: var(--resize-thickness) solid var(--resize-border-color);
+    }
+    &[data-resizing='rtl'] {
+      border-left: var(--resize-thickness) solid var(--resize-border-color);
+    }
+  }
+
+  &[data-dragging-column] {
+    border-left: var(--drag-thickness) dashed var(--drag-color);
+    border-right: var(--drag-thickness) dashed var(--drag-color);
+    border-top: var(--drag-thickness) dashed var(--drag-color);
+    opacity: 0.5;
+    z-index: 3;
+  }
+
+  &[data-hovered-column-target] {
+    border-left: var(--hover-thickness) dashed var(--hover-color);
+    border-right: var(--hover-thickness) dashed var(--hover-color);
+    border-top: var(--hover-thickness) dashed var(--hover-color);
+    z-index: 2;
+  }
+
+  :global(.mantine-ActionIcon-root) {
+    opacity: 0.7;
+    transition: opacity 100ms ease-in-out;
+  }
+
+  &:hover {
+    :global(.mantine-ActionIcon-root) {
+      opacity: 1;
+    }
+  }
+}
+
+.root-grid {
+  display: flex;
+  flex-direction: column;
+}
+
+.root-virtualized {
+  transition: none;
+}
+
+.root-no-select {
+  user-select: none;
+}
+
+.content {
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.content-spaced {
+  justify-content: space-between;
+}
+
+.content-center {
+  justify-content: center;
+}
+
+.content-right {
+  flex-direction: row-reverse;
+}
+
+.content-wrapper {
+  text-overflow: ellipsis;
+}
+
+.content-wrapper-hidden-overflow {
+  overflow: hidden;
+}
+
+.content-wrapper-nowrap {
+  white-space: nowrap;
+}
+
+.labels {
+  align-items: center;
+  gap: rem(2px);
+  min-height: rem(22px);
+}
+
+.labels-right {
+  flex-direction: row-reverse;
+}
+
+.labels-center {
+  padding-left: calc(var(--mrt-table-head-cell-labels-padding-left) * 1rem);
+}
+
+.labels-sortable {
+  cursor: pointer;
+}
+
+.labels-data {
+  overflow: hidden;
+}
+
+.content-actions {
+  align-items: center;
+  align-self: center;
+  white-space: nowrap;
+  gap: rem(2px);
+  margin-left: rem(2px);
+}