Sometimes handsontable renders headers on pages top

Tags: #<Tag:0x00007f24a3bc3800>

Randonly in my React App, Handsontable will render the table with extra headers on the top of the page. this occurs when the handsontable.css is not loaded, but in this specific case it is loading normally as the image shows

Hi @ronaldo.jonson

Can you please remind me how does your settings looks like and also CSS for the table?

CSS
export const CustomTable = styled(HotTable)`
border: 1px solid transparent;
border-radius: 10px;

  .handsontable * {
    width: 100%;
    border-radius: 0px;
  }
  .handsontable .colHeader {
    background-color: transparent !important;
    color: ${props => props.theme.palette.grey[100]};
    font-size: 14px;
    font-weight: 600;
  }
  .ht_clone_top {
    z-index: 1;
  }
  .handsontable .rowHeader {
    background-color: ${({ theme }) =>
      theme.palette.type === 'light'
        ? theme.palette.primary.main
        : theme.splitcPalette.neutral[11]} !important;
    color: ${props => props.theme.palette.grey[100]};
    font-size: 14px;
    font-weight: 600;
  }
  .handsontable .wtHolder tr {
    padding: 5px;
  }
  .handsontable td {
    background-color: ${({ theme }) => theme.splitcPalette.neutral[11]};
    color: ${({ theme }) => theme.splitcPalette.neutral[1]};
    padding: 16px 16px;
    text-align: start;
    vertical-align: inherit;
    border-left: 1px solid ${({ theme }) => theme.splitcPalette.neutral[8]} !important;
    border-right: 1px solid ${({ theme }) => theme.splitcPalette.neutral[8]} !important;
    border-bottom: 1px solid ${({ theme }) => theme.splitcPalette.neutral[9]} !important;
  }

  .handsontable .ht_clone_top th {
    font-size: ${({ theme }) => theme.splitcPadding.text.paragraph.small};
    vertical-align: middle;
  }

  .handsontable {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .handsontable .column_editor {
    position: relative;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid white;
    color: white;
  }
  .handsontable tr:first-child th,
  .handsontable tr:first-child td {
    border-top: none;
  }

  .handsontable .ht_clone_inline_start th {
    font-size: ${({ theme }) => theme.splitcPadding.text.paragraph.small};
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .handsontable .wtHolder tr th {
    background-color: ${({ theme }) =>
      theme.palette.type === 'light'
        ? theme.palette.primary.main
        : theme.splitcPalette.neutral[10]} !important;
    color: ${props => props.theme.palette.text.primary};
    padding: 16px 16px;
    text-align: start;
    vertical-align: inherit;
    border: 1px solid ${({ theme }) => theme.splitcPalette.neutral[9]} !important;
    border-bottom: 1px solid ${({ theme }) => theme.splitcPalette.neutral[9]} !important;
  }

  .handsontable .wtHolder tr th span,
  .handsontable td {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.04em;
  }

  .handsontable thead th .relative {
    padding: 0px;
  }

  .handsontableEditor td {
    background-color: ${({ theme }) => theme.splitcPalette.neutral[1]};
    color: ${props => props.theme.palette.text.primary};
  }

  .handsontable .search_result.custom_highlight {
    background-color: ${({ theme }) =>
      theme.palette.type === 'light'
        ? theme.splitcPalette.neutral[7]
        : theme.palette.primary.main} !important;
  }

  .handsontable .changeType {
    display: none;
  }

  .handsontable .search_result {
    background-color: ${({ theme }) =>
      theme.palette.type === 'light'
        ? theme.splitcPalette.neutral[8]
        : theme.palette.primary.dark} !important;
    color: ${props => props.theme.palette.text.primary};
  }

  .handsontable .htAutocompleteArrow {
    width: 10px !important;
  }
`;`

Settings:
const hotSettings: Handsontable.GridSettings = {
columns,
colHeaders,
columnSorting: false,
columnHeaderHeight,
colWidths,
rowHeaders,
search: true,
stretchH: ‘all’,
rowHeights,
beforePaste: (changes, coords) => {
if (changes.length > 100) largePaste(tableRef, changes, coords);
},
minSpareRows: 1,
copyable: true,
manualColumnResize: true,
};

A little bit more about the problem, whenever we get to the page through other page in our website, it loads perfectly, but if the user is already on the page and it refreshes the page, it will load with this bug

Hi @ronaldo.jonson

Thank you for the code. I’ll check it and get back to you after the weekend.