# All files / src/table TableContainer.tsx

100% Statements 45/45
100% Branches 2/2
100% Functions 1/1
100% Lines 45/45

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    461x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    4x
    4x
    4x
    4x
    4x
    3x
    3x
    3x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    1x
     "use client";
    import { forwardRef, useMemo, type HTMLAttributes } from "react";
    import { useEnsuredRef } from "../useEnsuredRef.js";
    import {
      TableContainerProvider,
      type TableContainerContext,
    } from "./TableContainerProvider.js";
    import { tableContainer } from "./tableContainerStyles.js";

    export type TableContainerProps = HTMLAttributes<HTMLDivElement>;

    /**
     * **Client Component**
     *
     * An extremely "useful" component that should be used with the `Table`
     * component if you want to make a responsive table within the page. If you
     * don't want to use this component, you can just apply `overflow: auto` to a
     * parent element of the table.
     */
    export const TableContainer = forwardRef<HTMLDivElement, TableContainerProps>(
      function TableContainer(props, ref) {
        const { className, children, ...remaining } = props;
        const [nodeRef, refCallback] = useEnsuredRef(ref);

        const value = useMemo<TableContainerContext>(
          () => ({
            exists: true,
            containerRef: nodeRef,
          }),
          [nodeRef]
        );

        return (
          <TableContainerProvider value={value}>
            <div
              {...remaining}
              ref={refCallback}
              className={tableContainer({ className })}
            >
              {children}
            </div>
          </TableContainerProvider>
        );
      }
    );