@govtechsg/sgds-web-component 3.26.0 → 3.26.1-rc.1

package/types/react.d.ts

@@ -193,20 +193,6 @@ Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `
   onSgdsAfterHide?: SgdsEventHandler;
 }
 
-// ── BreadcrumbItem ─────────────────────────────────────────────────────────────
-
-export interface SgdsBreadcrumbItemProps extends SgdsBaseProps {
-  /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item */
-  active?: boolean;
-}
-
-// ── Breadcrumb ─────────────────────────────────────────────────────────────
-
-export interface SgdsBreadcrumbProps extends SgdsBaseProps {
-  /** The aria-label of nav element within breadcrumb component. */
-  ariaLabel?: string;
-}
-
 // ── Button ─────────────────────────────────────────────────────────────
 
 export interface SgdsButtonProps extends SgdsBaseProps {
@@ -263,6 +249,20 @@ value of this attribute must be an id of a form in the same document or shadow r
   onSgdsFocus?: SgdsEventHandler;
 }
 
+// ── BreadcrumbItem ─────────────────────────────────────────────────────────────
+
+export interface SgdsBreadcrumbItemProps extends SgdsBaseProps {
+  /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item */
+  active?: boolean;
+}
+
+// ── Breadcrumb ─────────────────────────────────────────────────────────────
+
+export interface SgdsBreadcrumbProps extends SgdsBaseProps {
+  /** The aria-label of nav element within breadcrumb component. */
+  ariaLabel?: string;
+}
+
 // ── Card ─────────────────────────────────────────────────────────────
 
 export interface SgdsCardProps extends SgdsBaseProps {
@@ -483,6 +483,91 @@ value: string;
   onSgdsAfterHide?: SgdsEventHandler;
 }
 
+// ── DataTableCell ─────────────────────────────────────────────────────────────
+
+export interface SgdsDataTableCellProps extends SgdsBaseProps {
+  /** Number of columns this cell spans. */
+  colspan?: number | undefined;
+  /** Number of rows this cell spans. */
+  rowspan?: number | undefined;
+}
+
+// ── DataTableHead ─────────────────────────────────────────────────────────────
+
+export interface SgdsDataTableHeadProps extends SgdsBaseProps {
+  /** Sets the column width. */
+  width?: string | undefined;
+  /** Number of columns this cell spans. */
+  colspan?: number | undefined;
+  /** Number of rows this cell spans. */
+  rowspan?: number | undefined;
+  /** Text alignment for the header content. */
+  textAlign?: "left" | "right";
+  /** Current sort direction for this column. */
+  ariasort?: "ascending" | "descending" | "none" | "other" | undefined;
+  /** When true, clicking this header cycles through ascending → descending → none sort. */
+  sorting?: boolean;
+  /** Column key emitted in the row's internal sort payload, used to identify which column to sort. */
+  sortKey?: string;
+}
+
+// ── DataTableRow ─────────────────────────────────────────────────────────────
+
+export interface SgdsDataTableRowProps extends SgdsBaseProps {
+  /** Arbitrary data associated with this row. Returned in event detail on row selection. */
+  rowData?: Record<string, unknown>;
+  /** When true, the row has an expandable content area toggled by a chevron. */
+  expand?: boolean;
+  /** When true, the expandable content area is open. */
+  open?: boolean;
+  /** When true, the row is checked. */
+  checked?: boolean;
+  /** The checkbox rendered inside this row, if `showCheckbox` is true. */
+  checkbox?: SgdsCheckbox | null;
+  "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
+}
+
+// ── DataTable ─────────────────────────────────────────────────────────────
+
+export interface SgdsDataTableProps extends SgdsBaseProps {
+  /** If true, renders a checkbox column for row selection. */
+  multiSelect?: boolean;
+  /** Total number of data items (for server-side pagination). */
+  dataLength?: number;
+  /** Current page (1-based). */
+  currentPage?: number;
+  /** Number of rows per page. */
+  itemsPerPage?: number;
+  /** Custom text shown on the footer's left side. */
+  footerText?: string;
+  /** If true, hides the footer (summary text and pagination controls). */
+  hideFooter?: boolean;
+  /** When true, shows a loading state and hides body rows. */
+  isLoading?: boolean;
+  /** When true, emits sort events for external handling instead of local sorting. */
+  serverSort?: boolean;
+  /** Controls the CSS `table-layout` algorithm.
+Use "auto" to let the browser size columns based on content, or "fixed" to distribute column widths evenly regardless of content. */
+  layout?: "auto" | "fixed";
+  /** Pagination mode. `client` (default) slices rows and renders pagination controls.
+`server` renders all slotted rows as-is — the caller is responsible for passing
+the correct page of data and handling `sgds-page-change` externally. */
+  mode?: "client" | "server";
+  "onsgds-row-select"?: SgdsEventHandler;
+  onSgdsRowSelect?: SgdsEventHandler;
+  "onsgds-sort"?: SgdsEventHandler;
+  onSgdsSort?: SgdsEventHandler;
+  "onsgds-page-change"?: SgdsEventHandler;
+  onSgdsPageChange?: SgdsEventHandler;
+}
+
 // ── Datepicker ─────────────────────────────────────────────────────────────
 
 export interface SgdsDatepickerProps extends SgdsBaseProps {
@@ -1740,15 +1825,19 @@ declare module "react" {
       "sgds-alert-link": React.DetailedHTMLProps<SgdsAlertLinkProps, HTMLElement>;
       "sgds-alert": React.DetailedHTMLProps<SgdsAlertProps, HTMLElement>;
       "sgds-badge": React.DetailedHTMLProps<SgdsBadgeProps, HTMLElement>;
+      "sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
       "sgds-breadcrumb-item": React.DetailedHTMLProps<SgdsBreadcrumbItemProps, HTMLElement>;
       "sgds-breadcrumb": React.DetailedHTMLProps<SgdsBreadcrumbProps, HTMLElement>;
-      "sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
       "sgds-card": React.DetailedHTMLProps<SgdsCardProps, HTMLElement>;
       "sgds-checkbox-group": React.DetailedHTMLProps<SgdsCheckboxGroupProps, HTMLElement>;
       "sgds-checkbox": React.DetailedHTMLProps<SgdsCheckboxProps, HTMLElement>;
       "sgds-close-button": React.DetailedHTMLProps<SgdsCloseButtonProps, HTMLElement>;
       "sgds-combo-box-option": React.DetailedHTMLProps<SgdsComboBoxOptionProps, HTMLElement>;
       "sgds-combo-box": React.DetailedHTMLProps<SgdsComboBoxProps, HTMLElement>;
+      "sgds-data-table-cell": React.DetailedHTMLProps<SgdsDataTableCellProps, HTMLElement>;
+      "sgds-data-table-head": React.DetailedHTMLProps<SgdsDataTableHeadProps, HTMLElement>;
+      "sgds-data-table-row": React.DetailedHTMLProps<SgdsDataTableRowProps, HTMLElement>;
+      "sgds-data-table": React.DetailedHTMLProps<SgdsDataTableProps, HTMLElement>;
       "sgds-datepicker": React.DetailedHTMLProps<SgdsDatepickerProps, HTMLElement>;
       "sgds-description-list-group": React.DetailedHTMLProps<SgdsDescriptionListGroupProps, HTMLElement>;
       "sgds-description-list": React.DetailedHTMLProps<SgdsDescriptionListProps, HTMLElement>;
@@ -1823,15 +1912,19 @@ declare global {
     "sgds-alert-link": HTMLElement;
     "sgds-alert": HTMLElement;
     "sgds-badge": HTMLElement;
+    "sgds-button": HTMLElement;
     "sgds-breadcrumb-item": HTMLElement;
     "sgds-breadcrumb": HTMLElement;
-    "sgds-button": HTMLElement;
     "sgds-card": HTMLElement;
     "sgds-checkbox-group": HTMLElement;
     "sgds-checkbox": HTMLElement;
     "sgds-close-button": HTMLElement;
     "sgds-combo-box-option": HTMLElement;
     "sgds-combo-box": HTMLElement;
+    "sgds-data-table-cell": HTMLElement;
+    "sgds-data-table-head": HTMLElement;
+    "sgds-data-table-row": HTMLElement;
+    "sgds-data-table": HTMLElement;
     "sgds-datepicker": HTMLElement;
     "sgds-description-list-group": HTMLElement;
     "sgds-description-list": HTMLElement;