Add flags for striped rows and clear search button in ReactDataTable (#79)

Author: neotrow

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- added a flag `isStriped` to the `ReactDataTable` component to enable/disable striped rows
+- added a flag `showClearSearchButton` to the `ReactDataTable` component to show/hide the clear search button
+
 ## [5.10.0] - 2025-04-29
 
 ### Added

src/lib/ReactDataTable/ReactDataTable.tsx

@@ -45,6 +45,8 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
     noEntriesMessage,
     onRowClick,
     enableRowClick,
+    isStriped = true,
+    showClearSearchButton = true,
   } = props;
 
   const { pagination } = table.getState();
@@ -116,7 +118,7 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
       >
         <style>{loadingCss}</style>
         <ReactStrapTable
-          striped
+          striped={isStriped}
           hover
           size="sm"
           className={tableClassName}
@@ -196,20 +198,22 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
                                   />
                                 )}
 
-                                <FontAwesomeIcon
-                                  style={{ cursor: "pointer", marginBottom: "4px", marginRight: "5px" }}
-                                  icon={faTimes}
-                                  onClick={() => {
-                                    if (onEnter) {
-                                      onEnter(getModelFromColumnFilter(table.initialState.columnFilters));
-                                    }
+                                {showClearSearchButton && (
+                                  <FontAwesomeIcon
+                                    style={{ cursor: "pointer", marginBottom: "4px", marginRight: "5px" }}
+                                    icon={faTimes}
+                                    onClick={() => {
+                                      if (onEnter) {
+                                        onEnter(getModelFromColumnFilter(table.initialState.columnFilters));
+                                      }
 
-                                    table.setColumnFilters(table.initialState.columnFilters);
-                                    if (manualPagination) {
-                                      resetPageIndex(true);
-                                    }
-                                  }}
-                                />
+                                      table.setColumnFilters(table.initialState.columnFilters);
+                                      if (manualPagination) {
+                                        resetPageIndex(true);
+                                      }
+                                    }}
+                                  />
+                                )}
                               </>
                             )}
                             {header.column.getCanFilter() && (

src/lib/ReactDataTable/ReactDataTableProps.ts

@@ -101,4 +101,16 @@ export interface ReactDataTableProps<TData, TFilter extends FilterModel> {
    * to override the default message in case no entries is found
    */
   noEntriesMessage?: string;
+
+  /**
+   * boolean flag to indicate if the table should be striped
+   * @default true
+   */
+  isStriped?: boolean;
+
+  /**
+   * boolean flag to indicate if the table should have hover effect
+   * @default true
+   */
+  showClearSearchButton?: boolean;
 }