# All files / components/Table TableRowDetails.js

80% Statements 4/5
0% Branches 0/1
0% Functions 0/1
80% Lines 4/5

    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

    4x

    4x

    4x

    4x

     import React from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';
    import DefaultTableBody from './styles/TableBody';
    import TableRowDetailsRow from './styles/TableRowDetailsRow';
    import TableRowDetailsStyles from './styles/TableRowDetailsStyles';

    // Firefox has an artificial limit on colspan of 1000. This is obviously an arbitrary
    // number of columns, but there are no cleaner or easier solutions to spanning the entire
    // table at time of writing.
    const COLSPAN = 1000;

    const TableRowDetails = ({ children, rowIndex = 0, Row, Styles }) => (
      <TableBody startIndex={rowIndex}>
        <Row>
          <Styles colSpan={COLSPAN}>{children}</Styles>
        </Row>
      </TableBody>
    );

    TableRowDetails.propTypes = {
      /**
       * Contents of the details
       */
      children: PropTypes.node.isRequired,
      /**
       * The row index the details are related to
       */
      rowIndex: PropTypes.number,
      /**
       * A component to render the styles of the tr
       */
      Row: PropTypes.func,
      /**
       * A component to render the styles of the td
       */
      Styles: PropTypes.func,
      /**
       * A tbody element
       */
      TableBody: PropTypes.func,
    };

    TableRowDetails.defaultProps = {
      Row: TableRowDetailsRow,
      Styles: TableRowDetailsStyles,
      TBody: DefaultTableBody,
    };

    export default TableRowDetails;