How do I get the density of a table when the user changes it?

[exc414]

Hello,

I am trying to get density changes when the user clicks on the density toggle. Then use it in my Avatar where right now its hard coded with "sm". Basically if the user clicks on the larger toggle, I want the image to expand to a bigger size.

I read this : https://www.mantine-react-table.com/docs/guides/density-toggle and saw onDensityChange.
However, I don't understand how I would use to get the density. I tried doing something similar to :

onPaginationChange: setPagination,

However, it does not work.

I cut out parts of the code for brevity.

  const [pagination, setPagination] = useState<MRT_PaginationState>({
    pageIndex: 0,
    pageSize: GAMES_TABLE_SIZE,
  });
  const [density, setDensity] = useState<MRT_DensityState>();

  const columns = useMemo<MRT_ColumnDef<Game>[]>(
    () => [
      {
        accessorKey: 'boxArtUrl',
        header: 'Poster',
        enableHiding: false,
        size: 60,
        Cell: ({ row, cell }) => (
          <a
            style={{ textDecoration: 'none' }}
            href={cell.getValue<string>()}
            target="_blank"
            rel="noreferrer">
            <Tooltip label={row.original.title}>
              <Avatar src={cell.getValue<string>()} size="sm" color="blue" radius="xs">
                <IconKeyboard size="1rem" />
              </Avatar>
            </Tooltip>
          </a>
        ),
      },
    [],
  );

  const table = useMantineReactTable({
    columns,
    data: fetchedGames, //must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
    createDisplayMode: 'modal', //default ('row', and 'custom' are also available)
    enableColumnActions: false,
    enableColumnFilters: false,
    enableSorting: false,
    enableFullScreenToggle: false,
    enableGlobalFilter: false,
    enableRowActions: true,
    positionActionsColumn: 'last',
    getRowId: (row: Game) => row.id?.toString(),
    manualPagination: true,
    mantineProgressProps: ({ isTopToolbar }) => ({
      sx: {
        display: isTopToolbar ? 'block' : 'none', // hide bottom progress bar
      },
    }),
    mantineToolbarAlertBannerProps: isLoadingGamesError
      ? {
        color: 'red',
        children: 'Error loading data',
      }
      : undefined,
    renderRowActions: ({ row }) => (
      <Center>
        <Tooltip label="Delete">
          <ActionIcon
            color="red"
            variant="filled"
            onClick={() => openDeleteConfirmModal(row)}>
            <IconTrash size="1rem" />
          </ActionIcon>
        </Tooltip>
      </Center>
    ),
    renderTopToolbarCustomActions: ({ table }) => (
      <Button onClick={() => {table.setCreatingRow(true);}}>
        Create New User
      </Button>
    ),
    onPaginationChange: setPagination,
    onDensityChange: setDensity, // Incorrect
    rowCount: totalRowCount,
    initialState: { density: 'xs' },
    state: {
      isLoading: isLoadingGames,
      isSaving: isDeletingGame,
      showAlertBanner: isLoadingGamesError,
      showProgressBars: isDeletingGame,
      showLoadingOverlay: isFetchingGames, //fetching next page pagination
      showSkeletons: isLoadingGames, //loading for the first time with no data
      pagination,
      density,
    },
  });

  return <MantineReactTable table={table} />;
};

[exc414]

I read more of the documentation and I found some code around pagination that helped me solved it.

const [density, setDensity] = useState<MRT_DensityState>()

  const handleDensityChange = (updater: MRT_Updater<MRT_DensityState>) => {
    setDensity((prevState) =>
      updater instanceof Function ? updater(prevState!) : updater,
    );
  };

Called the above function in :

onDensityChange: handleDensityChange,

and passed density to the :

state { density }

Then just use density in my avatar size. Make sure that density is put in the deps of the

  const columns = useMemo<MRT_ColumnDef<Game>[]>(
    () => [
      {
        accessorKey: 'boxArtUrl',
        header: 'Poster',
        enableHiding: false,
        size: 60,
        Cell: ({ row, cell }) => (
          <a
            style={{ textDecoration: 'none' }}
            href={cell.getValue<string>()}
            target="_blank"
            rel="noreferrer">
            <Tooltip label={row.original.title}>
              <Avatar src={cell.getValue<string>()} size={density} color="blue" radius="xs">
                <IconKeyboard size="1rem" />
              </Avatar>
            </Tooltip>
          </a>
        ),
      },
    ],
    [density],
  );