@evenicanpm/portal-table-ui 2.0.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/portal-table-ui",
-	"version": "2.0.1",
+	"version": "2.1.0",
 	"description": "",
 	"license": "ISC",
 	"author": "",
@@ -47,5 +47,5 @@
 		"@tanstack/react-query": "^5.90.11",
 		"date-fns": "^4.1.0"
 	},
-	"gitHead": "bbaff05f6f592114ad7a25caeee531e4fa1b14cf"
+	"gitHead": "8227589295d3d63586f9b26fff8d643b070989b3"
 }

package/src/features/table/components/dashboard/table/bulk-action-button.tsx

@@ -25,11 +25,17 @@ export function BulkActionButton({
 	const { mutate, isPending } = useMutation(mutationOptions);
 
 	const handleClick = () => {
-		mutate(undefined, {
-			onSuccess: () => {
-				clearSelection();
+		mutate(
+			{
+				resourceName,
+				selectedIds,
 			},
-		});
+			{
+				onSuccess: () => {
+					clearSelection();
+				},
+			},
+		);
 	};
 
 	const Icon = action.icon;

package/src/features/table/components/dashboard/table/table-header.tsx

@@ -84,7 +84,7 @@ export default function TableHeader({
 						key={column.Label + String(i)}
 						sx={{
 							whiteSpace: "normal",
-							wordBreak: "break-word",
+							wordBreak: "normal",
 						}}
 					>
 						{column.Label}

package/src/features/table/components/dashboard/table/table-input.tsx

@@ -78,10 +78,14 @@ const SearchField = React.memo(
 				onChange={(e) => {
 					setSearchTerm(e.target.value);
 				}}
-				placeholder={`Seach by ${selectedColumn.Label}`}
+				placeholder={
+					selectedColumn?.Label
+						? `Search by ${selectedColumn.Label}`
+						: "Select a column to search"
+				}
 				endAdornment={
 					<ColumnSelect
-						selected={selectedColumn.Data}
+						selected={selectedColumn?.Data || ""}
 						searchCols={searchCols}
 						handleChange={(value) => {
 							const col = searchCols.find((c) => c.Data === value);

package/src/features/table/components/dashboard/table/table-row/action-button.tsx

@@ -22,7 +22,10 @@ export function ActionButton({
 
 	const handleClick = (e: React.MouseEvent) => {
 		e.stopPropagation();
-		mutate({ docId });
+		mutate({
+			docId,
+			resourceName: "",
+		});
 	};
 
 	if (action.icon) {

package/src/features/table/components/dashboard/table/table-row/table-row.tsx

@@ -14,15 +14,8 @@ type ColumnLogic =
 	| {
 			id: string;
 			mask: string | undefined;
-			maskFn: unknown;
-			cellFn:
-				| ((
-						value: string | number | string[],
-				  ) => React.ReactElement<
-						unknown,
-						string | React.JSXElementConstructor<unknown>
-				  >)
-				| ((value: string | number) => string | number);
+			maskFn: (value: unknown, mask?: string) => string | number | string[];
+			cellFn: (value: string | number | string[]) => React.ReactNode;
 	  }[]
 	| undefined;
 

package/src/features/table/components/dashboard/table/table.tsx

@@ -152,15 +152,18 @@ export default function DocumentTable({
 
 	// Depends on searchableCols, must be declared after transformer
 	const [searchColumn, setSearchColumn] = useState<Column>(
-		() => searchableCols?.[0],
+		() => searchableCols?.[0] as Column,
 	);
 
+	// always derive a safe usable column
+	const effectiveSearchColumn = searchColumn ?? searchableCols?.[0];
+
 	const { data: fetchedRows, isPending: rowsPending } = useQuery(
 		resource.rowsQueryFn({
 			page,
 			pageSize: pageSize + 1, // Fetch one extra to check if there's a next page
 			filters,
-			searchColumn: searchColumn?.Data,
+			searchColumn: effectiveSearchColumn?.Data || "",
 			searchTerm,
 		}),
 	);
@@ -281,7 +284,7 @@ export default function DocumentTable({
 					setSearchTerm={setSearchTerm}
 					setColumn={setSearchColumn}
 					searchCols={searchableCols || []}
-					selectedColumn={searchColumn}
+					selectedColumn={effectiveSearchColumn}
 				/>
 				{filterLogic?.map((filter) => (
 					<filter.FilterComponent

package/src/features/table/components/dashboard/table-dashboard.tsx

@@ -62,6 +62,21 @@ export const TableDashboard = ({ resources, viewConfigQuery }: TableProps) => {
 								pageSize={pageSize}
 								setPageSize={setPageSize}
 							/>
+							{/* CHILD TABLE */}
+							{resource.children?.length ? (
+								<Box mt={6}>
+									{resource.children.map((child, idx) => (
+										<Box key={child.name + String(idx)} mt={4}>
+											<Table
+												viewConfigQuery={viewConfigQuery}
+												resource={child}
+												pageSize={pageSize}
+												setPageSize={setPageSize}
+											/>
+										</Box>
+									))}
+								</Box>
+							) : null}
 						</TabPanel>
 					</Box>
 				))}

package/src/features/table/types/schemas.ts

@@ -94,4 +94,7 @@ export interface Resource {
 	// Actions and Bulk Actions
 	actions?: Record<string, UIAction>;
 	bulkActions?: Record<string, UIBulkAction>;
+
+	// Children resources for nested tables
+	children?: Resource[];
 }