Adjusting the table headers on Kintone JSedit

Question

So far, my main problem is that I am trying to adjust a table on Kintone. I have been able to access the contents of the table (when you add table elements to it, you can see the colors changing, however the headers themselves do not seem to change).

Currently, I am using Kintone (Cybozu), however since it is using JSEdit, I think the problem can be solved with Javascript knowledge (which I very much do not have).

What do I want to do?

(please see the attached pictures) Center, bold, and other adjustments to those headers. If my code is completely wrong, please do ignore it and any code that will help this situation would be greatly appreciated.

enter image description here

enter image description here

Answer 1

From the code you shared, you get a table element as kintone.app.record.getFieldElement(field code of the table), but as for the table, it contains multiple elements. Therefore, as with other fields, changing the style.backgroundColor of the acquired element will not change the color.

Could you try and apply the following CSS to get the desired process? The header will be yellow with the CSS below, so please specify the color as desired.

.body-record-print .show-subtable-gaia th {
background-color: #FFFF00;
}

I hope this helps.

Answer 2

For anyone that has the same problem with atlaskit, I asked here too, and looks like this is a dependency problem.

To solve it for me, I downgraded some packages to match this configuration:

"dependencies": {
    "@atlaskit/editor-core": "^151.3.0",
    "@atlaskit/media-core": "^32.2.0",
    "@atlaskit/renderer": "^81.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-intl": "2.8.0",
    "react-scripts": "4.0.3",
    "styled-components": "^3.2.6"
  }

As Ryker Tyler said on the other forum:

According to my experience with Atlaskit, it has a huge dependence on the version of react, react-scripts, webpack and also its own peer dependencies (between @atlaskit/editor-core and @atlaskit/media-core for example, and it also requires peer dependencies on react-intl and styled-components on the specific version.

Some Atlaskit components are not yet compatible with React 17 and react-scripts 5.x.x. They are still dependent on React 16 and react-scripts 4.x.x.

I think you could try to downgrade to React 16 and react-scripts 4 if you want to work well with Atlaskit.