@blackpurl/bp-react-components 1.0.2 → 1.0.3

package/README.md

@@ -1,5 +1,9 @@
 # BP React Components
 
+## 🔗 Repository
+
+GitHub: https://github.com/black-purl/bp-react-component
+
 A reusable React-based table component system built with:
 
 - React (Vite)
@@ -16,7 +20,7 @@ A reusable React-based table component system built with:
 ### 1. Clone the repository
 
 ```bash
-git clone <your-repository-url>
+git clone https://github.com/black-purl/bp-react-component
 cd bp-react-component
 ```
 
@@ -127,10 +131,11 @@ Storybook is configured to use the same theme via:
 - Column visibility toggle
 - Row selection (controlled & uncontrolled)
 - Global search
-- Column filters (Drawer with accordion groups)
+- Column filters (Controlled via filterGroups)
 - Grouping support
 - Pagination
 - Fully theme-aware UI
+- Sorting (default + dynamic)
 
 ---
 
@@ -146,16 +151,19 @@ Storybook is configured to use the same theme via:
 ## 📦 Installation
 
 ```bash
-npm install bp-react-components
+npm install @blackpurl/bp-react-components
 ```
+
 ---
 
 ## 🔗 Peer Dependencies
 
 Make sure these are installed in your application:
+
 ```bash
 npm install @mui/material @mui/x-data-grid react react-dom
 ```
+
 ---
 
 # 📦 Component Usage (BPTable)
@@ -163,40 +171,65 @@ npm install @mui/material @mui/x-data-grid react react-dom
 ## Basic Example
 
 ```jsx
-import BPTable from 'bp-react-components';
+import BPTable from '@blackpurl/bp-react-components';
 
-<BPTable
-  data={data}
-  columns={columns}
-  getRowId={(row) => row.id}
-/>
+<BPTable data={data} columns={columns} getRowId={(row) => row.id} />;
+```
+
+---
+
+## 🔍 Filters (Controlled)
+
+BPTable supports dynamic filter generation based on column configuration.
+
+Filters are controlled via `filterGroups` and `onFilterChange`.
+
+### Example
+
+```jsx
+const [filters, setFilters] = useState(generateFilterGroupsFromData(data, columns));
+
+<BPTable data={data} columns={columns} filterGroups={filters} onFilterChange={setFilters} />;
+```
+
+---
+
+## 🔃 Sorting
+
+Default sorting can be applied using:
+
+```jsx
+<BPTable defaultSortModel={[{ field: 'OrderNumber', sort: 'asc' }]} />
+```
 
 ## ⚙️ Props
 
-| Prop                     | Type     | Default      | Description                         |
-|--------------------------|----------|--------------|-------------------------------------|
-| data                     | array    | []           | Table data                          |
-| columns                  | array    | []           | Column configuration                |
-| getRowId                 | function | required     | Unique row identifier               |
-| isLoading                | boolean  | false        | Show loading state                  |
-| enablePagination         | boolean  | true         | Enable pagination                   |
-| enableGrouping           | boolean  | false        | Enable tab grouping                 |
-| enableRowSelection       | boolean  | false        | Enable checkbox selection           |
-| enableColumnSorting      | boolean  | true         | Enable sorting                      |
-| enableColumnResize       | boolean  | false        | Enable column resizing              |
-| enableColumnReorder      | boolean  | false        | Enable drag & drop                  |
-| enableColumnVisibility   | boolean  | false        | Toggle column visibility            |
-| enableColumnFilters      | boolean  | true         | Enable filter drawer                |
-| enableGlobalFilter       | boolean  | true         | Enable global search                |
-| enableDensityToggle      | boolean  | false        | Toggle row density                  |
-| storageKey               | string   | undefined    | Enable local storage persistence    |
-| selectedRows             | array    | []           | Selected row IDs                    |
-| onSelectedRowsChange     | function | undefined    | Selection change handler            |
-| onRowClick               | function | undefined    | Row click handler                   |
-| rowActions               | function | undefined    | Dynamic row actions                 |
-| dateFormatter            | function | undefined    | Custom date formatting              |
-| currency                 | string   | 'USD'        | Currency code                       |
-| locale                   | string   | 'en-US'      | Locale                              |
+| Prop                   | Type     | Default   | Description                      |
+| ---------------------- | -------- | --------- | -------------------------------- |
+| data                   | array    | []        | Table data                       |
+| columns                | array    | []        | Column configuration             |
+| getRowId               | function | required  | Unique row identifier            |
+| isLoading              | boolean  | false     | Show loading state               |
+| enablePagination       | boolean  | true      | Enable pagination                |
+| enableGrouping         | boolean  | false     | Enable tab grouping              |
+| enableRowSelection     | boolean  | false     | Enable checkbox selection        |
+| enableColumnSorting    | boolean  | true      | Enable sorting                   |
+| enableColumnResize     | boolean  | false     | Enable column resizing           |
+| enableColumnReorder    | boolean  | false     | Enable drag & drop               |
+| enableColumnVisibility | boolean  | true      | Toggle column visibility         |
+| enableColumnFilters    | boolean  | true      | Enable filter drawer             |
+| enableGlobalFilter     | boolean  | true      | Enable global search             |
+| enableDensityToggle    | boolean  | false     | Toggle row density               |
+| storageKey             | string   | undefined | Enable local storage persistence |
+| selectedRows           | array    | []        | Selected row IDs                 |
+| onSelectedRowsChange   | function | undefined | Selection change handler         |
+| onRowClick             | function | undefined | Row click handler                |
+| rowActions             | function | undefined | Dynamic row actions              |
+| headerActions          | function | undefined | Dynamic tableheader actions      |
+| dateFormatter          | function | undefined | Custom date formatting           |
+| currency               | string   | 'USD'     | Currency code                    |
+| locale                 | string   | 'en-US'   | Locale                           |
+| defaultSortModel       | array    | []        | Default sorting configuration    |
 
 ---
 
@@ -204,12 +237,12 @@ import BPTable from 'bp-react-components';
 
 ```javascript
 const columns = [
-  {
-    accessorKey: 'DealStatus',
-    header: 'Deal Status',
-    type: 'Label',
-    isFilterable: true,
-  },
+    {
+        accessorKey: 'DealStatus',
+        header: 'Deal Status',
+        type: 'Label',
+        isFilterable: true
+    }
 ];
 ```
 
@@ -235,11 +268,7 @@ const columns = [
 Pass custom formatter from application:
 
 ```jsx
-<BPTable
-  dateFormatter={(value) =>
-    moment(value).format('DD MMM YYYY')
-  }
-/>
+<BPTable dateFormatter={(value) => moment(value).format('DD MMM YYYY')} />
 ```
 
 ---
@@ -247,10 +276,7 @@ Pass custom formatter from application:
 ## 💰 Currency Formatting
 
 ```jsx
-<BPTable
-  currency="USD"
-  locale="en-US"
-/>
+<BPTable currency='USD' locale='en-US' />
 ```
 
 ---
@@ -259,18 +285,18 @@ Pass custom formatter from application:
 
 ```javascript
 const getRowActions = (row) => [
-  {
-    type: 'icon',
-    icon: 'solar:eye-bold',
-    label: 'View',
-    onClick: () => handleView(row),
-  },
-  {
-    type: 'button',
-    label: 'Edit',
-    variant: 'contained',
-    onClick: () => handleEdit(row),
-  },
+    {
+        type: 'icon',
+        icon: <VisibilityOutlinedIcon />,
+        label: 'View',
+        onClick: () => handleView(row)
+    },
+    {
+        type: 'button',
+        label: 'Edit',
+        variant: 'contained',
+        onClick: () => handleEdit(row)
+    }
 ];
 ```
 
@@ -278,6 +304,24 @@ const getRowActions = (row) => [
 <BPTable rowActions={getRowActions} />
 ```
 
+## ⚡ Table Header Actions
+
+```javascript
+const headerActions = [
+    {
+        label: 'Add Vendor',
+        variant: 'contained',
+        color: 'primary',
+        isDisabled: !isPermitted,
+        icon: <StoreOutlined />,
+        onClick: handleAddVendorClick
+    }
+];
+```
+```jsx
+<BPTable headerActions={headerActions} />
+```
+
 ---
 
 ## 🏷️ Custom Cell Renderer
@@ -309,9 +353,9 @@ const getRowActions = (row) => [
 
 ## 🔍 Filtering
 
-* Global search supported
-* Column-based filtering
-* Dynamic filter drawer (based on `isFilterable`)
+- Global search supported
+- Column-based filtering
+- Dynamic filter drawer (based on `isFilterable`)
 
 ---
 
@@ -320,16 +364,16 @@ const getRowActions = (row) => [
 Enable local storage:
 
 ```jsx
-<BPTable storageKey="my-table" />
+<BPTable storageKey='my-table' />
 ```
 
 Automatically persists:
 
-* Pagination
-* Filters
-* Column order
-* Column visibility
-* Density
+- Pagination
+- Filters
+- Column order
+- Column visibility
+- Density
 
 ---
 
@@ -337,9 +381,9 @@ Automatically persists:
 
 ```jsx
 <BPTable
-  onRowClick={(row) => {
-    console.log('Clicked:', row);
-  }}
+    onRowClick={(row) => {
+        console.log('Clicked:', row);
+    }}
 />
 ```
 
@@ -347,9 +391,9 @@ Automatically persists:
 
 ## 🎨 Styling & Theme
 
-* Uses Minimal UI theme internally
-* Fully isolated using Emotion cache
-* Works alongside external application themes
+- Uses Minimal UI theme internally
+- Fully isolated using Emotion cache
+- Works alongside external application themes
 
 ---
 
@@ -357,15 +401,15 @@ Automatically persists:
 
 👉 View full interactive documentation:
 
-**[Add your Chromatic link here]**
+🔗 Chromatic Preview: https://main--69ce1b19a977f6e5c4aa712c.chromatic.com/?path=/story/data-display-bp-table--default
 
 ---
 
 ## ⚠️ Notes
 
-* Column widths are configurable (`size`, `minSize`, `maxSize`)
-* Supports dynamic rendering from application side
-* Avoid overriding internal styles unless necessary
+- Column widths are configurable (`size`, `minSize`, `maxSize`)
+- Supports dynamic rendering from application side
+- Avoid overriding internal styles unless necessary
 
 ---