Sometimes handsontable renders headers on pages top

Tags: #<Tag:0x00007f8b28601818>
#1

image
image.png1092×765 5 KB

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

image
image.png1634×811 43.9 KB

#2

Hi @ronaldo.jonson

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

#3

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,
};

#4

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

#5

Hi @ronaldo.jonson

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

#6

Hi @ronaldo.jonson

I checked your code as much as I could, but I wasn’t able to reproduce that issue. One thing that you need to know is that heavy customisation of Handsontable internal CSS might produce problems like yours, especially regarding positioning parameters.

1 Like
#7

That was precisely the problem. removing styles seems to fix it thank yo a lot!

#8

I’m glad I could help. I will close this topic then.

#9