fix: PR fixes

Author: alexcambose

packages/component-library/src/TableGrid/index.stories.tsx

@@ -13,7 +13,7 @@ const meta = {
     layout: "padded",
   },
   argTypes: {
-    colDefs: {
+    columnDefs: {
       table: {
         disable: true,
       },
@@ -33,7 +33,7 @@ const meta = {
         category: "Outer Card",
       },
     },
-    isLoading: {
+    loading: {
       control: "boolean",
       table: {
         category: "State",
@@ -75,7 +75,7 @@ const FeedCellRendererLoading = () => (
 );
 
 const args = {
-  colDefs: [
+  columnDefs: [
     {
       headerName: "ID",
       field: "id",

packages/component-library/src/TableGrid/index.tsx

@@ -22,6 +22,7 @@ ModuleRegistry.registerModules([
   ClientSideRowModelModule,
 ]);
 
+
 const SkeletonCellRenderer = (props: { value?: ReactNode }) => {
   if (!props.value) {
     return (
@@ -35,10 +36,14 @@ const SkeletonCellRenderer = (props: { value?: ReactNode }) => {
   return <div className={styles.defaultCellContainer}>{props.value}</div>;
 };
 
+const DEFAULT_COL_DEF = {
+  cellRenderer: SkeletonCellRenderer,
+  flex: 1,
+};
 export const TableGrid = <TData extends Record<string, unknown>>({
   rowData,
-  colDefs,
-  isLoading,
+  columnDefs,
+  loading,
   cardProps,
   pagination,
   ...props
@@ -48,25 +53,18 @@ export const TableGrid = <TData extends Record<string, unknown>>({
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
 
-  const defaultColDef = useMemo(() => {
-    return {
-      cellRenderer: SkeletonCellRenderer,
-      flex: 1,
-    };
-  }, []);
-
   const mappedColDefs = useMemo(() => {
-    return colDefs.map((colDef) => {
+    return columnDefs.map((colDef) => {
       return {
         ...colDef,
         // the types in ag-grid are `any` for the cellRenderers which is throwing an error here
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        cellRenderer: isLoading
+        cellRenderer: loading
           ? (colDef.loadingCellRenderer ?? SkeletonCellRenderer)
           : colDef.cellRenderer,
       };
     });
-  }, [colDefs, isLoading]);
+  }, [columnDefs, loading]);
 
   const onPaginationChanged = useCallback(() => {
     const api = gridRef.current?.api;
@@ -83,9 +81,10 @@ export const TableGrid = <TData extends Record<string, unknown>>({
   const tableGrid = (
     <AgGridReact<TData>
       className={styles.tableGrid}
+  
       // @ts-expect-error empty row data, which is throwing an error here btu required to display 1 row in the loading state
-      rowData={isLoading ? [[]] : rowData}
-      defaultColDef={defaultColDef}
+      rowData={loading ? [[]] : rowData}
+      defaultColDef={DEFAULT_COL_DEF}
       columnDefs={mappedColDefs}
       theme={themeQuartz}
       domLayout="autoHeight"

packages/component-library/src/TableGrid/table-grid-props.ts

@@ -9,10 +9,10 @@ type ExtendedColDef<TData> = ColDef<TData> & {
 
 export type TableGridProps<TData extends Record<string, unknown>> = {
   rowData: TData[];
-  colDefs: ExtendedColDef<TData>[];
-  isLoading?: boolean;
+  columnDefs: ExtendedColDef<TData>[];
+  loading?: boolean;
   cardProps?: Omit<CardProps<"div">, "children" | "footer"> & {
     nonInteractive?: true;
   };
   pagination?: boolean;
-} & Omit<AgGridReactProps<TData>, "rowData" | "defaultColDef" | "columnDefs">;
+} & Omit<AgGridReactProps<TData>, "rowData" | "defaultColDef" | "columnDefs" | "loading">;