如何在 oracle JET 中将 CSS 样式应用于 oj-table？

Question

我有 oracle jet table 那样

<oj-table  class='oj-table-data-cell-padding' id="table" aria-label="Departments Table"
                                data='[[dataSource]]'
                                display = "grid"
                                on-oj-before-current-row = "[[currentRowListener]]"
                                selectionMode = "{'row': 'single'}"
                                columns-default='{"sortable": "enabled"}'
                                dnd='{"reorder": {"columns": "enabled"}}'
                                style="width:100%;margin-bottom:40px; background-color: #1E90FF;"
                                columns='[{"headerText": "Course Id", 
                                                   "field": "Id",
                                                   "headerClassName": "oj-sm-only-hide",
                                                   "className": "oj-sm-only-hide",
                                                   "resizable": "enabled"},
                                                   {"headerText": "Course Name", 
                                                   "field": "CourseName",
                                                   "resizable": "enabled"},
                                                  {"headerText": "Description", 
                                                   "field": "CourseDescription",
                                                   "resizable": "enabled"},
                                                  {"headerText": "other Details", 
                                                   "field": "OtherDetail",
                                                   "headerClassName": "oj-sm-only-hide",
                                                   "className": "oj-sm-only-hide",
                                                   "resizable": "enabled"}

                                                    ]'

    </oj-table>

问题是当我应用 css 时，有些标签有效，有些无效例如背景颜色不起作用

那么如何在 oracle jet 中添加 CSS 样式？

Answer 1

您的代码是正确的。 background-color 不起作用的原因是因为 OJET 开发人员希望我们只能更改组件的高度和宽度等基本内容。

如果你想改变更多的东西，比如组件的美学，你必须使用他们的 Theme Builder。

作为解决方法，您还可以检查元素并找到它们在内部用于组件的类并修改它们的值。例如，

.oj-table-element {
     background-color: blue;
}

Answer 2

如何将工具提示添加到 oj-table header

  columns='[{"headerText": "Course Id", 
 "field": "Id",
 "headerClassName": "oj-sm-only-hide",
"className": "oj-sm-only-hide",
"resizable": "enabled"},
{"headerText": "Course Name", 
"field": "CourseName",
"resizable": "enabled"},
{"headerText": "Description", 
"field": "CourseDescription",
"resizable": "enabled"},
"headerText": "other Details", 
"field": "OtherDetail",
"headerClassName": "oj-sm-only-hide",
"className": "oj-sm-only-hide",
"resizable": "enabled"}

                                                    ]

如何在 oracle JET 中将 CSS 样式应用于 oj-table？

how to apply CSS styles to oj-table in oracle JET?

css

oracle-jet