react-window 固定行 sticky
image.png

  1. import React, { createContext, forwardRef } from "react";
  2. import { FixedSizeList as List } from "react-window";
  4. const Context = createContext();
  6. const ItemWrapper = ({ data, index, style }) => {
  7.   const { ItemRenderer, stickyIndices } = data;
  8.   // 过滤掉固定的行
  9.   if (stickyIndices && stickyIndices.includes(index)) {
  10.     return null;
  11.   }
  12.   return <ItemRenderer index={index} style={style} />;
  13. };
  15. // 滚动的行
  16. const Row = ({ index, style }) => {
  17.   return (
  18.     <div className="row" style={style}>
  19.       Row {index}
  20.     </div>
  21.   )
  22. };
  24. // 固定的行
  25. const StickyRow = ({ index, style }) => (
  26.   <div className="sticky" style={style}>
  27.     Sticky Row {index}
  28.   </div>
  29. );
  31. const innerElementType = forwardRef(({ children, ...rest }, ref) => {
  32.   return (
  33.     <Context.Consumer>
  34.       {({ stickyIndices }) => (
  35.         <div ref={ref} {...rest}>
  36.           {stickyIndices.map(index => (
  37.             <StickyRow
  38.               index={index}
  39.               key={index}
  40.               style={{ top: index * 35, left: 0, width: "100%", height: 35 }}
  41.             />
  42.           ))}
  43.           {children}
  44.         </div>
  45.       )}
  46.     </Context.Consumer>
  47.   )
  48. });
  50. function StickyList(props) {
  51.   const { children, stickyIndices, ...rest } = props;
  52.   return (
  53.     <Context.Provider value={{ ItemRenderer: children, stickyIndices }}>
  54.       <List itemData={{ ItemRenderer: children, stickyIndices }} {...rest}>
  55.         {ItemWrapper}
  56.       </List>
  57.     </Context.Provider>
  58.   );
  59. }
  61. function App() {
  62.   return (
  63.     <StickyList
  64.       height={150}
  65.       innerElementType={innerElementType}
  66.       itemCount={1000}
  67.       itemSize={35}
  68.       stickyIndices={[0, 1]} // 那几列固定
  69.       width={300}
  70.     >
  71.       {Row}
  72.     </StickyList>
  73.   )
  74. }
  76. export default App;

less

  1. .sticky {
  2.   position: sticky !important;
  3.   position: -webkit-sticky !important;
  4.   z-index: 2;
  5. }
  7. .row, .sticky {
  8.   display: flex;
  9.   align-items: center;
  10.   background-color: white;
  11.   border-bottom: 1px solid #eee;
  12.   box-sizing: border-box;
  13. }