@are-visual/virtual-table 0.0.1

package/middleware/summary/index.js

@@ -0,0 +1,203 @@
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { useHorizontalScrollContext, Colgroup, useTableSticky, isValidFixedLeft, isValidFixedRight, isValidFixed, createMiddleware } from '@are-visual/virtual-table';
+import { createContext, useState, useRef, useEffect, memo, useMemo, useContext, Fragment, isValidElement, useCallback } from 'react';
+import { getScrollbarSize } from '@are-visual/virtual-table/middleware/utils/getScrollbarSize';
+import clsx from 'clsx';
+
+const SummaryContext = /*#__PURE__*/createContext(null);
+
+const Footer = props => {
+  const {
+    columns,
+    fixed,
+    children
+  } = props;
+  const {
+    listen,
+    notify
+  } = useHorizontalScrollContext();
+  const [scrollbarHeight] = useState(() => getScrollbarSize().height);
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    const node = wrapperRef.current;
+    if (node == null) return;
+    const key = 'virtual-table-summary';
+    const onScroll = () => {
+      const nextScrollLeft = node.scrollLeft;
+      notify(key, nextScrollLeft, node);
+    };
+    const dispose = listen(key, scrollLeft => {
+      node.scrollLeft = scrollLeft;
+    });
+    node.addEventListener('scroll', onScroll);
+    return () => {
+      node.removeEventListener('scroll', onScroll);
+      dispose();
+    };
+  }, [listen, notify]);
+  return jsx("div", {
+    className: clsx('virtual-table-summary-wrapper', fixed && 'virtual-table-summary-sticky-bottom virtual-table-summary-top-border'),
+    style: {
+      paddingBottom: scrollbarHeight
+    },
+    ref: wrapperRef,
+    children: jsxs("table", {
+      className: "virtual-table-summary",
+      children: [jsx(Colgroup, {
+        columns: columns
+      }), jsx("tfoot", {
+        className: "virtual-table-summary-tfoot",
+        children: children
+      })]
+    })
+  });
+};
+
+function Cell(props) {
+  const {
+    className,
+    style,
+    children,
+    align,
+    colSpan,
+    columnKey,
+    ...restProps
+  } = props;
+  const {
+    size: stickySizes,
+    fixed: columnsFixed
+  } = useTableSticky();
+  const stickySize = stickySizes.get(columnKey);
+  const fixed = columnsFixed.find(x => x.key === columnKey)?.fixed;
+  const {
+    left: lastFixedLeftColumnKey,
+    right: firstFixedRightColumnKey
+  } = useMemo(() => {
+    const left = columnsFixed.reduce((result, x) => {
+      if (isValidFixedLeft(x.fixed)) {
+        return x.key;
+      }
+      return result;
+    }, undefined);
+    const right = columnsFixed.find(x => isValidFixedRight(x.fixed))?.key;
+    return {
+      left,
+      right
+    };
+  }, [columnsFixed]);
+  if (colSpan === 0) {
+    return null;
+  }
+  return jsx("td", {
+    ...restProps,
+    colSpan: colSpan,
+    className: clsx('virtual-table-cell virtual-table-summary-cell', align != null && `virtual-table-align-${align}`, isValidFixed(fixed) && 'virtual-table-sticky-cell', lastFixedLeftColumnKey === columnKey && 'virtual-table-cell-fix-left-last', firstFixedRightColumnKey === columnKey && 'virtual-table-cell-fix-right-first', className),
+    style: {
+      ...style,
+      left: isValidFixedLeft(fixed) ? stickySize : undefined,
+      right: isValidFixedRight(fixed) ? stickySize : undefined
+    },
+    children: children
+  });
+}
+var Cell$1 = /*#__PURE__*/memo(Cell);
+
+const SummaryRow = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const descriptor = useContext(SummaryContext);
+  if (typeof children === 'function') {
+    if (descriptor != null) {
+      return jsx("tr", {
+        ...props,
+        children: descriptor.map(item => {
+          const {
+            key
+          } = item;
+          if (item.type === 'blank') {
+            return jsx("td", {}, key);
+          }
+          const {
+            column
+          } = item;
+          return jsx(Fragment, {
+            children: children(column, key)
+          }, key);
+        })
+      });
+    } else {
+      throw new Error('SummaryRow is missing the columns context and cannot use children as a function.');
+    }
+  }
+  return jsx("tr", {
+    ...props,
+    children: children
+  });
+};
+
+function Summary(_ref) {
+  let {
+    children
+  } = _ref;
+  return children;
+}
+Summary.Row = SummaryRow;
+Summary.Cell = Cell$1;
+
+function useTableSummary(ctx, options) {
+  const {
+    summary
+  } = options ?? {};
+  const {
+    dataSource
+  } = ctx;
+  const summaryNode = summary?.(dataSource);
+  const fixed = /*#__PURE__*/isValidElement(summaryNode) && summaryNode.type === Summary && summaryNode.props.fixed;
+  const renderHeader = useCallback((children, _ref) => {
+    let {
+      columnDescriptor
+    } = _ref;
+    return jsxs(Fragment$1, {
+      children: [children, jsx("tfoot", {
+        className: "virtual-table-summary-tfoot",
+        children: jsx(SummaryContext.Provider, {
+          value: columnDescriptor,
+          children: summaryNode
+        })
+      })]
+    });
+  }, [summaryNode]);
+  if (summary == null) {
+    return ctx;
+  }
+  if (fixed === 'top') {
+    return {
+      ...ctx,
+      renderHeader
+    };
+  }
+  return {
+    ...ctx,
+    renderContent(children, _ref2) {
+      let {
+        columnDescriptor
+      } = _ref2;
+      return jsxs(Fragment$1, {
+        children: [children, jsx(Footer, {
+          fixed: fixed === 'bottom' || fixed,
+          columns: columnDescriptor,
+          children: jsx(SummaryContext.Provider, {
+            value: columnDescriptor,
+            children: summaryNode
+          })
+        })]
+      });
+    }
+  };
+}
+const tableSummary = createMiddleware(useTableSummary);
+
+export { Summary, tableSummary };
+//# sourceMappingURL=index.js.map

package/middleware/summary/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../packages/virtual-table/src/middleware/summary/context/columns.tsx","../../../../packages/virtual-table/src/middleware/summary/footer.tsx","../../../../packages/virtual-table/src/middleware/summary/cell.tsx","../../../../packages/virtual-table/src/middleware/summary/row.tsx","../../../../packages/virtual-table/src/middleware/summary/summary.tsx","../../../../packages/virtual-table/src/middleware/summary/index.tsx"],"sourcesContent":["import type { ColumnDescriptor } from '@are-visual/virtual-table'\nimport { createContext } from 'react'\n\nexport const SummaryContext = createContext<ColumnDescriptor[] | null>(null)\n","import type { ColumnDescriptor } from '@are-visual/virtual-table'\nimport type { FC, ReactNode } from 'react'\nimport { Colgroup, useHorizontalScrollContext } from '@are-visual/virtual-table'\nimport { getScrollbarSize } from '@are-visual/virtual-table/middleware/utils/getScrollbarSize'\nimport clsx from 'clsx'\nimport { useEffect, useRef, useState } from 'react'\n\nexport interface FooterProps {\n  columns: ColumnDescriptor[]\n  fixed?: boolean\n  children?: ReactNode\n}\n\nconst Footer: FC<FooterProps> = (props) => {\n  const { columns, fixed, children } = props\n\n  const { listen, notify } = useHorizontalScrollContext()\n  const [scrollbarHeight] = useState(() => getScrollbarSize().height)\n\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    const node = wrapperRef.current\n    if (node == null) return\n    const key = 'virtual-table-summary'\n    const onScroll = () => {\n      const nextScrollLeft = node.scrollLeft\n      notify(key, nextScrollLeft, node)\n    }\n    const dispose = listen(key, (scrollLeft) => {\n      node.scrollLeft = scrollLeft\n    })\n    node.addEventListener('scroll', onScroll)\n    return () => {\n      node.removeEventListener('scroll', onScroll)\n      dispose()\n    }\n  }, [listen, notify])\n\n  return (\n    <div\n      className={clsx(\n        'virtual-table-summary-wrapper',\n        fixed && 'virtual-table-summary-sticky-bottom virtual-table-summary-top-border',\n      )}\n      style={{ paddingBottom: scrollbarHeight }}\n      ref={wrapperRef}\n    >\n      <table className=\"virtual-table-summary\">\n        <Colgroup columns={columns} />\n        <tfoot className=\"virtual-table-summary-tfoot\">{children}</tfoot>\n      </table>\n    </div>\n  )\n}\n\nexport default Footer\n","import type { ColumnType } from '@are-visual/virtual-table'\nimport type { DetailedHTMLProps, HTMLAttributes, Key } from 'react'\nimport { isValidFixed, isValidFixedLeft, isValidFixedRight, useTableSticky } from '@are-visual/virtual-table'\nimport clsx from 'clsx'\nimport { memo, useMemo } from 'react'\n\ntype NativeProps = DetailedHTMLProps<\n  HTMLAttributes<HTMLTableCellElement>,\n  HTMLTableCellElement\n>\n\nexport interface CellProps extends NativeProps, Pick<ColumnType<unknown>, 'align'> {\n  columnKey: Key\n  colSpan?: number\n}\n\nfunction Cell(props: CellProps) {\n  const {\n    className,\n    style,\n    children,\n    align,\n    colSpan,\n    columnKey,\n    ...restProps\n  } = props\n\n  const { size: stickySizes, fixed: columnsFixed } = useTableSticky()\n\n  const stickySize = stickySizes.get(columnKey)\n  const fixed = columnsFixed.find((x) => x.key === columnKey)?.fixed\n\n  const { left: lastFixedLeftColumnKey, right: firstFixedRightColumnKey } = useMemo(() => {\n    const left = columnsFixed.reduce<Key | undefined>((result, x) => {\n      if (isValidFixedLeft(x.fixed)) {\n        return x.key\n      }\n      return result\n    }, undefined)\n    const right = columnsFixed.find((x) => isValidFixedRight(x.fixed))?.key\n    return { left, right }\n  }, [columnsFixed])\n\n  if (colSpan === 0) {\n    return null\n  }\n\n  return (\n    <td\n      {...restProps}\n      colSpan={colSpan}\n      className={clsx(\n        'virtual-table-cell virtual-table-summary-cell',\n        align != null && `virtual-table-align-${align}`,\n        isValidFixed(fixed) && 'virtual-table-sticky-cell',\n        lastFixedLeftColumnKey === columnKey && 'virtual-table-cell-fix-left-last',\n        firstFixedRightColumnKey === columnKey && 'virtual-table-cell-fix-right-first',\n        className,\n      )}\n      style={{\n        ...style,\n        left: isValidFixedLeft(fixed) ? stickySize : undefined,\n        right: isValidFixedRight(fixed) ? stickySize : undefined,\n      }}\n    >\n      {children}\n    </td>\n  )\n}\n\nexport default memo(Cell)\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { ColumnType } from '@are-visual/virtual-table'\nimport type { CSSProperties, FC, Key, MouseEvent, ReactNode } from 'react'\nimport { Fragment, useContext } from 'react'\nimport { SummaryContext } from './context/columns'\n\nexport interface SummaryRowProps {\n  children?: ReactNode | ((column: ColumnType<any>, key: Key) => ReactNode)\n  className?: string\n  style?: CSSProperties\n  onClick?: (e?: MouseEvent<HTMLElement>) => void\n}\n\nconst SummaryRow: FC<SummaryRowProps> = ({ children, ...props }) => {\n  const descriptor = useContext(SummaryContext)\n\n  if (typeof children === 'function') {\n    if (descriptor != null) {\n      return (\n        <tr {...props}>\n          {descriptor.map((item) => {\n            const { key } = item\n            if (item.type === 'blank') {\n              return <td key={key} />\n            }\n            const { column } = item\n            return <Fragment key={key}>{children(column, key)}</Fragment>\n          })}\n        </tr>\n      )\n    } else {\n      throw new Error('SummaryRow is missing the columns context and cannot use children as a function.')\n    }\n  }\n\n  return <tr {...props}>{children}</tr>\n}\n\nexport default SummaryRow\n","import type { ReactElement, ReactNode } from 'react'\n\nimport Cell from './cell'\nimport Row from './row'\n\nexport interface SummaryProps {\n  fixed?: boolean | 'top' | 'bottom'\n  children?: ReactNode\n}\n\nfunction Summary({ children }: SummaryProps) {\n  return children as ReactElement\n}\n\nSummary.Row = Row\nSummary.Cell = Cell\n\nexport default Summary\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { MiddlewareContext, MiddlewareRenderHeader, MiddlewareResult } from '@are-visual/virtual-table'\nimport type { ReactNode } from 'react'\nimport type { SummaryProps } from './summary'\nimport { createMiddleware } from '@are-visual/virtual-table'\nimport { isValidElement, useCallback } from 'react'\nimport { SummaryContext } from './context/columns'\nimport Footer from './footer'\nimport Summary from './summary'\n\nexport interface TableSummaryOptions<T = any> {\n  summary: (data: readonly T[]) => ReactNode\n}\n\nfunction useTableSummary<T = any>(\n  ctx: MiddlewareContext<T>,\n  options?: TableSummaryOptions<T>,\n): MiddlewareResult<T> {\n  const { summary } = options ?? {}\n  const { dataSource } = ctx\n\n  const summaryNode = summary?.(dataSource)\n  const fixed = isValidElement(summaryNode)\n    && summaryNode.type === Summary\n    && (summaryNode.props as SummaryProps).fixed\n\n  const renderHeader: MiddlewareRenderHeader = useCallback((children, { columnDescriptor }) => {\n    return (\n      <>\n        {children}\n        <tfoot className=\"virtual-table-summary-tfoot\">\n          <SummaryContext.Provider value={columnDescriptor}>\n            {summaryNode}\n          </SummaryContext.Provider>\n        </tfoot>\n      </>\n    )\n  }, [summaryNode])\n\n  if (summary == null) {\n    return ctx\n  }\n\n  if (fixed === 'top') {\n    return { ...ctx, renderHeader }\n  }\n\n  return {\n    ...ctx,\n    renderContent(children, { columnDescriptor }) {\n      return (\n        <>\n          {children}\n          <Footer fixed={fixed === 'bottom' || fixed} columns={columnDescriptor}>\n            <SummaryContext.Provider value={columnDescriptor}>\n              {summaryNode}\n            </SummaryContext.Provider>\n          </Footer>\n        </>\n      )\n    },\n  }\n}\n\nexport { default as Summary } from './summary'\nexport const tableSummary = createMiddleware(useTableSummary)\n"],"names":["SummaryContext","createContext","Footer","props","columns","fixed","children","listen","notify","useHorizontalScrollContext","scrollbarHeight","useState","getScrollbarSize","height","wrapperRef","useRef","useEffect","node","current","key","onScroll","nextScrollLeft","scrollLeft","dispose","addEventListener","removeEventListener","_jsx","className","clsx","style","paddingBottom","ref","_jsxs","Colgroup","Cell","align","colSpan","columnKey","restProps","size","stickySizes","columnsFixed","useTableSticky","stickySize","get","find","x","left","lastFixedLeftColumnKey","right","firstFixedRightColumnKey","useMemo","reduce","result","isValidFixedLeft","undefined","isValidFixedRight","isValidFixed","memo","SummaryRow","_ref","descriptor","useContext","map","item","type","column","Fragment","Error","Summary","Row","useTableSummary","ctx","options","summary","dataSource","summaryNode","isValidElement","renderHeader","useCallback","columnDescriptor","Provider","value","renderContent","_ref2","_Fragment","tableSummary","createMiddleware"],"mappings":"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"}

package/middleware/summary/styles.css

@@ -0,0 +1,36 @@
+.virtual-table-summary-wrapper {
+  overflow: auto hidden;
+  scrollbar-width: none;
+}
+.virtual-table-summary-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.virtual-table-summary-top-border {
+  box-shadow: var(--virtual-table-summary-border-color, var(--virtual-table-border-color, #f0f0f0)) 0px -1px 0px 0px;
+}
+
+.virtual-table-summary {
+  border-spacing: 0;
+  table-layout: fixed;
+  width: 100%;
+  min-width: 100%;
+  box-shadow: 0 -1px 0 var(--virtual-table-border-color);
+}
+.virtual-table-summary-sticky-bottom {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+}
+.virtual-table-summary-tfoot {
+  background-color: var(--virtual-table-summary-background, #fff);
+}
+.virtual-table-summary-cell {
+  background-color: var(--virtual-table-summary-background, #fff);
+  border-bottom: 1px solid var(--virtual-table-border-color);
+}
+
+.virtual-table-has-fix-left .virtual-table-summary-cell {
+  background-color: var(--virtual-table-summary-background, #fff);
+}

package/middleware/summary/styles.scss

@@ -0,0 +1,45 @@
+$virtual-table-summary-background: var(--virtual-table-summary-background, #fff);
+$virtual-table-summary-border-color: var(--virtual-table-summary-border-color, var(--virtual-table-border-color, #f0f0f0));
+
+.virtual-table-summary-wrapper {
+  overflow: auto hidden;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.virtual-table-summary-top-border {
+  box-shadow: $virtual-table-summary-border-color 0px -1px 0px 0px;
+}
+
+.virtual-table-summary {
+  border-spacing: 0;
+  table-layout: fixed;
+  width: 100%;
+  min-width: 100%;
+  box-shadow: 0 -1px 0 var(--virtual-table-border-color);
+
+  &-sticky-bottom {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+  }
+
+  &-tfoot {
+    background-color: $virtual-table-summary-background;
+  }
+
+  &-cell {
+    background-color: $virtual-table-summary-background;
+    border-bottom: 1px solid var(--virtual-table-border-color);
+  }
+}
+
+.virtual-table-has-fix-left {
+  .virtual-table-summary-cell {
+    background-color: $virtual-table-summary-background;
+  }
+}

package/middleware/utils/getScrollbarSize.d.ts

@@ -0,0 +1,5 @@
+/** 获取默认的滚动条大小 */
+export declare function getScrollbarSize(): {
+    width: number;
+    height: number;
+};

package/middleware/utils/getScrollbarSize.js

@@ -0,0 +1,15 @@
+/** 获取默认的滚动条大小 */
+export function getScrollbarSize() {
+    const scrollDiv = document.createElement('div');
+    scrollDiv.style.position = 'absolute';
+    scrollDiv.style.width = '100px';
+    scrollDiv.style.height = '100px';
+    scrollDiv.style.overflow = 'scroll';
+    scrollDiv.style.top = '-9999px';
+    document.body.appendChild(scrollDiv);
+    const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+    const scrollbarHeight = scrollDiv.offsetHeight - scrollDiv.clientHeight;
+    document.body.removeChild(scrollDiv);
+    return { width: scrollbarWidth, height: scrollbarHeight };
+}
+//# sourceMappingURL=getScrollbarSize.js.map

package/middleware/utils/getScrollbarSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getScrollbarSize.js","sourceRoot":"","sources":["../../../../packages/virtual-table/src/middleware/utils/getScrollbarSize.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB,MAAM,UAAU,gBAAgB;IAC9B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAE/C,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAA;IACrC,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,CAAA;IAC/B,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,CAAA;IAChC,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;IACnC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,SAAS,CAAA;IAE/B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAA;IACpC,MAAM,cAAc,GAAG,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,CAAA;IACpE,MAAM,eAAe,GAAG,SAAS,CAAC,YAAY,GAAG,SAAS,CAAC,YAAY,CAAA;IACvE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAA;IAEpC,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,CAAA;AAC3D,CAAC"}

package/middleware/utils/useControllableValue.d.ts

@@ -0,0 +1,16 @@
+import type { SetStateAction } from 'react';
+export type Props = Record<string, any>;
+interface UseControllableValueOptions<T> {
+    valuePropName?: string;
+    defaultValue?: T;
+    trigger?: string;
+}
+interface Safe<T> {
+    valuePropName?: string;
+    defaultValue: T;
+    trigger?: string;
+}
+type Trigger<T> = (action: SetStateAction<T>, ...args: unknown[]) => unknown;
+declare function useControllableValue<T = any>(props: Props, options: Safe<T>): [T, Trigger<T>];
+declare function useControllableValue<T = any>(props: Props, options: UseControllableValueOptions<T>): [T | undefined, Trigger<T | undefined>];
+export { useControllableValue };

package/middleware/utils/useControllableValue.js

@@ -0,0 +1,28 @@
+import { useCallback, useRef, useState } from 'react';
+function useControllableValue(props, options) {
+    const { valuePropName = 'value', defaultValue, trigger = 'onChange' } = options ?? {};
+    const isControlled = valuePropName in props;
+    const value = props[valuePropName];
+    const initialValue = value ?? defaultValue;
+    const [state, setState] = useState(initialValue);
+    const stateRef = useRef(initialValue);
+    if (isControlled) {
+        // eslint-disable-next-line react-compiler/react-compiler
+        stateRef.current = value;
+    }
+    const onChange = props[trigger];
+    const updateState = useCallback((action, ...args) => {
+        if (typeof action === 'function') {
+            onChange?.(action(stateRef.current), ...args);
+        }
+        else {
+            onChange?.(action, ...args);
+        }
+    }, [onChange]);
+    if (isControlled) {
+        return [value, updateState];
+    }
+    return [state, setState];
+}
+export { useControllableValue };
+//# sourceMappingURL=useControllableValue.js.map

package/middleware/utils/useControllableValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControllableValue.js","sourceRoot":"","sources":["../../../../packages/virtual-table/src/middleware/utils/useControllableValue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAoBrD,SAAS,oBAAoB,CAAU,KAAY,EAAE,OAAwC;IAC3F,MAAM,EAAE,aAAa,GAAG,OAAO,EAAE,YAAY,EAAE,OAAO,GAAG,UAAU,EAAE,GAAG,OAAO,IAAI,EAAE,CAAA;IAErF,MAAM,YAAY,GAAG,aAAa,IAAI,KAAK,CAAA;IAE3C,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAM,CAAA;IACvC,MAAM,YAAY,GAAG,KAAK,IAAI,YAAY,CAAA;IAE1C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;IAChD,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;IACrC,IAAI,YAAY,EAAE,CAAC;QACjB,yDAAyD;QACzD,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAA;IAC1B,CAAC;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAuC,CAAA;IACrE,MAAM,WAAW,GAA2B,WAAW,CAAC,CAAC,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE;QAC1E,IAAI,OAAO,MAAM,KAAK,UAAU,EAAE,CAAC;YACjC,QAAQ,EAAE,CAAE,MAAgC,CAAC,QAAQ,CAAC,OAAY,CAAC,EAAE,GAAG,IAAI,CAAC,CAAA;QAC/E,CAAC;aAAM,CAAC;YACN,QAAQ,EAAE,CAAC,MAAW,EAAE,GAAG,IAAI,CAAC,CAAA;QAClC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,CAAC,KAAK,EAAE,WAAW,CAAU,CAAA;IACtC,CAAC;IAED,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAU,CAAA;AACnC,CAAC;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAA"}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@are-visual/virtual-table",
+  "version": "0.0.1",
+  "main": "./index.esm.js",
+  "types": "./index.d.ts",
+  "sideEffects": false,
+  "author": "Y-Hui",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "virtual",
+    "table",
+    "list",
+    "virtual-table",
+    "virtual-list"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Y-Hui/virtualize.git"
+  },
+  "homepage": "https://y-hui.github.io/virtualize",
+  "peerDependencies": {
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
+  "peerDependenciesMeta": {
+    "react-resizable": {
+      "optional": true
+    }
+  }
+}

package/styles/table.css

@@ -0,0 +1,142 @@
+:root {
+  --virtual-table-header-bg: #fafafa;
+  --virtual-table-border-color: #f0f0f0;
+  --virtual-table-row-hover-bg: #fafafa;
+  --virtual-table-font-size: 14px;
+  --virtual-table-split-shadow: rgba(5, 5, 5, 0.06);
+  --virtual-table-header-split: #c2c2c2;
+  --virtual-table-fixed-cell-background: #fff;
+  --virtual-table-cell-padding: 8px;
+}
+
+[class^=virtual-table] {
+  box-sizing: border-box;
+}
+
+.virtual-table {
+  width: 100%;
+  text-align: left;
+  font-size: var(--virtual-table-font-size);
+  line-height: 1.57142;
+}
+.virtual-table table {
+  border-collapse: separate;
+}
+.virtual-table-header {
+  overflow: auto hidden;
+  scrollbar-width: none;
+}
+.virtual-table-header::-webkit-scrollbar {
+  display: none;
+}
+.virtual-table-header > table {
+  border-spacing: 0;
+  table-layout: fixed;
+  width: 100%;
+}
+.virtual-table-header-sticky {
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  background-color: var(--virtual-table-fixed-cell-background);
+}
+.virtual-table-header-cell {
+  position: relative;
+  padding: var(--virtual-table-cell-padding);
+  text-align: start;
+  background-color: var(--virtual-table-header-bg);
+  border-bottom: 1px solid var(--virtual-table-border-color);
+  font-weight: 600;
+  font-size: 14px;
+}
+.virtual-table-header-cell:not(:last-child, :first-child.virtual-table-selection-column, :first-child.virtual-table-expand-column, :first-child.virtual-table-expand-column + .virtual-table-selection-column, .no-split)::before {
+  position: absolute;
+  top: 50%;
+  inset-inline-end: 0;
+  width: 1px;
+  height: 1.2em;
+  background-color: var(--virtual-table-header-split);
+  transform: translateY(-50%);
+  transition: background-color 0.2s;
+  content: "";
+}
+.virtual-table-body-wrapper {
+  overflow: auto hidden;
+  scrollbar-width: none;
+}
+.virtual-table-body-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.virtual-table-body {
+  table-layout: fixed;
+  width: 100%;
+  border-spacing: 0;
+}
+.virtual-table-row:not(.no-hover):hover > .virtual-table-cell {
+  background-color: var(--virtual-table-row-hover-bg);
+}
+.virtual-table-cell {
+  position: relative;
+  padding: var(--virtual-table-cell-padding);
+  transition: background 0.2s, border-color 0.2s;
+  border-bottom: 1px solid var(--virtual-table-border-color);
+  overflow-wrap: break-word;
+}
+.virtual-table-sticky-cell {
+  position: sticky !important;
+  z-index: 1;
+}
+.virtual-table-sticky-cell:not(.virtual-table-header-cell) {
+  background-color: var(--virtual-table-fixed-cell-background);
+}
+.virtual-table-cell-fix-left-last::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: -1px;
+  width: 30px;
+  transform: translateX(100%);
+  transition: box-shadow 0.3s;
+  pointer-events: none;
+}
+.virtual-table-cell-fix-right-first::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: -1px;
+  left: 0;
+  width: 30px;
+  transform: translateX(-100%);
+  transition: box-shadow 0.3s;
+  pointer-events: none;
+}
+.virtual-table-has-fix-left .virtual-table-sticky-cell:not(.virtual-table-header-cell) {
+  background-color: var(--virtual-table-fixed-cell-background);
+}
+.virtual-table-has-fix-left .virtual-table-cell-fix-left-last::after {
+  box-shadow: inset 10px 0 8px -8px var(--virtual-table-split-shadow);
+}
+.virtual-table-has-fix-left .virtual-table-cell-fix-left-last::before {
+  background-color: transparent !important;
+}
+.virtual-table-has-fix-right .virtual-table-cell-fix-right-first::after {
+  box-shadow: inset -10px 0 8px -8px var(--virtual-table-split-shadow);
+}
+.virtual-table-has-fix-right .virtual-table-cell-fix-right-first::after {
+  background-color: transparent;
+}
+.virtual-table-align-right {
+  text-align: end;
+}
+.virtual-table-align-center {
+  text-align: center;
+}
+.virtual-table-bordered .virtual-table-cell,
+.virtual-table-bordered .virtual-table-header-cell {
+  border-inline-end: 1px solid var(--virtual-table-border-color);
+}
+.virtual-table-bordered .virtual-table-header-cell::before {
+  background-color: transparent !important;
+}