// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`CustomTable renders a collapsed row 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
      <Separator
        orientation="horizontal"
        units={40}
      />
    </div>
    <div
      className="columnName"
      key="0"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col1"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col1
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
    <div
      className="columnName"
      key="1"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col2"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col2
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  >
    <div
      className="expandableContainer"
      key="0"
    >
      <div
        aria-checked={false}
        className="tableRow row"
        onClick={[Function]}
        role="checkbox"
        tabIndex={-1}
      >
        <div
          className="cell selectionToggle"
        >
          <WithStyles(Checkbox)
            checked={false}
            color="primary"
          />
          <WithStyles(IconButton)
            aria-label="Expand"
            className="expandButton"
            onClick={[Function]}
          >
            <pure(ArrowRightIcon) />
          </WithStyles(IconButton)>
        </div>
        <CustomTableRow
          columns={
            Array [
              Object {
                "customRenderer": undefined,
                "label": "col1",
              },
              Object {
                "customRenderer": undefined,
                "label": "col2",
              },
            ]
          }
          row={
            Object {
              "expandState": 0,
              "id": "row1",
              "otherFields": Array [
                "cell1",
                "cell2",
              ],
            }
          }
        />
      </div>
    </div>
  </div>
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders a collapsed row when selection is disabled 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <Separator
        orientation="horizontal"
        units={40}
      />
    </div>
    <div
      className="columnName"
      key="0"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col1"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col1
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
    <div
      className="columnName"
      key="1"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col2"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col2
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  >
    <div
      className="expandableContainer"
      key="0"
    >
      <div
        aria-checked={false}
        className="tableRow row"
        onClick={[Function]}
        role="checkbox"
        tabIndex={-1}
      >
        <div
          className="cell selectionToggle"
        >
          <WithStyles(IconButton)
            aria-label="Expand"
            className="expandButton"
            onClick={[Function]}
          >
            <pure(ArrowRightIcon) />
          </WithStyles(IconButton)>
        </div>
        <CustomTableRow
          columns={
            Array [
              Object {
                "customRenderer": undefined,
                "label": "col1",
              },
              Object {
                "customRenderer": undefined,
                "label": "col2",
              },
            ]
          }
          row={
            Object {
              "expandState": 0,
              "id": "row1",
              "otherFields": Array [
                "cell1",
                "cell2",
              ],
            }
          }
        />
      </div>
    </div>
  </div>
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders a table with sorting disabled 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
    </div>
    <div
      className="columnName"
      key="0"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col1"
    >
      col1
    </div>
    <div
      className="columnName"
      key="1"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col2"
    >
      col2
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  >
    <div
      className="expandableContainer"
      key="0"
    >
      <div
        aria-checked={false}
        className="tableRow row"
        onClick={[Function]}
        role="checkbox"
        tabIndex={-1}
      >
        <div
          className="cell selectionToggle"
        >
          <WithStyles(Checkbox)
            checked={false}
            color="primary"
          />
        </div>
        <CustomTableRow
          columns={
            Array [
              Object {
                "customRenderer": undefined,
                "label": "col1",
              },
              Object {
                "customRenderer": undefined,
                "label": "col2",
              },
            ]
          }
          row={
            Object {
              "id": "row1",
              "otherFields": Array [
                "cell1",
                "cell2",
              ],
            }
          }
        />
      </div>
    </div>
    <div
      className="expandableContainer"
      key="1"
    >
      <div
        aria-checked={false}
        className="tableRow row"
        onClick={[Function]}
        role="checkbox"
        tabIndex={-1}
      >
        <div
          className="cell selectionToggle"
        >
          <WithStyles(Checkbox)
            checked={false}
            color="primary"
          />
        </div>
        <CustomTableRow
          columns={
            Array [
              Object {
                "customRenderer": undefined,
                "label": "col1",
              },
              Object {
                "customRenderer": undefined,
                "label": "col2",
              },
            ]
          }
          row={
            Object {
              "id": "row2",
              "otherFields": Array [
                "cell1",
                "cell2",
              ],
            }
          }
        />
      </div>
    </div>
  </div>
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders an expanded row 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
    </div>
    <div
      className="columnName"
      key="0"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col1"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col1
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
    <div
      className="columnName"
      key="1"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col2"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col2
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  >
    <div
      className="expandableContainer expandedContainer"
      key="0"
    >
      <div
        aria-checked={false}
        className="tableRow row expandedRow"
        onClick={[Function]}
        role="checkbox"
        tabIndex={-1}
      >
        <div
          className="cell selectionToggle"
        >
          <WithStyles(Checkbox)
            checked={false}
            color="primary"
          />
        </div>
        <CustomTableRow
          columns={
            Array [
              Object {
                "customRenderer": undefined,
                "label": "col1",
              },
              Object {
                "customRenderer": undefined,
                "label": "col2",
              },
            ]
          }
          row={
            Object {
              "expandState": 1,
              "id": "row1",
              "otherFields": Array [
                "cell1",
                "cell2",
              ],
            }
          }
        />
      </div>
    </div>
  </div>
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders an expanded row with expanded component below it 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
      <Separator
        orientation="horizontal"
        units={40}
      />
    </div>
    <div
      className="columnName"
      key="0"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col1"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col1
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
    <div
      className="columnName"
      key="1"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col2"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col2
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  >
    <div
      className="expandableContainer expandedContainer"
      key="0"
    >
      <div
        aria-checked={false}
        className="tableRow row expandedRow"
        onClick={[Function]}
        role="checkbox"
        tabIndex={-1}
      >
        <div
          className="cell selectionToggle"
        >
          <WithStyles(Checkbox)
            checked={false}
            color="primary"
          />
          <WithStyles(IconButton)
            aria-label="Expand"
            className="expandButton expandButtonExpanded"
            onClick={[Function]}
          >
            <pure(ArrowRightIcon) />
          </WithStyles(IconButton)>
        </div>
        <CustomTableRow
          columns={
            Array [
              Object {
                "customRenderer": undefined,
                "label": "col1",
              },
              Object {
                "customRenderer": undefined,
                "label": "col2",
              },
            ]
          }
          row={
            Object {
              "expandState": 1,
              "id": "row1",
              "otherFields": Array [
                "cell1",
                "cell2",
              ],
            }
          }
        />
      </div>
      <div>
        <span>
          Hello World
        </span>
      </div>
    </div>
  </div>
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders columns with specified widths 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
    </div>
    <div
      className="columnName"
      key="0"
      style={
        Object {
          "width": "75%",
        }
      }
      title="col1"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col1
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
    <div
      className="columnName"
      key="1"
      style={
        Object {
          "width": "25%",
        }
      }
      title="col2"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col2
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  />
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders empty message on no rows 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  >
    <div
      className="emptyMessage"
    >
      test empty message
    </div>
  </div>
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders new rows after clicking next page, and enables previous page button 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
    </div>
    <div
      className="columnName"
      key="0"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col1"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col1
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
    <div
      className="columnName"
      key="1"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col2"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col2
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  >
    <div
      className="expandableContainer"
      key="0"
    >
      <div
        aria-checked={false}
        className="tableRow row"
        onClick={[Function]}
        role="checkbox"
        tabIndex={-1}
      >
        <div
          className="cell selectionToggle"
        >
          <WithStyles(Checkbox)
            checked={false}
            color="primary"
          />
        </div>
        <CustomTableRow
          columns={
            Array [
              Object {
                "customRenderer": undefined,
                "label": "col1",
              },
              Object {
                "customRenderer": undefined,
                "label": "col2",
              },
            ]
          }
          row={
            Object {
              "id": "row2",
              "otherFields": Array [
                "cell1",
                "cell2",
              ],
            }
          }
        />
      </div>
    </div>
  </div>
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={false}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={false}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders new rows after clicking previous page, and enables next page button 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
    </div>
    <div
      className="columnName"
      key="0"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col1"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col1
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
    <div
      className="columnName"
      key="1"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col2"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col2
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  >
    <div
      className="expandableContainer"
      key="0"
    >
      <div
        aria-checked={false}
        className="tableRow row"
        onClick={[Function]}
        role="checkbox"
        tabIndex={-1}
      >
        <div
          className="cell selectionToggle"
        >
          <WithStyles(Checkbox)
            checked={false}
            color="primary"
          />
        </div>
        <CustomTableRow
          columns={
            Array [
              Object {
                "customRenderer": undefined,
                "label": "col1",
              },
              Object {
                "customRenderer": undefined,
                "label": "col2",
              },
            ]
          }
          row={
            Object {
              "id": "row1",
              "otherFields": Array [
                "cell1",
                "cell2",
              ],
            }
          }
        />
      </div>
    </div>
    <div
      className="expandableContainer"
      key="1"
    >
      <div
        aria-checked={false}
        className="tableRow row"
        onClick={[Function]}
        role="checkbox"
        tabIndex={-1}
      >
        <div
          className="cell selectionToggle"
        >
          <WithStyles(Checkbox)
            checked={false}
            color="primary"
          />
        </div>
        <CustomTableRow
          columns={
            Array [
              Object {
                "customRenderer": undefined,
                "label": "col1",
              },
              Object {
                "customRenderer": undefined,
                "label": "col2",
              },
            ]
          }
          row={
            Object {
              "id": "row2",
              "otherFields": Array [
                "cell1",
                "cell2",
              ],
            }
          }
        />
      </div>
    </div>
  </div>
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={false}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders some columns with descending sort order on first column 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
    </div>
    <div
      className="columnName"
      key="0"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col1"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Sort"
      >
        <WithStyles(TableSortLabel)
          active={true}
          className="ellipsis"
          direction="desc"
          onClick={[Function]}
        >
          col1
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
    <div
      className="columnName"
      key="1"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col2"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col2
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  />
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders some columns with equal widths without rows 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
    </div>
    <div
      className="columnName"
      key="0"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col1"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col1
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
    <div
      className="columnName"
      key="1"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col2"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col2
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  />
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders some rows 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
    </div>
    <div
      className="columnName"
      key="0"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col1"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col1
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
    <div
      className="columnName"
      key="1"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col2"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col2
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  >
    <div
      className="expandableContainer"
      key="0"
    >
      <div
        aria-checked={false}
        className="tableRow row"
        onClick={[Function]}
        role="checkbox"
        tabIndex={-1}
      >
        <div
          className="cell selectionToggle"
        >
          <WithStyles(Checkbox)
            checked={false}
            color="primary"
          />
        </div>
        <CustomTableRow
          columns={
            Array [
              Object {
                "customRenderer": undefined,
                "label": "col1",
              },
              Object {
                "customRenderer": undefined,
                "label": "col2",
              },
            ]
          }
          row={
            Object {
              "id": "row1",
              "otherFields": Array [
                "cell1",
                "cell2",
              ],
            }
          }
        />
      </div>
    </div>
    <div
      className="expandableContainer"
      key="1"
    >
      <div
        aria-checked={false}
        className="tableRow row"
        onClick={[Function]}
        role="checkbox"
        tabIndex={-1}
      >
        <div
          className="cell selectionToggle"
        >
          <WithStyles(Checkbox)
            checked={false}
            color="primary"
          />
        </div>
        <CustomTableRow
          columns={
            Array [
              Object {
                "customRenderer": undefined,
                "label": "col1",
              },
              Object {
                "customRenderer": undefined,
                "label": "col2",
              },
            ]
          }
          row={
            Object {
              "id": "row2",
              "otherFields": Array [
                "cell1",
                "cell2",
              ],
            }
          }
        />
      </div>
    </div>
  </div>
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders with default filter label 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  />
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders with provided filter label 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="test filter label"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  />
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders without filter box 1`] = `
<div
  className="pageOverflowHidden"
>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  />
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders without rows or columns 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  />
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable renders without the checkboxes if disableSelection is true 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value=""
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName"
      key="0"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col1"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col1
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
    <div
      className="columnName"
      key="1"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col2"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col2
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  >
    <div
      className="expandableContainer"
      key="0"
    >
      <div
        aria-checked={false}
        className="tableRow row"
        onClick={[Function]}
        role="checkbox"
        tabIndex={-1}
      >
        <CustomTableRow
          columns={
            Array [
              Object {
                "customRenderer": undefined,
                "label": "col1",
              },
              Object {
                "customRenderer": undefined,
                "label": "col2",
              },
            ]
          }
          row={
            Object {
              "id": "row1",
              "otherFields": Array [
                "cell1",
                "cell2",
              ],
            }
          }
        />
      </div>
    </div>
    <div
      className="expandableContainer"
      key="1"
    >
      <div
        aria-checked={false}
        className="tableRow row"
        onClick={[Function]}
        role="checkbox"
        tabIndex={-1}
      >
        <CustomTableRow
          columns={
            Array [
              Object {
                "customRenderer": undefined,
                "label": "col1",
              },
              Object {
                "customRenderer": undefined,
                "label": "col2",
              },
            ]
          }
          row={
            Object {
              "id": "row2",
              "otherFields": Array [
                "cell1",
                "cell2",
              ],
            }
          }
        />
      </div>
    </div>
  </div>
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;

exports[`CustomTable updates the filter string in state when the filter box input changes 1`] = `
<div
  className="pageOverflowHidden"
>
  <div>
    <Input
      InputLabelProps={
        Object {
          "classes": Object {
            "root": "noMargin",
          },
        }
      }
      InputProps={
        Object {
          "classes": Object {
            "notchedOutline": "filterBorderRadius",
            "root": "noLeftPadding",
          },
          "startAdornment": <WithStyles(WithFormControlContext(InputAdornment))
            position="end"
          >
            <pure(FilterListIcon)
              style={
                Object {
                  "color": "#80868b",
                  "paddingRight": 16,
                }
              }
            />
          </WithStyles(WithFormControlContext(InputAdornment))>,
        }
      }
      className="filterBox"
      height={48}
      id="tableFilterBox"
      label="Filter"
      maxWidth="100%"
      onChange={[Function]}
      value="test filter"
      variant="outlined"
    />
  </div>
  <div
    className="header"
  >
    <div
      className="columnName cell selectionToggle"
    >
      <WithStyles(Checkbox)
        checked={false}
        color="primary"
        disabled={false}
        indeterminate={false}
        onChange={[Function]}
      />
    </div>
    <div
      className="columnName"
      key="0"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col1"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col1
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
    <div
      className="columnName"
      key="1"
      style={
        Object {
          "width": "50%",
        }
      }
      title="col2"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        title="Cannot sort by this column"
      >
        <WithStyles(TableSortLabel)
          active={false}
          className="ellipsis"
          onClick={[Function]}
        >
          col2
        </WithStyles(TableSortLabel)>
      </WithStyles(Tooltip)>
    </div>
  </div>
  <div
    className="scrollContainer"
    style={
      Object {
        "minHeight": 60,
      }
    }
  >
    <div
      className="expandableContainer"
      key="0"
    >
      <div
        aria-checked={false}
        className="tableRow row"
        onClick={[Function]}
        role="checkbox"
        tabIndex={-1}
      >
        <div
          className="cell selectionToggle"
        >
          <WithStyles(Checkbox)
            checked={false}
            color="primary"
          />
        </div>
        <CustomTableRow
          columns={
            Array [
              Object {
                "customRenderer": undefined,
                "label": "col1",
              },
              Object {
                "customRenderer": undefined,
                "label": "col2",
              },
            ]
          }
          row={
            Object {
              "id": "row1",
              "otherFields": Array [
                "cell1",
                "cell2",
              ],
            }
          }
        />
      </div>
    </div>
    <div
      className="expandableContainer"
      key="1"
    >
      <div
        aria-checked={false}
        className="tableRow row"
        onClick={[Function]}
        role="checkbox"
        tabIndex={-1}
      >
        <div
          className="cell selectionToggle"
        >
          <WithStyles(Checkbox)
            checked={false}
            color="primary"
          />
        </div>
        <CustomTableRow
          columns={
            Array [
              Object {
                "customRenderer": undefined,
                "label": "col1",
              },
              Object {
                "customRenderer": undefined,
                "label": "col2",
              },
            ]
          }
          row={
            Object {
              "id": "row2",
              "otherFields": Array [
                "cell1",
                "cell2",
              ],
            }
          }
        />
      </div>
    </div>
  </div>
  <div
    className="footer"
  >
    <span
      className=""
    >
      Rows per page:
    </span>
    <TextField
      InputProps={
        Object {
          "disableUnderline": true,
        }
      }
      className="rowsPerPage"
      classes={
        Object {
          "root": "verticalAlignInitial",
        }
      }
      onChange={[Function]}
      required={false}
      select={true}
      value={10}
      variant="standard"
    >
      <WithStyles(MenuItem)
        key="0"
        value={10}
      >
        10
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="1"
        value={20}
      >
        20
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="2"
        value={50}
      >
        50
      </WithStyles(MenuItem)>
      <WithStyles(MenuItem)
        key="3"
        value={100}
      >
        100
      </WithStyles(MenuItem)>
    </TextField>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
    <WithStyles(IconButton)
      disabled={true}
      onClick={[Function]}
    >
      <pure(ChevronRightIcon) />
    </WithStyles(IconButton)>
  </div>
</div>
`;
