feat #341 - Add table controls config

src/__snapshots__/storybook.test.ts.snap

@@ -5102,10 +5102,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
       className="tableContainer-0-2-249"
     >
       <div
-        className="tableContainer-0-2-253"
+        className="tableContainer-0-2-252"
       >
         <div
-          className="searchBarWrapper-0-2-252 searchBarWrapper-d1-0-2-255"
+          className="tableControls-0-2-253 tableControls-d1-0-2-255"
         >
           <input
             autoFocus={false}

src/components/Filters/Filters.stories.tsx

@@ -45,7 +45,7 @@ const ControlledTemplate: Story<FiltersProps> = args => {
 	const filtersList: FiltersList = [
 		{
 			id: 'some-id',
-			selectedKey: 'service',
+			selectedKey: 'key0',
 			selectedOperator: '=',
 			selectedValues: [{ text: 'EC2', value: 'service0' }]
 		}

src/components/Table/Table.stories.tsx

@@ -1,10 +1,8 @@
 import { action } from '@storybook/addon-actions'
-import { createUseStyles } from 'react-jss'
 import { Story } from '@storybook/react/types-6-0'
 import tableData4 from './fixtures/4_sample_data'
 import { DataId, Table, TableProps } from '.'
 import React, { Key, useState } from 'react'
-import { styleguide, themes, ThemeType } from 'components/assets/styles'
 import tableData0, { Person } from './fixtures/0_sample_data'
 import tableData1, { File } from './fixtures/1_sample_data'
 import tableData2, { Client } from './fixtures/2_sample_data'
@@ -13,10 +11,6 @@ import tableData5, { Dot } from './fixtures/5_sample_data'
 import tableData6, { Client2 } from './fixtures/6_sample_data'
 import tableData7, { JSONPathData } from './fixtures/7_sample_data'
 
-const { spacing } = styleguide
-
-const { dark, light } = ThemeType
-
 const commonArgTypes = {
 	activeRowKey: {
 		control: { disable: true }
@@ -55,33 +49,6 @@ const commonArgTypes = {
 	}
 }
 
-const useStyles = createUseStyles({
-	decorator: {
-		background: themes[light].background.secondary,
-		height: `calc(100vh - ${spacing.m * 2}px)`,
-		padding: spacing.l,
-		width: '100%'
-	},
-	// eslint-disable-next-line sort-keys
-	'@global': {
-		[`.${dark}`]: {
-			'& $decorator': {
-				background: themes[dark].background.secondary
-			}
-		}
-	}
-})
-
-export const Decorator = (TableStory: Story) => {
-	const classes = useStyles()
-
-	return (
-		<div className={classes.decorator}>
-			<TableStory />
-		</div>
-	)
-}
-
 const DecoratedTableStory = <Data extends DataId>(props: TableProps<Data>) => {
 	const [activeRowKey, setActiveRowKey] = useState<Key>('')
 

src/components/Table/__tests__/Table.test.tsx

@@ -213,9 +213,9 @@ describe('Table search and searchProps', () => {
 
 	it('it renders the search bar to the left by default', async () => {
 		const table = wrapper.find(Table)
-		const searchBarWrapper = table.find('[className*="searchBarWrapper"]')
+		const tableControls = table.find('[className*="tableControls"]')
 
-		const style = window.getComputedStyle(searchBarWrapper.getDOMNode())
+		const style = window.getComputedStyle(tableControls.getDOMNode())
 
 		expect(style.justifyContent).toBe('flex-start')
 	})
@@ -229,9 +229,9 @@ describe('Table search and searchProps', () => {
 		)
 
 		const table = wrapper.find(Table)
-		const searchBarWrapper = table.find('[className*="searchBarWrapper"]')
+		const tableControls = table.find('[className*="tableControls"]')
 
-		const style = window.getComputedStyle(searchBarWrapper.getDOMNode())
+		const style = window.getComputedStyle(tableControls.getDOMNode())
 
 		expect(style.justifyContent).toBe('flex-end')
 	})

src/components/Table/index.tsx

@@ -17,6 +17,7 @@ import { mapData, mapFilterKeys, processColumns, processData } from './utils'
 import React, {
 	ChangeEvent,
 	Key,
+	ReactNode,
 	useCallback,
 	useEffect,
 	useState
@@ -46,6 +47,11 @@ export interface SearchProps {
 	placement?: 'left' | 'right'
 }
 
+export interface TableControlsConfig {
+	classes?: string[]
+	render?: () => ReactNode
+}
+
 export interface TableProps<Data> extends CommonComponentProps {
 	/**
 	 * Key(id) of active row if onRowClick exists
@@ -75,6 +81,7 @@ export interface TableProps<Data> extends CommonComponentProps {
 	 * Optional Table Pagination config that determines the numbers of table rows to render per page
 	 */
 	paginationConfig?: { rowCount?: number }
+	tableControlsConfig?: TableControlsConfig
 	scrollConfig?: ScrollConfig
 	/**
 	 * Optional prop to enable/disable table search
@@ -103,6 +110,7 @@ export const Table = <Data,>({
 	loading = false,
 	paginationConfig = {},
 	onRowClick,
+	tableControlsConfig = {},
 	scrollConfig,
 	search = true,
 	skeletonRowCount = 5,
@@ -117,6 +125,11 @@ export const Table = <Data,>({
 		showSizeChanger: false
 	})
 
+	const {
+		classes: tableControlClasses = [],
+		render: renderTableControls
+	} = tableControlsConfig
+
 	const { isMobile } = useWindowSize()
 
 	const tableClasses = useStyles({
@@ -265,7 +278,13 @@ export const Table = <Data,>({
 		<TableCtxProvider value={{ isMobile }}>
 			<div className={cn(tableClasses.tableContainer, classes)}>
 				{search && (
-					<div className={tableClasses.searchBarWrapper}>
+					<div
+						className={cn(
+							tableClasses.tableControls,
+							tableControlClasses
+						)}
+					>
+						{renderTableControls && renderTableControls()}
 						<Input
 							dataTag='table-search'
 							fullWidth={isMobile}

src/components/Table/styles.ts

@@ -236,13 +236,6 @@ export const useStyles = createUseStyles({
 			}
 		}
 	},
-	searchBarWrapper: {
-		display: 'flex',
-		justifyContent: props =>
-			props.searchProps.placement === 'right' ? 'flex-end' : 'flex-start',
-		marginBottom: spacing.m,
-		width: '100%'
-	},
 	tableContainer: generateTableStyles(light),
 	// eslint-disable-next-line sort-keys
 	'@global': {
@@ -271,5 +264,12 @@ export const useStyles = createUseStyles({
 			},
 			'& $tableContainer': generateTableStyles(dark)
 		}
+	},
+	tableControls: {
+		display: 'flex',
+		justifyContent: props =>
+			props.searchProps.placement === 'right' ? 'flex-end' : 'flex-start',
+		marginBottom: spacing.m,
+		width: '100%'
 	}
 })

src/components/TableDrawer/index.tsx

@@ -49,14 +49,12 @@ export interface TableDrawerProps<DataType>
 	extends Omit<TableProps<DataType>, 'activeRowKey' | 'onRowClick'> {
 	drawerContainerClasses?: string[]
 	renderDrawerCmp: (id: Key, rowData: DataType) => ReactNode
-	renderTableControls?: () => ReactNode
 	tableContainerClasses?: string[]
 }
 
 export const TableDrawer = <DataType extends DataId>({
 	drawerContainerClasses = [],
 	renderDrawerCmp,
-	renderTableControls,
 	tableContainerClasses = [],
 	...rest
 }: TableDrawerProps<DataType>) => {
@@ -87,7 +85,6 @@ export const TableDrawer = <DataType extends DataId>({
 					tableContainerClasses
 				)}
 			>
-				{renderTableControls && renderTableControls()}
 				<Table<DataType>
 					activeRowKey={rowData.id}
 					onRowClick={onRowClick}