Merge pull request #1258 from inplayer-org/change/add-table-buttons

Change/add table buttons

Author: srdjanRakic

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.4.3] - 15-11-2020
+
+### Changes
+
+- Add the possibility to have more than one table button
+
 # [2.5.0] - 12-01-2021
 ### Changes
 

index.d.ts

@@ -147,6 +147,13 @@ export interface TableOptions<T extends TableRowData> {
   headerSection?: Node | JSX.Element | null;
 }
 
+export interface TableButtonProps {
+  label: string;
+  icon?: string | ReactNode;
+  onClick: (e: SyntheticEvent) => any;
+  type: string;
+};
+
 export interface TableProps<TableData extends TableRowData = TableRowData> {
   columns: Array<TableColumn<TableData>>;
   data: Array<TableData>;
@@ -155,12 +162,7 @@ export interface TableProps<TableData extends TableRowData = TableRowData> {
   className?: string;
   style?: CSSProperties;
   options?: Partial<TableOptions<TableData>>;
-  tableButton?: {
-    label: string;
-    icon?: string | Node | JSX.Element;
-    onClick: (e: SyntheticEvent) => any;
-    type: string;
-  };
+  tableButton?: Array<TableButtonProps>;
   actionsRowTitle?: string;
 }
 

src/components/Table/Table.tsx

@@ -52,6 +52,13 @@ type TableOptions<T> = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
+type TableButtonProps = {
+  label: string;
+  icon?: string | ReactNode;
+  onClick: (e: SyntheticEvent) => any;
+  type: string;
+};
+
 type Props<T = Data> = {
   columns: Array<Column> | any;
   data: Array<any>;
@@ -60,12 +67,7 @@ type Props<T = Data> = {
   options: TableOptions<T>;
   showLoader?: boolean;
   renderEmptyTable?: boolean;
-  tableButton?: {
-    label: string;
-    icon?: string | Node;
-    onClick: (e: SyntheticEvent) => any;
-    type: string;
-  };
+  tableButton?: Array<TableButtonProps>;
   actionsRowTitle?: string;
 };
 
@@ -94,7 +96,7 @@ class Table<T> extends Component<Props<T>, State> {
     },
     showLoader: false,
     renderEmptyTable: false,
-    tableButton: null,
+    tableButton: [],
     actionsRowTitle: 'Actions',
   };
 
@@ -264,23 +266,23 @@ class Table<T> extends Component<Props<T>, State> {
         </thead>
         <tbody>{this.renderData(columns, data)}</tbody>
         <tfoot>
-          {tableButton && (
-            <ButtonTableRow>
+          {tableButton?.map((button: TableButtonProps) => (
+            <ButtonTableRow key={button.label}>
               <TableCell colSpan={columnContent.length}>
                 <TableButton
                   modifiers={['buttonLink']}
                   fullWidth
                   fullHeight
-                  onClick={tableButton.onClick}
-                  icon={tableButton.icon}
+                  onClick={button.onClick}
+                  icon={button.icon}
                   iconPosition="left"
-                  type={tableButton.type}
+                  type={button.type}
                 >
-                  {tableButton.label}
+                  {button.label}
                 </TableButton>
               </TableCell>
             </ButtonTableRow>
-          )}
+          ))}
         </tfoot>
       </TableWrapper>
     );

src/components/Table/table.stories.mdx

@@ -4,6 +4,7 @@ import Table from './'
 import { MdDelete, MdErrorOutline } from 'react-icons/md';
 import Pagination from '../Pagination'
 import { columns, data } from './data.tsx'
+import { IoIosAddCircleOutline } from 'react-icons/io';
 
 <Meta title="Table" component={<Table/>} />
 
@@ -32,6 +33,20 @@ const Page = () => (
                       { icon: "trash", onClick: (id) => console.log(id) },
                 ],
             }}
+            tableButton={[
+              {
+                label: 'Table button 1',
+                icon: <IoIosAddCircleOutline />,
+                onClick: () => null,
+                type: 'button',
+              },
+              {
+                label: 'Table button 2',
+                icon: <IoIosAddCircleOutline />,
+                onClick: () => null,
+                type: 'button',
+              }
+            ]}
         />
         <Pagination
             onPageChange={console.log}