# All files / table TableRow.tsx

100% Statements 95/95
100% Branches 2/2
100% Functions 2/2
100% Lines 95/95

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
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    961x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    123x
    123x
    123x
    123x
    123x
    123x
    123x
    123x
    123x
    123x
    123x
    123x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    122x
    1x
     "use client";
    import { cnb } from "cnbuilder";
    import { forwardRef, type HTMLAttributes } from "react";
    import { bem } from "../utils/bem.js";
    import {
      useTableConfig,
      type TableRowConfiguration,
    } from "./TableConfigurationProvider.js";

    const styles = bem("rmd-tr");

    /** @remarks \@since 6.0.0 */
    export interface TableRowClassNameOptions {
      className?: string;
      disableHover?: boolean;
      disableBorders?: boolean;
      selected?: boolean;
      clickable?: boolean;
    }

    /** @remarks \@since 6.0.0 */
    export function tableRow(options: TableRowClassNameOptions = {}): string {
      const { disableHover, disableBorders, selected, clickable, className } =
        options;
      return cnb(
        styles({
          bordered: !disableBorders,
          hoverable: !disableHover,
          clickable,
          selected,
        }),
        className
      );
    }

    export interface TableRowProps
      extends HTMLAttributes<HTMLTableRowElement>,
        TableRowConfiguration {
      /**
       * Boolean if the current row has been selected and should apply the selected
       * background-color.
       *
       * @defaultValue `false`
       */
      selected?: boolean;

      /**
       * Boolean if the row should be clickable and update the cursor while hovered
       * to be a pointer.
       *
       * @defaultValue `false`
       */
      clickable?: boolean;
    }

    /**
     * **Client Component**
     *
     * Creates a `<tr>` element with some general styles that are inherited from the
     * base table configuration.
     */
    export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
      function TableRow(props, ref) {
        const {
          className,
          disableHover: propDisableHover,
          disableBorders: propDisableBorders,
          children,
          selected = false,
          clickable = false,
          ...remaining
        } = props;

        const { disableHover, disableBorders } = useTableConfig({
          disableHover: propDisableHover,
          disableBorders: propDisableBorders,
        });

        return (
          <tr
            {...remaining}
            ref={ref}
            className={tableRow({
              selected,
              clickable,
              disableHover,
              disableBorders,
              className,
            })}
          >
            {children}
          </tr>
        );
      }
    );