[docs] Add examples of callback props

+ update actions example to include props table
elastic · Nov 17, 2023 · 86af956 · 86af956
1 parent cdc1c39
commit 86af956
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src-docs/src/views/tables/actions/actions.tsx b/src-docs/src/views/tables/actions/actions.tsx
@@ -183,13 +183,14 @@ export default () => {
     } else {
       let actions: Array<DefaultItemAction<User>> = [
         {
-          name: 'Elastic.co',
-          description: 'Go to elastic.co',
+          name: 'User profile',
+          description: ({ firstName, lastName }) =>
+            `Visit ${firstName} ${lastName}'s profile`,
           icon: 'editorLink',
           color: 'primary',
           type: 'icon',
-          href: 'https://elastic.co',
-          target: '_blank',
+          href: ({ id }) => `${window.location.href}?id=${id}`,
+          target: '_self',
           'data-test-subj': 'action-outboundlink',
         },
       ];
@@ -205,13 +206,14 @@ export default () => {
           },
           {
             name: (user: User) => (user.id ? 'Delete' : 'Remove'),
-            description: 'Delete this user',
+            description: ({ firstName, lastName }) =>
+              `Delete ${firstName} ${lastName}`,
             icon: 'trash',
             color: 'danger',
             type: 'icon',
             onClick: deleteUser,
             isPrimary: true,
-            'data-test-subj': 'action-delete',
+            'data-test-subj': ({ id }) => `action-delete-${id}`,
           },
           {
             name: 'Edit',

diff --git a/src-docs/src/views/tables/actions/actions_section.js b/src-docs/src/views/tables/actions/actions_section.js
@@ -1,9 +1,14 @@
 import React from 'react';
-import { EuiBasicTable } from '../../../../../src/components';
+
+import { EuiBasicTable, EuiCode } from '../../../../../src/components';
+
 import { GuideSectionTypes } from '../../../components';
 
+import { EuiTableActionsColumnType } from '!!prop-loader!../../../../../src/components/basic_table/table_types';
+import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
+import { DefaultItemActionProps as DefaultItemAction } from '../props/props';
+
 import Table from './actions';
-import { EuiCode } from '../../../../../src/components/code';
 const source = require('!!raw-loader!./actions');
 
 export const section = {
@@ -40,5 +45,6 @@ export const section = {
     </>
   ),
   components: { EuiBasicTable },
+  props: { EuiTableActionsColumnType, DefaultItemAction, CustomItemAction },
   demo: <Table />,
 };