React - Grid component

Reusable grid component

npm install grid-component-react-ex

Required library for the button and arrays

npm i @fluentui/react
npm i @fluentui/react-hooks

You’ll need to install React and PropTypes separately since those dependencies aren’t included in the package.

<GridComponent
Table={Table} //Name of entity
SearchBoxComponent={SearchBoxComponent} //Search component input field
SearchBoxClass={SearchBoxClass} //Search componet name of classes
PlaceHolderText={PlaceHolderText} //Search componet placeholder text
SearchBoxStyle={SearchBoxStyle} //Search component style
RemoveSearch={RemoveSearch} //Name of localstorage key. to remove search data
setFilterBySearch={setFilterBySearch} //Set filter data function, where set filter information
SearchString={SearchString} //Search string state variable
DisplayExport={DisplayExport} //Allow to display export or not (true | false)
IsAllowExport={IsAllowExport} //Allow to export file or not (true | false)
IsAllowAllButtons={IsAllowAllButtons} //Allow to display all action button (crud button)
DefaultButton={DefaultButton} //Button Component
ExportIcon={ExportIcon} //Icon props
ExportText={ExportText} //Button text props
ExportClass={ExportClass} //Button classNames props
PreviewPDFReport={PreviewPDFReport} //Export PDF function
FilterClass={FilterClass} //Filter button className
FilterSecondaryText={FilterSecondaryText} //Second filter button text custom filter
FilterButtonText={FilterButtonText} //Filter button text single filter
FilterIcon={FilterIcon} //Filter icon
FetchAdvanceFilterData={FetchAdvanceFilterData} //Add filter api 
SelectedColumn={SelectedColumn} //Array of selected column
FilterBySearch={FilterBySearch} //Array already applied filters
StoreMethod={StoreMethod} //Reducer action method
UrlRoute={UrlRoute} //Name of module to store data in localstorage
PrimaryButton={PrimaryButton} //Button component
IsAllowWriteInfo={IsAllowWriteInfo} //Allow user for add event
AddIcon={AddIcon} //Add (plus) icon
AddButtonClass={AddButtonClass} //Add button classname
OpenAddForm={OpenAddForm} //Function for click event to open add form
AddButtonText={AddButtonText} //Add button text
OpenColumnPanel={OpenColumnPanel} //Toggle function to open panel window (true/false)
RemoveSearchButton={RemoveSearchButton} //Remove search button component
SearchPara={SearchPara} //Search values
SetSearchPara={SetSearchPara} //Set method to change search paramaters
SearchParaElements={SearchParaElements} //Array of object of the whole search elements
SetSearchParaElement={SetSearchParaElement} //Set method to change all the search elements (add/remove/edit)
ParentTable={ParentTable} //Name of module table
JoinTable={JoinTable} //Name of other table name which is used for join
TableHead={TableHead} //Table header part of the header (array of object)
TableBody={TableBody} //Table body part of the data (array of object)
ColumnIndex={ColumnIndex} //Name of column based on database ("id")
SortData={SortData} //Perform sorting using this method 
OrderBy={OrderBy} //Order by values (asc | desc)
SortBy={SortBy} //Name of column based on database
AllowAccess={AllowAccess} //True | False
ModuleId={ModuleId} //Module id based on database record (1 | 2)
CommonGetSiteDataApi={CommonGetSiteDataApi} //Fetch single data api 
GetEditableData={GetEditableData} //Action method of reducer to store data
ViewApi={ViewApi} //Fetch single record api
SetLoading={SetLoading} //true/false
History={History} //History hook
Dispatch={Dispatch} //Dispatch hook
ViewFormUrl={ViewFormUrl} //View page route url
EditFormUrl={EditFormUrl} //Edit form route url
ToggleHideDialog={ToggleHideDialog} //Method to hide/show modal window of confirm while delete call 
ConfirmArchive={ConfirmArchive} //Method to hide/show modal window of confirm while data archive
ExportPdfReport={ExportPdfReport} //Export report function 
ReportName={ReportName} //Define name of exported file 
AllowViewInfo={AllowViewInfo} //Allow to view info or not (true | false)
AllowExportInfo={AllowExportInfo} //Allow to export report or not (true | false) 
AllowEditInfo={AllowEditInfo} //Allow to edit info or not (true | false)
AllowDeleteInfo={AllowDeleteInfo} //Allow to delete info or not (true | false)
AllowPrimaryInfo={AllowPrimaryInfo} //Allow to set detail primary or not (true | false)
AssignApi={AssignApi} //Assign API for client 
SetFieldsAsPrimary={SetFieldsAsPrimary} //Method to change primary set values
EntityName={EntityName} //Name of entity based on backend
FieldId={FieldId} //Module id based on database 
TotalRecord={TotalRecord} //Count of whole data 
PostsPerPage={PostsPerPage} //Count on single load data on page (10 per page)
CheckSpinner={CheckSpinner} //True | False
LoadMoreData={LoadMoreData} //Function to load more 10 data and append to the grid
SpinnerButton={SpinnerButton} //Spinner button component
toggleHideDialog={toggleHideDialog} //Function to hide/show dropdown 
alertClicked={alertClicked} //Function for the removing all the applied filter 
RemoveAdvFilter={RemoveAdvFilter} //Function remove adv filter
MenuItems={menuItems} //Array of dropdown inner option for custom fitler 
AddUserToArchive={AddUserToArchive} //Function for call api to user archive
ArchiveButtonText={ArchiveButtonText} //Archive button text
IsAllowArchive={IsAllowArchive} //Is allow to access archive
ToggleArchiveClientList={ToggleArchiveClientList} //True | False 
IsArchive={IsArchive} //True | False
toggleHideDialog={toggleHideDialog} //True | False
UseParamsData={parseInt(UseParamsData)} //id paramaters from url
IsAllowDragDrop={IsDragDrop} //Allow to user drag and drop (true|false)
HandleDragDrop={HandleDragDrop} //Function to change to change position and call api 
ChangeOrderButtonText={ChangeOrderButtonText} //Button text
IsModalOpen={IsModalOpen} //True | False
AllowModelOpen={AllowModelOpen} //True | False
/>