# All files 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
    2x
    2x
    2x
    2x
    2x
    1x
    1x
    1x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    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>
        );
      }
    );