# All files / components/Table TBody.js

71.43% Statements 5/7
0% Branches 0/8
0% Functions 0/2
71.43% Lines 5/7

    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

    5x
    5x

    5x

    5x

    5x

     import styled from 'styled-components';

    const darkBG = 'rgba(0, 0, 0, 0.05)';
    const lightBG = 'transparent';

    const TBody = styled.tbody`
      & > tr {
        &:nth-child(odd) {
          background: ${({ zebraStripe, startIndex }) => zebraStripe && (startIndex % 2 === 0) ? darkBG : lightBG };
        }

        &:nth-child(even) {
          background: ${({ zebraStripe, startIndex }) => zebraStripe ? ((startIndex % 2 === 0) ? lightBG : darkBG) : lightBG };
        }
      }
    `;

    TBody.defaultProps = {
      zebraStripe: true,
      startIndex: 0,
    };

    TBody.usage = `
    Used to wrap rows within tables. Allows applying zebra stripe patterns (defaults to on, use \`zebraStripe\` prop to turn off).

    Use the \`startIndex\` prop to control what row index this body should assume it's starting with. This can help align zebra stripes if you have multiple bodies in one table.
    `;

    export default TBody;