feat(table): add getCopyDeepLinkAction utility and TableAction type

CONTRIBUTING.md

@@ -151,6 +151,42 @@ make lint
 
 - Custom directory contains all the custom components using the theme colors.
 
+#### `ResponsiveDataTable`
+
+`src/custom/ResponsiveDataTable.tsx` wraps `@mui/x-data-grid` (via `@layer5/mui-datatables`) with responsive column visibility and a standardised row action menu. Key exports:
+
+| Export | Description |
+|---|---|
+| `ResponsiveDataTable` | The main table component |
+| `TableAction` | Type for items in the per-row action menu |
+| `getCopyDeepLinkAction` | Helper that builds a "Copy link" `TableAction` |
+
+**`getCopyDeepLinkAction`**
+
+Use this to add a deep-link copy button to any row action menu. The `title` argument is optional and defaults to `'Copy link'` — pass a translated string for i18n:
+
+```tsx
+import { getCopyDeepLinkAction, TableAction } from '@sistent/sistent';
+
+const rowActions: TableAction[] = [
+  getCopyDeepLinkAction(() => copyRowDeepLink(row.id)),
+  // or, with a custom title:
+  getCopyDeepLinkAction(() => copyRowDeepLink(row.id), t('Copy link')),
+];
+```
+
+The helper signature is:
+
+```ts
+getCopyDeepLinkAction(onCopy: () => void, title?: string): TableAction
+```
+
+**Adding a new column to `ResponsiveDataTable`**
+
+1. Define the column in the `columns` array passed to `ResponsiveDataTable`.
+2. Add a breakpoint entry for the column in the `updateVisibleColumns` / `getResponsiveColumnVisibility` utility so it hides gracefully on narrow viewports.
+3. Use `useColumnVisibilityPreference` (from Meshery UI's `utils/hooks`) to merge responsive defaults with user preferences persisted in `localStorage`.
+
 ### icons
 
 - Icons directory contains all the icons that are used in the project or can be used in any of other projects.

src/custom/ResponsiveDataTable.tsx

@@ -6,6 +6,7 @@ import { EllipsisIcon } from '../icons/Ellipsis';
 import { FormattedTime } from '../utils';
 import { styled, useTheme } from './../theme';
 import { ColView } from './Helpers/ResponsiveColumns/responsive-coulmns.tsx';
+import { TableAction } from './TableActions';
 import { TooltipIcon } from './TooltipIconButton';
 
 export const IconWrapper = styled('div', {
@@ -133,14 +134,7 @@ export interface Column {
     display?: boolean;
     sortDescFirst?: boolean;
     customBodyRender?: (value: string | number | boolean | object) => JSX.Element;
-    actionsList?: {
-      title: string;
-      icon: JSX.Element;
-      onClick: () => void;
-      disabled?: boolean;
-      customComponent?: JSX.Element;
-      type?: string;
-    }[];
+    actionsList?: TableAction[];
   };
 }
 

src/custom/TableActions.tsx

@@ -0,0 +1,38 @@
+import { CopyLinkIcon } from '../icons';
+
+/**
+ * Descriptor for a single entry in a `ResponsiveDataTable` row-action menu
+ * (`Column.options.actionsList`).
+ *
+ * Defined in this leaf module (rather than inline in `ResponsiveDataTable`) so
+ * the type and the `getCopyDeepLinkAction` helper can be re-exported explicitly
+ * from the package root. `ResponsiveDataTable` imports `@sistent/mui-datatables`,
+ * which ships no type declarations; re-exporting directly from it makes
+ * rollup-plugin-dts resolve that untyped import and drop the whole declaration
+ * bundle. Keeping these here, free of untyped imports, lets them survive into
+ * the published `.d.ts` without a consumer-side augmentation.
+ */
+export type TableAction = {
+  title: string;
+  icon: JSX.Element;
+  onClick: () => void;
+  disabled?: boolean;
+  customComponent?: JSX.Element;
+  type?: string;
+};
+
+/**
+ * Returns a pre-built {@link TableAction} that copies a deeplink for the given
+ * row to the clipboard. Drop it into any `actionsList` to give users a
+ * one-click "Copy link" entry in the row-action menu.
+ *
+ * @param onCopy - Invoked when the user clicks the action. The caller is
+ *   responsible for constructing and writing the URL to the clipboard.
+ * @param title - Menu label; defaults to `'Copy link'` and is overridable for
+ *   internationalisation.
+ */
+export const getCopyDeepLinkAction = (onCopy: () => void, title = 'Copy link'): TableAction => ({
+  title,
+  icon: <CopyLinkIcon width={20} height={20} />,
+  onClick: onCopy
+});

src/custom/index.tsx

@@ -44,12 +44,13 @@ import ResponsiveDataTable, {
 } from './ResponsiveDataTable';
 import SearchBar, { SearchBarProps } from './SearchBar';
 import { StyledCardProps } from './StyledCard/StyledCard';
+import { getCopyDeepLinkAction, TableAction } from './TableActions';
 import { TeamTable, TeamTableConfiguration } from './TeamTable';
 import { TooltipIcon } from './TooltipIconButton';
 import { TransferList } from './TransferModal/TransferList';
 import { TransferListProps } from './TransferModal/TransferList/TransferList';
 import UniversalFilter, { UniversalFilterProps } from './UniversalFilter';
-import { UserTableAvatarInfo, UsersTable } from './UsersTable';
+import { UsersTable, UserTableAvatarInfo } from './UsersTable';
 import { VisibilityChipMenu } from './VisibilityChipMenu';
 export { CatalogCard } from './CatalogCard';
 export { CatalogFilterSidebar } from './CatalogFilterSection';
@@ -65,6 +66,7 @@ export {
   PerformersSection,
   PerformersSectionButton
 } from './PerformersSection';
+export { PROMPT_VARIANTS, PromptComponent, type PromptRef } from './Prompt';
 export { SetupPreReq } from './SetupPrerequisite';
 export { StyledAccordion, StyledAccordionSummary } from './StyledAccordion';
 export { StyledCard } from './StyledCard';
@@ -75,7 +77,6 @@ export { Terminal } from './Terminal';
 export { TOC } from './TOCChapter';
 export { TOCLearning } from './TOCLearning';
 export { UserSearchField } from './UserSearchField';
-export { PROMPT_VARIANTS, PromptComponent, type PromptRef } from './Prompt';
 
 export {
   ActionButton,
@@ -100,6 +101,7 @@ export {
   FeedbackButton,
   FlipCard,
   FormatId,
+  getCopyDeepLinkAction,
   InfoTooltip,
   LearningCard,
   ModalCard,
@@ -114,12 +116,12 @@ export {
   TooltipIcon,
   TransferList,
   UniversalFilter,
-  UserTableAvatarInfo,
-  UsersTable,
-  VisibilityChipMenu,
   updateVisibleColumns,
   useNotificationHandler,
+  UsersTable,
+  UserTableAvatarInfo,
   useWindowDimensions,
+  VisibilityChipMenu,
   withErrorBoundary,
   withSuppressedErrorBoundary
 };
@@ -157,6 +159,7 @@ export type {
   ResponsiveDataTableProps,
   SearchBarProps,
   StyledCardProps,
+  TableAction,
   TransferListProps,
   UniversalFilterProps
 };
@@ -165,10 +168,10 @@ export * from './CatalogDesignTable';
 export * from './CatalogDetail';
 export * from './DashboardWidgets';
 export * from './Dialog';
+export * from './LiquidGlass';
 export * from './permissions';
 export * from './ResourceDetailFormatters';
 export * from './RJSFFormWrapper';
 export * from './ShareModal';
 export * from './UserSearchField';
 export * from './Workspaces';
-export * from './LiquidGlass';

src/index.tsx

@@ -18,3 +18,8 @@ export * from './utils';
 // affects other custom components (see consumers' local d.ts augmentations);
 // add them here as they are needed.
 export { FeedbackButton, type FeedbackComponentProps } from './custom/Feedback';
+// `TableAction` and `getCopyDeepLinkAction` live in the leaf `TableActions`
+// module (not `ResponsiveDataTable`, which imports the untyped
+// `@sistent/mui-datatables` and would crash the dts build) precisely so this
+// explicit re-export can force them into the published declaration bundle.
+export { getCopyDeepLinkAction, type TableAction } from './custom/TableActions';