fix(DataTableSkeleton): adjust TypeScript types to match behavior (#14114)

lewandom · andreancardona · kodiakhq[bot] · web-flow · commit 84cdca4e95e9 · 2023-07-06T17:23:49.000Z
Co-authored-by: Andrea N. Cardona &lt;cardona.n.andrea@gmail.com&gt;
Co-authored-by: kodiakhq[bot] &lt;49736102+kodiakhq[bot]@users.noreply.github.com&gt;
diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.tsx b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.tsx
@@ -6,51 +6,59 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { TableHTMLAttributes } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 
-export interface DataTableSkeletonProps {
+export interface DataTableSkeletonHeader {
   /**
-   * Specify an optional className to add.
+   * Optionally specify header label
    */
-  className?: string;
+  header?: string;
+
+  /**
+   * Optionally specify header key
+   */
+  key?: string;
+}
 
+export interface DataTableSkeletonProps
+  extends TableHTMLAttributes<HTMLTableElement> {
   /**
    * Specify the number of columns that you want to render in the skeleton state
    */
-  columnCount: number;
+  columnCount?: number;
 
   /**
    * Optionally specify whether you want the Skeleton to be rendered as a
    * compact DataTable
    */
-  compact: boolean;
+  compact?: boolean;
 
   /**
    * Optionally specify the displayed headers
    */
-  headers?: [{ header: string; key: string }] | { header: string; key: string };
+  headers?: DataTableSkeletonHeader[];
 
   /**
    * Specify the number of rows that you want to render in the skeleton state
    */
-  rowCount: number;
+  rowCount?: number;
 
   /**
    * Specify if the table header should be rendered as part of the skeleton.
    */
-  showHeader: boolean;
+  showHeader?: boolean;
 
   /**
    * Specify if the table toolbar should be rendered as part of the skeleton.
    */
-  showToolbar: boolean;
+  showToolbar?: boolean;
 
   /**
    * Optionally specify whether you want the DataTable to be zebra striped
    */
-  zebra: boolean;
+  zebra?: boolean;
 }
 
 const DataTableSkeleton = ({
