@jasperoosthoek/react-toolbox 0.6.6 → 0.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jasperoosthoek/react-toolbox",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "author": "jasperoosthoek",
   "license": "MIT",
   "repository": {

package/src/components/forms/FormFields.tsx

@@ -161,7 +161,6 @@ export const FormSwitch = ({ className = '', ...restProps }: FormCheckboxProps)
 );
 
 export type DisabledProps = {
-
   list: any[];
   value: string | number;
   state: any;
@@ -432,12 +431,12 @@ export const FormDropdown = <T,>({
                 key={key}
                 disabled={
                   typeof disabled === 'function'
-                    ? disabled({ initialValue, list, value: item[idKey] as string, state, initialState })
+                    ? disabled({ initialValue, list, value: item[idKey] as number | string, state, initialState })
                     : disabled
                 }
                 selected={value === item[idKey]}
                 cursor='pointer'
-                onClick={() => onChange(item[idKey] as any)}
+                onClick={() => onChange(item[idKey] as number | string)}
                 {...restProps}
               >
                 {item[nameKey] as string}

package/src/components/tables/DataTable.tsx

@@ -67,9 +67,10 @@ export type OnMove<R> = ({ item, target, reset }: OnMoveProps<R>) => void;
 export type OnClickRow<R> = (row: R) => void;
 
 export type DataTableHeader = {
-  search?: boolean,
-  numberOfRows?: boolean,
-  pagination?: boolean,
+  search?: boolean;
+  numberOfRows?: boolean;
+  pagination?: boolean;
+  customHeader?: ReactElement | string;
 };
 
 export type DataTableProps<D extends any[]> = {
@@ -182,7 +183,7 @@ export const DataTable = <D extends any[]>({
       {...{ ...(typeof onClickRow === 'function' || showEditModal)
         ? { onClick: () => {
             if (onClickRow) onClickRow(row);
-            if (hasProvider) showEditModal(row);
+            if (hasProvider && showEditModalOnClickRow) showEditModal(row);
           } }
         : {}
       }}
@@ -211,14 +212,19 @@ export const DataTable = <D extends any[]>({
   )), [columns])
   
   if (!Component) return null;
+
+  const customHeader = showHeader && (showHeader as DataTableHeader).customHeader;
+  const sm = customHeader ? 4 : 6; 
+  const lg = customHeader ? 3 : 4; 
+  
   return (
     <div style={style} className={className}>
-      {showHeader &&
+      {(showHeader) &&
         <Row className="mb-4">
           {(showHeader === true || showHeader.search) && (
             <Col
               xs={12}
-              lg={4}
+              lg={lg}
               className="d-flex flex-col justify-content-end align-items-end"
             >
               <InputGroup>
@@ -240,8 +246,8 @@ export const DataTable = <D extends any[]>({
           {(showHeader === true || showHeader.numberOfRows) && (
             <Col
               xs={12}
-              sm={6}
-              lg={4}
+              sm={sm}
+              lg={lg}
               className="d-flex flex-col justify-content-lg-center align-items-center justify-content-sm-start mb-2 mb-sm-0"
             >
               <Form.Group>
@@ -275,8 +281,8 @@ export const DataTable = <D extends any[]>({
           {(showHeader === true || showHeader.pagination) && (
             <Col
               xs={12}
-              sm={6}
-              lg={4}
+              sm={sm}
+              lg={lg}
               className="d-flex flex-col justify-content-end align-items-end"
             >
               <ButtonGroup>
@@ -308,6 +314,17 @@ export const DataTable = <D extends any[]>({
               </ButtonGroup>
             </Col>
           )}
+          
+          {customHeader && (
+            <Col
+              xs={12}
+              sm={sm}
+              lg={lg}
+              className="d-flex flex-col justify-content-end align-items-end"
+            >          
+              {customHeader}
+            </Col>
+          )}
         </Row>
       }