feat(table): add autoFocus as new props

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.1.32
+
+- Add autoFocus props to the table component
+
 ## 2.1.31
 
 - Remove margintop from main header to avoid overriding

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "2.1.31",
+  "version": "2.1.32",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

src/components/basic/Table/components/Helper/helper.ts

@@ -35,9 +35,7 @@ export interface PageDataRows {
 }
 
 export const hasMorePages = (data: PageDataProps) => {
-  return (
-    data?.meta && data.meta.page < data.meta.totalPages - 1
-  )
+  return data?.meta && data.meta.page < data.meta.totalPages - 1
 }
 
 export const getMaxRows = (data: PageDataRows) => {

src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx

@@ -36,6 +36,7 @@ export interface SearchAndFilterButtonToolbarProps extends ToolbarProps {
   defaultFilter?: string
   onFilter?: (selectedFilter: SelectedFilter) => void
   descriptionText?: string
+  autoFocus?: boolean
 }
 
 export const SearchAndFilterButtonToolbar = ({
@@ -49,6 +50,7 @@ export const SearchAndFilterButtonToolbar = ({
   filterViews,
   defaultFilter = '',
   descriptionText,
+  autoFocus,
 }: SearchAndFilterButtonToolbarProps) => {
   const [searchInputText, setSearchInputText] = useState<string>(
     searchExpr ?? (searchInputData != null ? searchInputData.text : '')
@@ -115,7 +117,7 @@ export const SearchAndFilterButtonToolbar = ({
     <Box sx={styles}>
       <Box sx={{ display: 'flex', alignItems: 'center', height: '50px' }}>
         <SearchInput
-          autoFocus
+          autoFocus={autoFocus}
           endAdornment={endAdornment}
           value={searchInputText}
           onChange={onSearchChange}

src/components/basic/Table/components/Toolbar/UltimateToolbar.tsx

@@ -32,6 +32,7 @@ export interface UltimateToolbarProps extends ToolbarProps {
   selectedFilter?: SelectedFilter
   searchDebounce?: number
   searchExpr?: string
+  autoFocus?: boolean
 }
 
 export const UltimateToolbar = ({
@@ -44,6 +45,7 @@ export const UltimateToolbar = ({
   searchInputData,
   onClearSearch,
   searchDebounce = 500,
+  autoFocus,
 }: UltimateToolbarProps) => {
   const { spacing } = useTheme()
   const [searchInput, setSearchInput] = useState<string>(
@@ -114,7 +116,7 @@ export const UltimateToolbar = ({
       {onSearch != null && (
         <Box sx={{ display: 'flex', alignItems: 'center', height: '50px' }}>
           <SearchInput
-            autoFocus
+            autoFocus={autoFocus}
             endAdornment={endAdornment}
             value={searchInput}
             onChange={onSearchChange}

src/components/basic/Table/components/Toolbar/index.tsx

@@ -67,6 +67,7 @@ export interface ToolbarProps {
   onOpenFilterSection?: (value: boolean) => void
   selectedFilter?: SelectedFilter
   onClearSearch?: () => void
+  autoFocus?: boolean
 }
 
 const getIconColor = (openFilter: boolean) => {
@@ -92,6 +93,7 @@ export const Toolbar = ({
   onOpenFilterSection,
   selectedFilter,
   onClearSearch,
+  autoFocus,
 }: ToolbarProps) => {
   const { spacing } = useTheme()
   const isSearchText = searchExpr && searchExpr !== ''
@@ -213,7 +215,7 @@ export const Toolbar = ({
         <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
           {openSearch ? (
             <SearchInput
-              autoFocus
+              autoFocus={autoFocus}
               endAdornment={getEndAdornment()}
               value={searchInput}
               onChange={onSearchInputChange}

src/components/basic/Table/index.tsx

@@ -70,6 +70,7 @@ export interface TableProps extends DataGridProps {
     status: number
   }
   reload?: () => void
+  autoFocus?: boolean
 }
 
 export const Table = ({
@@ -103,6 +104,7 @@ export const Table = ({
   alignCell = 'center',
   error,
   reload,
+  autoFocus = true,
   ...props
 }: TableProps) => {
   const toolbarProps = {
@@ -122,6 +124,7 @@ export const Table = ({
     descriptionText,
     defaultFilter,
     filterViews,
+    autoFocus,
   }
 
   // TODO: this method contains application specific row attributes and must therefore