search

cidgoh / DataHarmonizer

A standardized browser-based spreadsheet editor and validator that can be run offline and locally, and which includes templates for SARS-CoV-2 and Monkeypox sampling data. This project, created by the Centre for Infectious Disease Genomics and One Health (CIDGOH), at Simon Fraser University, is now an open-source collaboration with contributions from the National Microbiome Data Collaborative (NMDC), the LinkML development team, and others.
MIT License
91 stars 25 forks source link

center handsontable grid headers #254

Closed sujaypatil96 closed 2 years ago

sujaypatil96 commented 2 years ago

Is there any way to configure the alignment of the headers that are created in the DataHarmonizer grid? I see the handsontable JS library is being used to create the grid, and it seems adding the property, className: 'htCenter' to the Handsontable() in the main.js file isn't doing the trick.

ddooley commented 2 years ago

Is that style revealed in inspected code of generated HTML? If so then its probably current main.css stylesheet overriding that .htCenter class. Would it be just 2nd row that you'd like centred headers for, or both first and 2nd rows?

sujaypatil96 commented 2 years ago

Hm, it's not revealed in the inspected code HTML code. I was just going through the CSS and JS files to see where we could modify it so that the headers can be center aligned.

Would it be just 2nd row that you'd like centred headers for, or both first and 2nd rows?

Just the first row for our use case.

ddooley commented 2 years ago

Looks like htCenter is getting applied to entire table rather than the individual header areas, which is a problem in that it triggers cell contents to be centred too. I think one needs to approach those header cells via css path: E.g. modify main.css and override #grid th:


#grid thead > tr:first-child > th div.relative {text-align: center; color: red}

#grid th {
    /* text-align: left; */
}
ddooley commented 2 years ago

Actually I think this is more to the point: / To left align 1st and second row headers, uncomment this. Otherwise first two rows of column headers are centered./

grid th {

text-align: left;

}

/ To center 2nd row headers, uncomment this style. /

grid thead > tr:nth-child(2) > th div.relative {

text-align: center;

}

I think I can close this now. Reopen if any issues encountered.