fix: fix column size and padding in configs tables

src/api/types/configs.ts

@@ -128,7 +128,7 @@ export interface ConfigAnalysis extends Analysis, CreatedAt, Avatar {
 export type ConfigSummary = {
   type: string;
   analysis?: Record<string, any>;
-  changes?: string;
+  changes?: number;
   count: number;
   health: {
     healthy: number;

src/components/Configs/ConfigList/Cells/ConfigListCostCell.tsx

@@ -1,3 +1,4 @@
+import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
 import { CellContext, Row } from "@tanstack/react-table";
 import { MRT_Row } from "mantine-react-table";
 import {
@@ -9,7 +10,7 @@ import ConfigCostValue from "../../ConfigCosts/ConfigCostValue";
 
 export default function ConfigListCostCell({
   row
-}: CellContext<ConfigItem, any> | CellContext<ConfigSummary, any>) {
+}: MRTCellProps<ConfigItem> | MRTCellProps<ConfigSummary>) {
   return <ConfigCostValue config={row.original} popover={false} />;
 }
 /**

src/components/Configs/ConfigList/MRTConfigListColumn.tsx

@@ -38,8 +38,8 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
         </div>
       );
     },
-    minSize: 200,
-    size: 270,
+    minSize: 300,
+    size: 400,
     enableGrouping: true,
     enableSorting: true,
     enableHiding: false,
@@ -78,7 +78,7 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
   {
     header: "Type",
     accessorKey: "type",
-    size: 170,
+    size: 250,
     enableSorting: true,
     enableHiding: true,
     enableColumnActions: false,
@@ -89,8 +89,6 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
   {
     header: "Status",
     accessorKey: "health",
-    minSize: 100,
-    maxSize: 180,
     enableSorting: true,
     enableColumnActions: false,
     Cell: ({ cell, row }) => {
@@ -133,7 +131,6 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
 
       return <ChangeCountIcon count={value} />;
     },
-    size: 70,
     meta: {
       cellClassName: "overflow-hidden"
     },
@@ -149,9 +146,7 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
         enableFilterByTag
         filterByTagParamKey="labels"
       />
-    ),
-    maxSize: 300,
-    minSize: 100
+    )
   },
   {
     header: "Analysis",
@@ -212,9 +207,7 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
           />
         </div>
       );
-    },
-    minSize: 50,
-    maxSize: 100
+    }
   },
   {
     header: "Cost",
@@ -231,38 +224,37 @@ export const mrtConfigListColumns: MRT_ColumnDef<ConfigItem>[] = [
     },
     Cell: ({ row }) => {
       return <ConfigCostValue config={row.original} popover={false} />;
-    },
-    maxSize: 60
+    }
   },
   {
     header: "Created",
     accessorKey: "created_at",
     enableColumnActions: false,
     Cell: MRTConfigListDateCell,
-    maxSize: 70
+    maxSize: 100
   },
   {
     header: "Updated",
     accessorKey: "updated_at",
     enableColumnActions: false,
     Cell: MRTConfigListDateCell,
-    maxSize: 70
+    maxSize: 100
   },
   {
     header: "Deleted At",
     accessorKey: "deleted_at",
     enableColumnActions: false,
     Cell: MRTConfigListDateCell,
-    size: 90,
-    enableHiding: true
+    enableHiding: true,
+    maxSize: 100
   },
   {
     header: "Changed",
     enableColumnActions: false,
     accessorFn: changeColumnAccessorFN,
     id: "changed",
+    maxSize: 100
     // sortingFn: changeColumnSortingFN,
-    size: 180
   }
 ];
 

src/components/Configs/ConfigSummary/Cells/ConfigSummaryHealthCells.tsx

@@ -1,22 +1,22 @@
 import { ConfigSummary } from "@flanksource-ui/api/types/configs";
 
-import { CellContext } from "@tanstack/react-table";
-import { useMemo } from "react";
-import { useSearchParams } from "react-router-dom";
-import { getConfigStatusColor } from "../ConfigSummaryList";
 import {
   Count,
   CountBar,
   OrderByColor
 } from "@flanksource-ui/ui/Icons/ChangeCount";
+import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
+import { useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+import { getConfigStatusColor } from "../ConfigSummaryList";
 
 export function ConfigSummaryHealthCell({
-  getValue,
+  cell,
   row
-}: CellContext<ConfigSummary, any>) {
+}: MRTCellProps<ConfigSummary>) {
   const [searchParams] = useSearchParams();
 
-  const value = getValue<ConfigSummary["health"]>();
+  const value = cell.getValue<ConfigSummary["health"]>();
   const type = row.original.type;
   const groupBy = searchParams.get("groupBy");
 
@@ -59,8 +59,8 @@ export function ConfigSummaryHealthCell({
 
 export function ConfigSummaryHealthAggregateCell({
   row
-}: CellContext<ConfigSummary, any>) {
-  const value = row.subRows.reduce(
+}: Pick<MRTCellProps<ConfigSummary>, "row">) {
+  const value = row.subRows?.reduce(
     (acc, row) => {
       const health = row.original.health;
       if (health) {

src/components/Configs/ConfigSummary/Cells/ConfigSummaryTableVirtualAggregateColumn.tsx

@@ -1,23 +1,24 @@
 import { ConfigSummary } from "@flanksource-ui/api/types/configs";
 import { Badge } from "@flanksource-ui/ui/Badge/Badge";
-import { CellContext } from "@tanstack/react-table";
-import { IoChevronDown, IoChevronForward } from "react-icons/io5";
+import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
 import ConfigsTypeIcon from "../../ConfigsTypeIcon";
 
 export function ConfigSummaryTableVirtualAggregateColumn({
   row
-}: CellContext<ConfigSummary, any>) {
+}: Pick<MRTCellProps<ConfigSummary>, "row">) {
   if (row.getCanExpand()) {
     const groupingValue = row.getGroupingValue(row.groupingColumnId!) as string;
-    const count = row.subRows.reduce((acc, row) => acc + row.original.count, 0);
+    const count = row.subRows?.reduce(
+      (acc, row) => acc + row.original.count,
+      0
+    );
     return (
       <div
         className="flex flex-row items-center gap-1"
         style={{
           marginLeft: row.depth * 20
         }}
       >
-        {row.getIsExpanded() ? <IoChevronDown /> : <IoChevronForward />}
         {row.groupingColumnId === "type" ||
         row.groupingColumnId === "config_class" ? (
           <ConfigsTypeIcon

src/components/Configs/ConfigSummary/Cells/ConfigSummaryVirtualColumnCell.tsx

@@ -1,19 +1,19 @@
 import { ConfigSummary } from "@flanksource-ui/api/types/configs";
 import { Badge } from "@flanksource-ui/ui/Badge/Badge";
-import { CellContext } from "@tanstack/react-table";
+import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
 import { BiLabel } from "react-icons/bi";
 
 export function ConfigSummaryVirtualColumnCell({
-  getValue,
   row,
   groupByTags,
-  columnId
-}: CellContext<ConfigSummary, any> & {
+  columnId,
+  cell
+}: MRTCellProps<ConfigSummary> & {
   groupByTags: string[];
   columnId: string;
 }) {
   const isTag = groupByTags.includes(columnId);
-  const value = getValue();
+  const value = cell.getValue<any>();
 
   return (
     <div