how to fix header and footer

[Nyx2022]

hello, i have a large data in datagrid,so it will has scrollbar in ui,but i wanna fix the header and footer,i do not know how to realise it

[Natasha-eng]

Hello @Nyx2022 ,

By default the header and footer have sticky position. You can check the demo here: https://docs.svar.dev/svelte/grid/samples/#/custom/willow

But if you want to change styles of header/footer there is a css property of the header/footer parameter in column settings where you can add your custom styles.
Here you can see how to apply it:

{
    id: "firstName",
    header: [
      {
        text: "First Name",
        css: "customStyle",
      },
      {
        filter: {
          type: "text",
          config: {
            icon: "wxi-search",
            clear: true,
          },
        },
      },
    ],

    footer: [
      {
        cell: FooterTextCell,
        text: "Sort",
        css: "customStyle",
      },
    ],
    sort: true,
  }

And here is the code of how to apply this style:

<style>
  :global(.customStyle) {
   //your styles
  }
</style>