2

I use Fluent UI. I have a DetailsList component, and I used ScrollablePane to make the Header always on the top. After I used ScrollablePane, I had typescript error. I couldn't find any proper solutions to fix it. Is there a way to fix it?

enter image description here

<ScrollablePane
            scrollbarVisibility={ScrollbarVisibility.auto}
            styles={{
              root: {
                selectors: {
                  '.ms-ScrollablePane--contentContainer': {
                    scrollbarWidth: 6,
                  },
                  '.ms-ScrollablePane--contentContainer::-webkit-scrollbar': {
                    width: 6,
                    height: 6,
                  },
                },
              },
            }}
          >
            <DetailsList
              items={elements}
              columns={columns}
              selectionMode={SelectionMode.none}
              setKey="none"
              onColumnHeaderClick={() => setPreventSortIconOnRender(false)}
              layoutMode={DetailsListLayoutMode.justified}
              isHeaderVisible={true}
              onRenderDetailsHeader={(headerProps, defaultRender) => {
                return (
                  <Sticky
                    stickyPosition={StickyPositionType.Header}
                    isScrollSynced={true}
                    stickyBackgroundColor="transparent"
                  >
                    {defaultRender &&
                      defaultRender({
                        ...headerProps,
                        styles: {
                          root: {
                            selectors: {
                              '.ms-DetailsHeader-cellName': {
                                fontWeight: 'normal',
                                fontSize: 'var(--font-size-0)',
                              },
                            },
                          },
                        },
                      })}
                  </Sticky>
                );
              }}
            />
          </ScrollablePane>
Ozan Bilgiç
  • 215
  • 1
  • 9

0 Answers0