Sticky Header not working

[muhammad haikal]

Hi, i have this code and already applied enableStickyHeader props. buat it's not working properly. Thank you for assistance

<>

{selectedRows.length > 0 && (

<ActionBar

selectedIndex={selectedRows.length}

handleDeselectAll={handleDeselectAll}

/>

)}

<GridComponent

dataSource={pagedData}

enableStickyHeader

height="100%"

width="100%"

allowTextWrap

textWrapSettings={{ wrapMode: "Header" }}

selectionSettings={{

checkboxOnly: true,

type: "Multiple",

}}

rowSelected={handleRowSelected}

rowDeselected={handleRowDeselected}

ref={(g) => (grid = g)}

autoFit

>

<ColumnsDirective>

<ColumnDirective type="checkbox" width={60} freeze="Left" />

{columns

.filter((column) => column.isVisible) // Filter hanya kolom yang isVisible true

.map((column, index) => (

<ColumnDirective

key={index}

field={column.field}

headerText={column.headerText}

width={column.width}

template={column.template}

freeze={column.freeze}

visible={column.isVisible}

textAlign={column.textAlign}

autoFit

/>

))}

</ColumnsDirective>

<Inject services={[Edit, CommandColumn, Page, Freeze, Resize]} />

</GridComponent>

<Stack flexDirection="row" justifyContent="space-between" mt="14px">

<Stack flexDirection="row" alignItems="center" gap="8px">

<Typography

sx={{

fontSize: "14px",

lineHeight: "20px",

fontWeight: 400,

color: "#212529",

}}

>

Baris per halaman

</Typography>

<Select

value={pageSize}

onChange={(e) => {

setCurrentPage("1");

setPageSize(e.target.value);

}}

fullWidth

sx={{

width: "72px",

height: "40px",

backgroundColor: "#ffffff",

}}

>

{pageSizeOptions.map((size) => (

<MenuItem key={size} value={size.toString()}>

{size}

</MenuItem>

))}

</Select>

</Stack>

<Stack flexDirection="row" alignItems="center">

<Stack flexDirection="row" alignItems="center" gap="8px">

<Box>

<Select

value={currentPage}

onChange={(e) => onPageChange(parseInt(e.target.value, 10))}

fullWidth

sx={{

width: "72px",

height: "40px",

backgroundColor: "#ffffff",

}}

>

{Array.from({ length: parseInt(totalPages, 10) }, (_, i) => (

<MenuItem key={i + 1} value={(i + 1).toString()}>

{i + 1}

</MenuItem>

))}

</Select>

</Box>

<Typography

sx={{

fontSize: "14px",

fontWeight: 400,

lineHeight: "20px",

color: "#212529",

}}

>

dari {totalPages} Halaman

</Typography>

</Stack>

<Pagination

count={parseInt(totalPages, 10)}

page={parseInt(currentPage, 10)}

onChange={(_, page) => onPageChange(page)}

color="primary"

size="small"

/>

</Stack>

</Stack>

</>

[muhammad haikal]

for additional info, this is the layout wrapper

<Box

position="relative"

display="flex"

flexDirection="column"

minHeight="100vh"

>

<Box position="relative" zIndex={2} width="100%">

<Navbar />

</Box>

<Sidebar />

<Container

sx={{ position: "relative", zIndex: 1, flexGrow: 1 }}

maxWidth="lg"

>

<div style={{ zIndex: 0, paddingTop: "64px" }} className="main-content">

<Box px="32px" pt="24px" position="relative">

{children}

</Box>

</div>

</Container>

<Stack justifyContent="center" alignItems="center" mt="auto" p={2}>

{/* Footer */}

</Stack>

</Box>

[Dineshnarasimman Muthu]

Hi Muhammad Haikal,

Greetings from Syncfusion Support.

We have reviewed your query about headers not in the position when using enableStickyHeaders property in the grid. We tried to replicate the issue by preparing a simple local sample implementing based on the code snippet which you have attached. However, we cannot replicate the reported behavior from our end. We have attached the local sample and video demonstration for your reference.

We request you to provide the following information which will help us to validate this issue further.

• Please ensure the sample we have attached resembles your application. Let us know if the issue replicates in this sample.

• Please provide the issue replicating sample or please replicate the issue in the sample which we have attached.

• Please provide us the current Syncfusion package version you are using in your application.

• Please provide the video demonstration of the reported behavior and please ensure us whether any console error is thrown in the console window.

We highly appreciate your patience and understanding.

Regards,

Dineshnarasimman M

Attachment: ReactStickyHeaderSample_67564f2d.zip

[Dineshnarasimman Muthu]

Hi,

Please find the video demonstration below.

Regards,

DIneshnarasimman M

Attachment: ReactStickyHeaderVideo_b5bab151.zip