How to style AG grid in svelte?

I am trying to add styling to my AG grid but so far I have not been successful. The only way that has worked is setting some css variables given by the library but that is quite limited. I tried extending the existing classes but I always get Unused css selector warning and I haven’t been able to find a solution after reading the documentation.

This is my code:

<script lang="ts">
    import { onDestroy, onMount } from 'svelte';
    import { Grid } from 'ag-grid-community';
    import 'ag-grid-community/dist/styles/ag-grid.css';
    import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

    let domNode: HTMLDivElement;
    let grid: Grid;

    // specify the columns
    const columnDefs = [{ field: 'make' }, { field: 'model' }, { field: 'price' }];

    // specify the data
    const rowData = [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 }
    ];

    // let the grid know which columns and what data to use
    const gridOptions = {
    defaultColDef: {
      flex: 1,
      minWidth: 150,
      filter: true,
      resizable: true,
      sortable: true,
    },
        columnDefs: columnDefs,
        rowData: rowData
    };

    onMount(() => {
        grid = new Grid(domNode, gridOptions);
    });

    onDestroy(() => {
        if (grid) {
            grid.destroy();
        }
    });
</script>

<div style="display: flex; justify-content: center; align-items: center;">
<div
    id="datagrid"
    bind:this={domNode}
    class="ag-theme-alpine"
    style="height: 70vh; width: 100%;"
/>
</div>

<style lang="scss">
  .ag-theme-alpine {
    --ag-header-background-color: rgb(223, 66, 101);
    --ag-header-foreground-color: #fff;
  }
</style>

Does anyone have an idea of how to do this?

Answer

If you want to change a variable, set it on the container element

#datagrid {
    --ag-header-foreground-color: blue;
}

If you want to change a class, add the :global() modifier to the declaration inside the component

:global(.ag-header-cell) {
    background: orange;
    font-size: 16px;
}

or set up a stylesheet and import it after the other on top

import './ownAgGridStyles.css';

>> REPL (if there’s an error ‘agGrid is not defined’ move the svelte:head element one line down)

Advertisement

Answer