Search results

Styles and Appearance in Angular Spreadsheet component

17 Sep 2021 / 3 minutes to read

To modify the Spreadsheet appearance, you need to override the default CSS of the spreadsheet. Please find the CSS structure that can be used to modify the Spreadsheet appearance. Also, you have an option to create your own custom theme for all the JavaScript controls using our Theme Studio.

Customizing the Spreadsheet

Use the below CSS to customize the Spreadsheet root element.

Copied to clipboard
.e-spreadsheet {
    font-family: cursive;
}

Customizing the Spreadsheet Ribbon

Use the below CSS to customize the Spreadsheet Ribbon.

Copied to clipboard
.e-spreadsheet .e-ribbon {
    background-color: #808080;
}

Customizing the Spreadsheet formula bar panel

You can customize the Spreadsheet formula bar panel by using this CSS.

Copied to clipboard
.e-spreadsheet .e-formula-bar-panel {
   border: none;
}

Customizing the Spreadsheet formula bar text

You can customize the Spreadsheet formula bar text by using this CSS.

Copied to clipboard
.e-spreadsheet .e-formula-bar-panel .e-formula-bar {
    font-weight: bold;
}

Sheet

Customizing the Spreadsheet sheet element

Using this CSS, you can customize the Spreadsheet sheet element.

Copied to clipboard
.e-spreadsheet .e-sheet-panel .e-sheet {
    border-color: #000000;
}

Customizing the Spreadsheet sheet header

Use the below CSS to customize the Spreadsheet sheet header.

Copied to clipboard
.e-spreadsheet .e-sheet-panel .e-sheet .e-header-panel {
    font-style: oblique;
}

Customizing the Spreadsheet row header

Use the below CSS to customize the Spreadsheet row header.

Copied to clipboard
.e-spreadsheet .e-row-header .e-header-cell {
    color: #0000FF !important;
}

Customizing the Spreadsheet column header

Use the below CSS to customize the Spreadsheet column header.

Copied to clipboard
.e-spreadsheet .e-column-header .e-header-cell {
    color: #0000FF !important;
}

Customizing the Spreadsheet selection element

Customize the Spreadsheet selection element.

Copied to clipboard
.e-spreadsheet .e-selection {
    border-color: #0000FF;
}

Customizing the Spreadsheet active cell element

Customize the Spreadsheet active cell element.

Copied to clipboard
.e-spreadsheet .e-active-cell {
    border-color: #0000FF;
}

Customizing the Spreadsheet cell element

Using this CSS, you can customize the Spreadsheet cell element.

Copied to clipboard
.e-spreadsheet .e-cell {
    background-color: #0078d7 !important;
}

Ribbon Items

Customizing the Spreadsheet sorting icon

Use the below CSS to customize the Spreadsheet sorting icon in the Spreadsheet ribbon. You can use the available Syncfusion icons based on your theme.

Copied to clipboard
.e-spreadsheet .e-sort-filter-icon:before {
    background-color: #deecf9;
    content: '\e306';
}

Customizing the filter dialog content

Use the below CSS to customize the Spreadsheet filter dialog content element.

Copied to clipboard
.e-spreadsheet .e-filter-popup .e-dlg-content {
    background-color: #deecf9;
}

Spreadsheet filter dialog footer element can be customized by using the below CSS.

Copied to clipboard
.e-spreadsheet .e-filter-popup .e-footer-content {
    background-color: #ccffff;
}

Customizing the filter dialog input element

Use the below CSS to customize the Spreadsheet filter dialog input element.

Copied to clipboard
.e-spreadsheet .e-filter-popup .e-input-group input.e-input{
      font-family: cursive;
}

Customizing the filter dialog button element

Use the below CSS to customize the Spreadsheet filter dialog button element.

Copied to clipboard
.e-spreadsheet .e-filter-popup .e-btn{
    font-family: cursive;
}

Customizing the Excel filter dialog number filters element

Spreadsheet Excel filter dialog number filters element can be customized by using the below CSS.

Copied to clipboard
.e-spreadsheet .e-filter-popup .e-contextmenu-wrapper ul{
    background-color: #deecf9;
}

Customizing the Spreadsheet sheet tab panel

Spreadsheet sheet tab panel can be customized by using the below CSS.

Copied to clipboard
.e-spreadsheet .e-sheet-tab-panel {
    background: #08fbfb;
}

Customizing the Spreadsheet sheet tab

Spreadsheet sheet tab element can be customized by using the below CSS.

Copied to clipboard
.e-spreadsheet .e-sheet-tab-panel .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text {
    font-weight: bold;
}