@yamada-ui/react/dist/types/components/native-table/native-table.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { ComponentSlotStyle, SimpleDirection, ThemeProps, WithoutThemeProps } from "../../core/system/index.types.js";
import { CSSProps } from "../../core/css/index.types.js";
import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
import "../../core/index.js";
import { NativeTableStyle } from "./native-table.style.js";
import "../../index.js";
import * as react_jsx_runtime5 from "react/jsx-runtime";
import * as react805 from "react";

//#region src/components/native-table/native-table.d.ts
interface NativeTableRootProps extends HTMLStyledProps<"table">, ThemeProps<NativeTableStyle> {
  /**
   * The CSS `table-layout` property.
   */
  layout?: CSSProps["tableLayout"];
  /**
   * Whether to enable the scroll area.
   *
   * @default false
   */
  withScrollArea?: boolean;
  /**
   * The props for the scroll area.
   */
  scrollAreaProps?: NativeTableAreaProps;
}
declare const NativeTablePropsContext: react805.Context<Partial<NativeTableRootProps> | undefined>, useNativeTablePropsContext: () => Partial<NativeTableRootProps> | undefined;
/**
 * `NativeTable` is a component for efficiently organizing and displaying data.
 *
 * @see https://yamada-ui.com/docs/components/native-table
 */
declare const NativeTableRoot: Component<({
  withScrollArea,
  scrollAreaProps,
  ...rest
}: WithoutThemeProps<NativeTableRootProps, ComponentSlotStyle<"caption" | "col" | "colgroup" | "tbody" | "td" | "tfoot" | "th" | "thead" | "tr" | "root" | "scrollArea", {
  highlightOnHover: {
    true: {
      tbody: {
        "& tr": {
          transitionDuration: "moderate";
          transitionProperty: "common";
          _hover: {
            bg: "colorScheme.bg";
          };
        };
      };
    };
  };
  highlightOnSelected: {
    true: {
      tbody: {
        "& tr": {
          transitionDuration: "moderate";
          transitionProperty: "common";
          _selected: {
            bg: "colorScheme.bg";
          };
        };
      };
    };
  };
  stickyFooter: {
    true: {
      tfoot: {
        "& tr": {
          bottom: "0";
          position: "sticky";
          zIndex: "yamcha";
        };
      };
    };
  };
  stickyHeader: {
    true: {
      thead: {
        "& tr": {
          position: "sticky";
          top: "0";
          zIndex: "yamcha";
        };
      };
    };
  };
  striped: {
    true: {};
  };
  withBorder: {
    true: {
      root: {
        borderWidth: "1px";
      };
    };
  };
  withColumnBorders: {
    true: {
      tr: {
        "& th, td": {
          borderRightWidth: "1px";
        };
      };
    };
  };
}, {
  sm: {
    root: {
      fontSize: "xs";
    };
    td: {
      "--space-x": "spaces.2";
      "--space-y": "spaces.1";
    };
    th: {
      "--space-x": "spaces.2";
      "--space-y": "spaces.1";
    };
  };
  md: {
    root: {
      fontSize: "sm";
    };
    td: {
      "--space-x": "spaces.3";
      "--space-y": "spaces.2";
    };
    th: {
      "--space-x": "spaces.3";
      "--space-y": "spaces.2";
    };
  };
  lg: {
    root: {
      fontSize: "md";
    };
    td: {
      "--space-x": "spaces.4";
      "--space-y": "spaces.3";
    };
    th: {
      "--space-x": "spaces.4";
      "--space-y": "spaces.3";
    };
  };
}, {
  line: {
    tbody: {
      "& tr:not(:first-of-type)": {
        "& th, td": {
          borderTopWidth: "1px";
        };
      };
      "& tr:only-child": {
        "& th, td": {
          borderTopWidth: "1px";
        };
      };
    };
    tfoot: {
      "& tr": {
        "& th, td": {
          borderTopWidth: "1px";
        };
      };
    };
    thead: {
      "& tr": {
        "& th, td": {
          borderBottomWidth: "1px";
        };
      };
    };
  };
  outline: {
    root: {
      borderWidth: "1px";
    };
    scrollArea: {
      borderWidth: "1px";
    };
    tbody: {
      "& tr:not(:first-of-type)": {
        "& th, td": {
          borderTopWidth: "1px";
        };
      };
      "& tr:only-child": {
        "& th, td": {
          borderTopWidth: "1px";
        };
      };
    };
    tfoot: {
      "& tr": {
        "&:first-of-type": {
          "& th, td": {
            borderTopWidth: "1px";
          };
        };
        bg: "colorScheme.bg";
      };
    };
    thead: {
      "& tr": {
        "&:last-of-type": {
          "& th, td": {
            borderBottomWidth: "1px";
          };
        };
        bg: "colorScheme.bg";
      };
    };
  };
}>, keyof NativeTableRootProps>) => react_jsx_runtime5.JSX.Element, NativeTableRootProps>;
interface NativeTableAreaProps extends HTMLStyledProps, ThemeProps<NativeTableStyle> {}
interface CaptionProps extends HTMLStyledProps<"caption"> {
  /**
   * The placement of the table caption.
   *
   * @default 'end'
   */
  placement?: SimpleDirection;
}
declare const Caption: Component<"caption", CaptionProps>;
interface TheadProps extends HTMLStyledProps<"thead"> {}
declare const Thead: Component<"thead", TheadProps>;
interface TbodyProps extends HTMLStyledProps<"tbody"> {}
declare const Tbody: Component<"tbody", TbodyProps>;
interface TfootProps extends HTMLStyledProps<"tfoot"> {}
declare const Tfoot: Component<"tfoot", TfootProps>;
interface ColgroupProps extends HTMLStyledProps<"colgroup"> {}
declare const Colgroup: Component<"colgroup", ColgroupProps>;
interface ColProps extends HTMLStyledProps<"col"> {}
declare const Col: Component<"col", ColProps>;
interface TrProps extends HTMLStyledProps<"tr"> {}
declare const Tr: Component<"tr", TrProps>;
interface ThProps extends HTMLStyledProps<"th"> {
  /**
   * Aligns the cell content to the right.
   *
   * @default false
   */
  numeric?: boolean;
}
declare const Th: Component<"th", ThProps>;
interface TdProps extends HTMLStyledProps<"td"> {
  /**
   * Aligns the cell content to the right.
   *
   * @default false
   */
  numeric?: boolean;
}
declare const Td: Component<"td", TdProps>;
//#endregion
export { Caption, CaptionProps, Col, ColProps, Colgroup, ColgroupProps, NativeTablePropsContext, NativeTableRoot, NativeTableRootProps, Tbody, TbodyProps, Td, TdProps, Tfoot, TfootProps, Th, ThProps, Thead, TheadProps, Tr, TrProps, useNativeTablePropsContext };
//# sourceMappingURL=native-table.d.ts.map