feat(Table): add renderRowActions property (#1353)

src/components/Table/README.md

@@ -71,10 +71,11 @@ Adds a special column with actions to table columns.
 
 ### Properties
 
-| Name           | Description                                 |                        Type                         |
-| :------------- | :------------------------------------------ | :-------------------------------------------------: |
-| getRowActions  | Array of action configs for each row        | `(item: any, index: number) => TableActionConfig[]` |
-| rowActionsSize | Size of actions button and popup menu items |              `"s"` `"m"` `"l"` `"xl"`               |
+| Name             | Description                                 |                           Type                           |
+| :--------------- | :------------------------------------------ | :------------------------------------------------------: |
+| getRowActions    | Array of action configs for each row        |   `(item: any, index: number) => TableActionConfig[]`    |
+| renderRowActions | render function for Actions Cell            | `(props: {item: any; index: number}) => React.ReactNode` |
+| rowActionsSize   | Size of actions button and popup menu items |                 `"s"` `"m"` `"l"` `"xl"`                 |
 
 ### TableActionConfig
 
@@ -129,6 +130,31 @@ const getRowActions = () => {
 const table = <MyTable data={data} columns={columns} getRowActions={getRowActions} />;
 ```
 
+```jsx
+import {Table, withTableActions, RenderRowActionsProps} from '@gravity-ui/uikit';
+
+const MyTable = withTableActions(Table);
+type Item = {id: number; text: string};
+
+const data: Item[] = [
+  {id: 1, text: 'Hello'},
+  {id: 2, text: 'World'},
+];
+const columns = [{id: 'id'}, {id: 'text'}];
+
+const RowAction = ({item}: RenderRowActionsProps<Item>) => {
+    return <React.Fragment>{`Action for - ${item.text}`}</React.Fragment>;
+};
+
+const table = (
+  <MyTable
+    data={data}
+    columns={columns}
+    renderRowActions={RowAction}
+  />
+);
+```
+
 ## Usage with HOC `withTableCopy`
 
 Allows the contents of a cell or any text to be copied.

src/components/Table/__stories__/Table.stories.tsx

@@ -7,6 +7,7 @@ import _cloneDeep from 'lodash/cloneDeep';
 
 import type {TableAction, TableSettingsData} from '..';
 import {Icon} from '../../Icon';
+import {TreeSelect} from '../../TreeSelect/TreeSelect';
 import {Table} from '../Table';
 import type {TableProps} from '../Table';
 
@@ -127,7 +128,25 @@ const WithTableActionsTemplate: StoryFn<TableProps<DataItem>> = (args) => {
             handler: () => {},
         },
     ];
-    return <TableWithAction {...args} getRowActions={getRowActions} />;
+    return (
+        <React.Fragment>
+            <h3>{'with getRowActions property'}</h3>
+            <TableWithAction {...args} getRowActions={getRowActions} />
+            <br />
+            <h3>{'with renderRowActions property'}</h3>
+            <TableWithAction
+                {...args}
+                renderRowActions={({index}) => {
+                    if (index % 2) {
+                        return null;
+                    }
+
+                    const items = ['action 1', 'action 2', 'action 3'];
+                    return <TreeSelect items={items} size="s" />;
+                }}
+            />
+        </React.Fragment>
+    );
 };
 export const HOCWithTableActions = WithTableActionsTemplate.bind({});
 

src/components/Table/hoc/index.ts

@@ -2,6 +2,7 @@ export {withTableSelection} from './withTableSelection/withTableSelection';
 export type {WithTableSelectionProps} from './withTableSelection/withTableSelection';
 export {withTableActions} from './withTableActions/withTableActions';
 export type {
+    RenderRowActionsProps,
     WithTableActionsProps,
     TableActionConfig,
     TableAction,