@kissesses/mantine-react-table-open 9.0.3

package/src/components/toolbar/MRT_ProgressBar.tsx

@@ -0,0 +1,53 @@
+import clsx from 'clsx';
+
+import classes from './MRT_ProgressBar.module.css';
+
+import { Collapse, Progress, type ProgressProps } from '@mantine/core';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends Partial<ProgressProps> {
+  isTopToolbar: boolean;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ProgressBar = <TData extends MRT_RowData>({
+  isTopToolbar,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: { mantineProgressProps },
+  } = table;
+  const { isSaving, showProgressBars } = getState();
+
+  const linearProgressProps = {
+    ...parseFromValuesOrFunc(mantineProgressProps, {
+      isTopToolbar,
+      table,
+    }),
+    ...rest,
+  };
+
+  return (
+    <Collapse
+      className={clsx(
+        classes.collapse,
+        isTopToolbar && classes['collapse-top'],
+      )}
+      expanded={isSaving || showProgressBars}
+    >
+      <Progress
+        animated
+        aria-busy="true"
+        aria-label="Loading"
+        radius={0}
+        value={100}
+        {...linearProgressProps}
+      />
+    </Collapse>
+  );
+};

package/src/components/toolbar/MRT_TablePagination.module.css

@@ -0,0 +1,20 @@
+.root {
+  display: flex;
+  z-index: 2;
+  gap: var(--mantine-spacing-lg);
+  align-items: center;
+  justify-content: space-between;
+  padding-right: var(--mantine-spacing-sm);
+  padding-left: var(--mantine-spacing-sm);
+  padding-top: var(--mantine-spacing-xs);
+  padding-bottom: var(--mantine-spacing-xs);
+  .pagesize {
+    input {
+      width: calc(5rem * var(--mantine-scale));
+    }
+  }
+}
+
+.with-top-margin {
+  margin-top: 3rem;
+}

package/src/components/toolbar/MRT_TablePagination.tsx

@@ -0,0 +1,166 @@
+import clsx from 'clsx';
+
+import classes from './MRT_TablePagination.module.css';
+
+import {
+  ActionIcon,
+  Box,
+  Group,
+  Pagination,
+  type PaginationProps,
+  Select,
+  Text,
+} from '@mantine/core';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100].map((x) =>
+  x.toString(),
+);
+
+interface Props<TData extends MRT_RowData> extends Partial<PaginationProps> {
+  position?: 'bottom' | 'top';
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TablePagination = <TData extends MRT_RowData>({
+  position = 'bottom',
+  table,
+  ...props
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getPrePaginationRowModel,
+    getState,
+    options: {
+      enableToolbarInternalActions,
+      icons: {
+        IconChevronLeft,
+        IconChevronLeftPipe,
+        IconChevronRight,
+        IconChevronRightPipe,
+      },
+      localization,
+      mantinePaginationProps,
+      paginationDisplayMode,
+      rowCount,
+    },
+    setPageIndex,
+    setPageSize,
+  } = table;
+  const {
+    pagination: { pageIndex = 0, pageSize = 10 },
+    showGlobalFilter,
+  } = getState();
+
+  const paginationProps = {
+    ...parseFromValuesOrFunc(mantinePaginationProps, {
+      table,
+    }),
+    ...props,
+  };
+
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+  const numberOfPages = Math.ceil(totalRowCount / pageSize);
+  const showFirstLastPageButtons = numberOfPages > 2;
+  const firstRowIndex = pageIndex * pageSize;
+  const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
+
+  const {
+    rowsPerPageOptions = defaultRowsPerPage,
+    showRowsPerPage = true,
+    withEdges = showFirstLastPageButtons,
+    ...rest
+  } = paginationProps ?? {};
+
+  const needsTopMargin =
+    position === 'top' && enableToolbarInternalActions && !showGlobalFilter;
+
+  return (
+    <Box
+      className={clsx(
+        'mrt-table-pagination',
+        classes.root,
+        needsTopMargin && classes['with-top-margin'],
+      )}
+    >
+      {paginationProps?.showRowsPerPage !== false && (
+        <Group gap="xs">
+          <Text id="rpp-label">{localization.rowsPerPage}</Text>
+          <Select
+            allowDeselect={false}
+            aria-labelledby="rpp-label"
+            className={classes.pagesize}
+            data={paginationProps?.rowsPerPageOptions ?? defaultRowsPerPage}
+            onChange={(value: null | string) => setPageSize(+(value as string))}
+            value={pageSize.toString()}
+          />
+        </Group>
+      )}
+      {paginationDisplayMode === 'pages' ? (
+        <Pagination
+          firstIcon={IconChevronLeftPipe}
+          lastIcon={IconChevronRightPipe}
+          nextIcon={IconChevronRight}
+          onChange={(newPageIndex) => setPageIndex(newPageIndex - 1)}
+          previousIcon={IconChevronLeft}
+          total={numberOfPages}
+          value={pageIndex + 1}
+          withEdges={withEdges}
+          {...rest}
+        />
+      ) : paginationDisplayMode === 'default' ? (
+        <>
+          <Text>{`${
+            lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
+          }-${lastRowIndex.toLocaleString()} ${
+            localization.of
+          } ${totalRowCount.toLocaleString()}`}</Text>
+          <Group gap={6}>
+            {withEdges && (
+              <ActionIcon
+                aria-label={localization.goToFirstPage}
+                color="gray"
+                disabled={pageIndex <= 0}
+                onClick={() => setPageIndex(0)}
+                variant="subtle"
+              >
+                <IconChevronLeftPipe />
+              </ActionIcon>
+            )}
+            <ActionIcon
+              aria-label={localization.goToPreviousPage}
+              color="gray"
+              disabled={pageIndex <= 0}
+              onClick={() => setPageIndex(pageIndex - 1)}
+              variant="subtle"
+            >
+              <IconChevronLeft />
+            </ActionIcon>
+            <ActionIcon
+              aria-label={localization.goToNextPage}
+              color="gray"
+              disabled={lastRowIndex >= totalRowCount}
+              onClick={() => setPageIndex(pageIndex + 1)}
+              variant="subtle"
+            >
+              <IconChevronRight />
+            </ActionIcon>
+            {withEdges && (
+              <ActionIcon
+                aria-label={localization.goToLastPage}
+                color="gray"
+                disabled={lastRowIndex >= totalRowCount}
+                onClick={() => setPageIndex(numberOfPages - 1)}
+                variant="subtle"
+              >
+                <IconChevronRightPipe />
+              </ActionIcon>
+            )}
+          </Group>
+        </>
+      ) : null}
+    </Box>
+  );
+};

package/src/components/toolbar/MRT_ToolbarAlertBanner.module.css

@@ -0,0 +1,37 @@
+.alert {
+  border-radius: 0;
+  font-size: 1rem;
+  left: 0;
+  position: relative;
+  padding: rem(8px);
+  right: 0;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+.alert-stacked {
+  margin-bottom: 0;
+}
+
+.alert-bottom {
+  margin-bottom: -16px;
+}
+
+.alert-badge {
+  margin-left: 1ch;
+}
+
+.toolbar-alert {
+  gap: var(--mantine-spacing-sm);
+  padding: 8px 16px;
+  &.head-overlay {
+    padding: 2px;
+    &:global(.xl) {
+      padding: 16px;
+    }
+    &:global(.md) {
+      padding: 8px;
+    }
+  }
+}

package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -0,0 +1,168 @@
+import clsx from 'clsx';
+
+import classes from './MRT_ToolbarAlertBanner.module.css';
+
+import { Fragment, useMemo } from 'react';
+
+import {
+  ActionIcon,
+  Alert,
+  type AlertProps,
+  Badge,
+  Button,
+  Collapse,
+  Flex,
+  Stack,
+} from '@mantine/core';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getMRT_SelectAllHandler } from '../../utils/row.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
+
+interface Props<TData extends MRT_RowData> extends Partial<AlertProps> {
+  stackAlertBanner?: boolean;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
+  stackAlertBanner,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getFilteredSelectedRowModel,
+    getPrePaginationRowModel,
+    getState,
+    options: {
+      enableRowSelection,
+      enableSelectAll,
+      icons: { IconX },
+      localization,
+      mantineToolbarAlertBannerBadgeProps,
+      mantineToolbarAlertBannerProps,
+      manualPagination,
+      positionToolbarAlertBanner,
+      renderToolbarAlertBannerContent,
+      rowCount,
+    },
+  } = table;
+  const { density, grouping, rowSelection, showAlertBanner } = getState();
+
+  const alertProps = {
+    ...parseFromValuesOrFunc(mantineToolbarAlertBannerProps, {
+      table,
+    }),
+    ...rest,
+  };
+  const badgeProps = parseFromValuesOrFunc(
+    mantineToolbarAlertBannerBadgeProps,
+    { table },
+  );
+
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().flatRows.length;
+
+  const selectedRowCount = useMemo(
+    () =>
+      manualPagination
+        ? Object.values(rowSelection).filter(Boolean).length
+        : getFilteredSelectedRowModel().rows.length,
+    [rowSelection, totalRowCount, manualPagination],
+  );
+
+  const selectedAlert = selectedRowCount ? (
+    <Flex align="center" gap="sm">
+      {localization.selectedCountOfRowCountRowsSelected
+        ?.replace('{selectedCount}', selectedRowCount.toString())
+        ?.replace('{rowCount}', totalRowCount.toString())}
+      <Button
+        onClick={(event) =>
+          getMRT_SelectAllHandler({ table })(event, false, true)
+        }
+        size="compact-xs"
+        variant="subtle"
+      >
+        {localization.clearSelection}
+      </Button>
+    </Flex>
+  ) : null;
+
+  const groupedAlert =
+    grouping.length > 0 ? (
+      <Flex>
+        {localization.groupedBy}{' '}
+        {grouping.map((columnId, index) => (
+          <Fragment key={`${index}-${columnId}`}>
+            {index > 0 ? localization.thenBy : ''}
+            <Badge
+              className={classes['alert-badge']}
+              rightSection={
+                <ActionIcon
+                  color="white"
+                  onClick={() => table.getColumn(columnId).toggleGrouping()}
+                  size="xs"
+                  variant="subtle"
+                >
+                  <IconX style={{ transform: 'scale(0.8)' }} />
+                </ActionIcon>
+              }
+              variant="filled"
+              {...badgeProps}
+            >
+              {table.getColumn(columnId).columnDef.header}{' '}
+            </Badge>
+          </Fragment>
+        ))}
+      </Flex>
+    ) : null;
+
+  return (
+    <Collapse
+      expanded={showAlertBanner || !!selectedAlert || !!groupedAlert}
+      transitionDuration={stackAlertBanner ? 200 : 0}
+    >
+      <Alert
+        color="blue"
+        icon={false}
+        {...alertProps}
+        className={clsx(
+          classes.alert,
+          stackAlertBanner &&
+            !positionToolbarAlertBanner &&
+            classes['alert-stacked'],
+          !stackAlertBanner &&
+            positionToolbarAlertBanner === 'bottom' &&
+            classes['alert-bottom'],
+          alertProps?.className,
+        )}
+      >
+        {renderToolbarAlertBannerContent?.({
+          groupedAlert,
+          selectedAlert,
+          table,
+        }) ?? (
+          <Flex
+            className={clsx(
+              classes['toolbar-alert'],
+              positionToolbarAlertBanner === 'head-overlay' &&
+                classes['head-overlay'],
+              density,
+            )}
+          >
+            {enableRowSelection &&
+              enableSelectAll &&
+              positionToolbarAlertBanner === 'head-overlay' && (
+                <MRT_SelectCheckbox table={table} />
+              )}
+            <Stack>
+              {alertProps?.children}
+              {selectedAlert}
+              {groupedAlert}
+            </Stack>
+          </Flex>
+        )}
+      </Alert>
+    </Collapse>
+  );
+};

package/src/components/toolbar/MRT_ToolbarDropZone.module.css

@@ -0,0 +1,23 @@
+.root {
+  align-items: center;
+
+  border: dashed var(--mantine-primary-color-filled) 2px;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 2;
+  background-color: color-mix(
+    in srgb,
+    var(--mantine-primary-color-filled) 10%,
+    transparent
+  );
+}
+
+.hovered {
+  background-color: color-mix(
+    in srgb,
+    var(--mantine-primary-color-filled) 20%,
+    transparent
+  );
+}

package/src/components/toolbar/MRT_ToolbarDropZone.tsx

@@ -0,0 +1,67 @@
+import clsx from 'clsx';
+
+import classes from './MRT_ToolbarDropZone.module.css';
+
+import { type DragEvent, useEffect } from 'react';
+
+import { Flex, type FlexProps, Text, Transition } from '@mantine/core';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+
+interface Props<TData extends MRT_RowData> extends FlexProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: { enableGrouping, localization },
+    setHoveredColumn,
+    setShowToolbarDropZone,
+  } = table;
+
+  const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } =
+    getState();
+
+  const handleDragEnter = (_event: DragEvent<HTMLDivElement>) => {
+    setHoveredColumn({ id: 'drop-zone' });
+  };
+
+  useEffect(() => {
+    if (table.options.state?.showToolbarDropZone !== undefined) {
+      setShowToolbarDropZone(
+        !!enableGrouping &&
+          !!draggingColumn &&
+          draggingColumn.columnDef.enableGrouping !== false &&
+          !grouping.includes(draggingColumn.id),
+      );
+    }
+  }, [enableGrouping, draggingColumn, grouping]);
+
+  return (
+    <Transition mounted={showToolbarDropZone} transition="fade">
+      {() => (
+        <Flex
+          className={clsx(
+            'mrt-toolbar-dropzone',
+            classes.root,
+            hoveredColumn?.id === 'drop-zone' && classes.hovered,
+          )}
+          onDragEnter={handleDragEnter}
+          {...rest}
+        >
+          <Text>
+            {localization.dropToGroupBy.replace(
+              '{column}',
+              draggingColumn?.columnDef?.header ?? '',
+            )}
+          </Text>
+        </Flex>
+      )}
+    </Transition>
+  );
+};

package/src/components/toolbar/MRT_ToolbarInternalButtons.module.css

@@ -0,0 +1,6 @@
+.root {
+  align-items: center;
+  gap: 2px;
+  z-index: 3;
+  margin-left: 4px;
+}

package/src/components/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -0,0 +1,73 @@
+import clsx from 'clsx';
+
+import classes from './MRT_ToolbarInternalButtons.module.css';
+
+import { Flex, type FlexProps } from '@mantine/core';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
+import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
+import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
+import { MRT_ToggleFullScreenButton } from '../buttons/MRT_ToggleFullScreenButton';
+import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
+
+interface Props<TData extends MRT_RowData> extends FlexProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToolbarInternalButtons = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    options: {
+      columnFilterDisplayMode,
+      enableColumnFilters,
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableDensityToggle,
+      enableFilters,
+      enableFullScreenToggle,
+      enableGlobalFilter,
+      enableHiding,
+      initialState,
+      renderToolbarInternalActions,
+    },
+  } = table;
+
+  return (
+    <Flex
+      {...rest}
+      className={clsx(
+        'mrt-toolbar-internal-buttons',
+        classes.root,
+        rest?.className,
+      )}
+    >
+      {renderToolbarInternalActions?.({ table }) ?? (
+        <>
+          {enableFilters &&
+            enableGlobalFilter &&
+            !initialState?.showGlobalFilter && (
+              <MRT_ToggleGlobalFilterButton table={table} />
+            )}
+          {enableFilters &&
+            enableColumnFilters &&
+            columnFilterDisplayMode !== 'popover' && (
+              <MRT_ToggleFiltersButton table={table} />
+            )}
+          {(enableHiding || enableColumnOrdering || enableColumnPinning) && (
+            <MRT_ShowHideColumnsButton table={table} />
+          )}
+          {enableDensityToggle && (
+            <MRT_ToggleDensePaddingButton table={table} />
+          )}
+          {enableFullScreenToggle && (
+            <MRT_ToggleFullScreenButton table={table} />
+          )}
+        </>
+      )}
+    </Flex>
+  );
+};

package/src/components/toolbar/MRT_TopToolbar.module.css

@@ -0,0 +1,24 @@
+.root {
+  background-color: var(--mrt-base-background-color);
+  position: relative;
+}
+
+.root-fullscreen {
+  position: sticky !important;
+  top: 0;
+}
+
+.actions-container {
+  align-items: flex-start;
+  box-sizing: border-box;
+  justify-content: space-between;
+  padding: rem(8px);
+  right: 0;
+  top: 0;
+  width: 100%;
+  position: absolute;
+}
+
+.actions-container-stack-alert {
+  position: relative !important;
+}