How to customize the style of the Raw Data Table

#1

Hi, guys, I need change the style of the raw data table to match with my current application style, I was reviewing on the live demos to see if it is provided a demo with the theming functions exposed with no success, could be provided an easy example to follow. Thanks.

#2

hi @ryan, this example comes from the Table Theme Configuration page of the documentation, feel free to check it out and let me know if do you have more questions. Best regards.

var providers = [{
    name: 'Elasticsearch',
    provider: 'elasticsearch',
    url: 'https://chartfactor.com/elastic/'
}];

cf.setProviders(providers);
var color = cf.Color();

color.theme({
    'gridPanelStyle': 'border: none;',
    'headerStyle': 'background: #56565c; color: #EEE;',
    'headerIconStyle': 'color: white;',
    'headerLabelStyle': 'font-size: 16px;',
    'headerNumericStyle': 'color: #;',
    'headerResizeLineStyle': 'border-right: 1px solid white;',
    'headerHorizontalLineStyle': 'border-bottom: 1px solid white;',
    'bodyStyle': 'background: gray; color: #EEE; font-size: 14px;',
    'filterStyle': 'border: none; height: 30px;',
    'unselectedCheckboxStyle': 'color: #EEE; background: transparent;',
    'selectedCheckboxStyle': 'color: white;',
    'rowSelectedStyle': 'background: #009EDE;',
    'rowOddStyle': 'background: #8d8d8d; color: white;',
    'rowEvenStyle': 'background: #6c6767; color: white;',
    'rowNumericOddStyle': 'background: white; color: black;',
    'rowNumericEvenStyle': 'background: grey;',
    'loadingTemplate': '<span class="ag-overlay-loading-center">Please wait...</span>'
});

cf.provider('Elasticsearch')
.source('ticket_sales')
.fields()
.graph('Raw Data Table')
.set('color', color)
.element('chart')
.execute();