From ca31954f9a44d40173d1907a95788a0c9df5e6de Mon Sep 17 00:00:00 2001
From: cknabe <cknabe@us.ibm.com>
Date: Mon, 27 Feb 2023 15:20:16 -0600
Subject: [PATCH 1/2] feat(DataTableSkeleton): 12513 - Add TS types for props

---
 .../DataTableSkeleton.stories.js              | 24 ++++++++-
 ...TableSkeleton.js => DataTableSkeleton.tsx} | 51 +++++++++++++++++--
 2 files changed, 70 insertions(+), 5 deletions(-)
 rename packages/react/src/components/DataTableSkeleton/{DataTableSkeleton.js => DataTableSkeleton.tsx} (77%)

diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js
index 93020e8ba6bc..239ded4f1fb9 100644
--- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js
+++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js
@@ -20,7 +20,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'Components/DataTable',
+  title: 'Components/DataTable/Skeleton',
   decorators: [withKnobs],
   component: DataTableSkeleton,
 };
@@ -34,3 +34,25 @@ export const Skeleton = () => {
     </div>
   );
 };
+
+export const Playground = (args) => {
+  return (
+    <div style={{ width: '800px' }}>
+      <DataTableSkeleton {...args} headers={headers} />
+      <br />
+    </div>
+  );
+};
+
+Playground.argTypes = {
+  headers: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+};
diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.tsx
similarity index 77%
rename from packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js
rename to packages/react/src/components/DataTableSkeleton/DataTableSkeleton.tsx
index d0e1668fb566..189061ad2c6e 100644
--- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js
+++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.tsx
@@ -10,6 +10,49 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 
+export interface DataTableSkeletonProps {
+  /**
+   * Specify an optional className to add.
+   */
+  className?: string;
+
+  /**
+   * Specify the number of columns that you want to render in the skeleton state
+   */
+  columnCount: number;
+
+  /**
+   * Optionally specify whether you want the Skeleton to be rendered as a
+   * compact DataTable
+   */
+  compact: boolean;
+
+  /**
+   * Optionally specify the displayed headers
+   */
+  headers?: [{ header: string, key: string }] | { header: string, key: string };
+
+  /**
+   * Specify the number of rows that you want to render in the skeleton state
+   */
+  rowCount: number;
+
+  /**
+   * Specify if the table header should be rendered as part of the skeleton.
+   */
+  showHeader: boolean;
+
+  /**
+   * Specify if the table toolbar should be rendered as part of the skeleton.
+   */
+  showToolbar: boolean;
+
+  /**
+   * Optionally specify whether you want the DataTable to be zebra striped
+   */
+  zebra: boolean;
+}
+
 const DataTableSkeleton = ({
   headers,
   rowCount,
@@ -48,8 +91,8 @@ const DataTableSkeleton = ({
     <div className={`${prefix}--skeleton ${prefix}--data-table-container`}>
       {showHeader ? (
         <div className={`${prefix}--data-table-header`}>
-          <div className={`${prefix}--data-table-header__title`}></div>
-          <div className={`${prefix}--data-table-header__description`}></div>
+          <div className={`${prefix}--data-table-header__title`}/>
+          <div className={`${prefix}--data-table-header__description`}/>
         </div>
       ) : null}
       {showToolbar ? (
@@ -58,7 +101,7 @@ const DataTableSkeleton = ({
           className={`${prefix}--table-toolbar`}>
           <div className={`${prefix}--toolbar-content`}>
             <span
-              className={`${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm`}></span>
+              className={`${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm`}/>
           </div>
         </section>
       ) : null}
@@ -72,7 +115,7 @@ const DataTableSkeleton = ({
                     {headers[i]?.header}
                   </div>
                 ) : (
-                  <span></span>
+                  <span/>
                 )}
               </th>
             ))}

From b0f30155d7b1d46c4821bd926af9b695c96dd70f Mon Sep 17 00:00:00 2001
From: Francine Lucca <francinelucca@hotmail.com>
Date: Wed, 8 Mar 2023 10:24:06 -0500
Subject: [PATCH 2/2] fix: yarn run format

---
 .../DataTableSkeleton/DataTableSkeleton.tsx           | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.tsx b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.tsx
index 189061ad2c6e..f7c8e71aca36 100644
--- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.tsx
+++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.tsx
@@ -30,7 +30,7 @@ export interface DataTableSkeletonProps {
   /**
    * Optionally specify the displayed headers
    */
-  headers?: [{ header: string, key: string }] | { header: string, key: string };
+  headers?: [{ header: string; key: string }] | { header: string; key: string };
 
   /**
    * Specify the number of rows that you want to render in the skeleton state
@@ -91,8 +91,8 @@ const DataTableSkeleton = ({
     <div className={`${prefix}--skeleton ${prefix}--data-table-container`}>
       {showHeader ? (
         <div className={`${prefix}--data-table-header`}>
-          <div className={`${prefix}--data-table-header__title`}/>
-          <div className={`${prefix}--data-table-header__description`}/>
+          <div className={`${prefix}--data-table-header__title`} />
+          <div className={`${prefix}--data-table-header__description`} />
         </div>
       ) : null}
       {showToolbar ? (
@@ -101,7 +101,8 @@ const DataTableSkeleton = ({
           className={`${prefix}--table-toolbar`}>
           <div className={`${prefix}--toolbar-content`}>
             <span
-              className={`${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm`}/>
+              className={`${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm`}
+            />
           </div>
         </section>
       ) : null}
@@ -115,7 +116,7 @@ const DataTableSkeleton = ({
                     {headers[i]?.header}
                   </div>
                 ) : (
-                  <span/>
+                  <span />
                 )}
               </th>
             ))}