gridular 1.0.3 → 1.2.0

package/README.md

@@ -9,6 +9,8 @@ Gridular is a flexible and customizable data grid component for React applicatio
 - **Pagination**: Navigate through large datasets with pagination controls.
 - **Row Selection**: Select rows for actions or data manipulation.
 - **Column Resizing**: Adjust column widths to fit your data needs.
+- **Column Management**: Show/hide and reorder columns as needed.
+- **Grid State Persistence**: Maintain column widths and ordering between sessions.
 
 ## Installation
 
@@ -18,8 +20,6 @@ To install Gridular, use npm or yarn:
 npm install gridular
 ```
 
-or
-
 ```bash
 yarn add gridular
 ```
@@ -28,19 +28,19 @@ yarn add gridular
 
 To use the DataGrid component, import it into your React component:
 
-```tsx
-import { DataGrid } from 'gridular/components/data-grid';
+```typescript
+import { DataGrid } from "gridular/components/data-grid";
 
 const MyComponent = () => {
   const columns = [
-    { id: 'name', header: 'Name' },
-    { id: 'age', header: 'Age' },
+    { id: "name", header: "Name" },
+    { id: "age", header: "Age" },
     // Add more columns as needed
   ];
 
   const data = [
-    { id: 1, name: 'John Doe', age: 28 },
-    { id: 2, name: 'Jane Smith', age: 34 },
+    { id: 1, name: "John Doe", age: 28 },
+    { id: 2, name: "Jane Smith", age: 34 },
     // Add more data as needed
   ];
 
@@ -57,16 +57,70 @@ const MyComponent = () => {
 - **TableCell**: Represents individual cells in the data grid.
 - **TableHeader**: Renders the header of the data grid.
 - **TableRow**: Represents individual rows in the data grid.
+- **ColumnManager**: Manages column visibility and order.
 
 ## Custom Hooks
 
-Gridular also provides custom hooks for managing various functionalities:
+Gridular provides custom hooks for managing various functionalities:
 
 - **useColumnResize**: For managing column resizing.
-- **useFiltering**: For managing filtering logic.
-- **usePagination**: For managing pagination logic.
-- **useRowSelection**: For managing row selection.
-- **useSorting**: For managing sorting logic.
+- **useGridPersistence**: For persisting grid preferences like - \*\*column widths and order.
+
+## Utility Functions
+
+Gridular provides several utility functions to help with styling and component customization:
+
+```typescript
+cn(...inputs: ClassValue[])
+```
+
+A utility function that combines multiple class names or conditional class expressions using clsx and tailwind-merge. This helps avoid className conflicts when using Tailwind CSS.
+
+```typescript
+import { cn } from "gridular";
+
+// Usage
+<div
+  className={cn(
+    "base-class",
+    isActive && "active-class",
+    isFocused ? "focused-class" : "unfocused-class"
+  )}
+>
+  Content
+</div>;
+```
+
+```typescript
+mergeStyles(tssStyles, tailwindClasses);
+```
+
+Combines TSS-React style objects with Tailwind CSS classes, making it easier to integrate both styling approaches.
+
+```typescript
+import { mergeStyles } from "gridular";
+
+// Usage
+const styles = mergeStyles(
+  { color: "#000", backgroundColor: "#fff" },
+  "p-4 rounded-md hover:bg-gray-100"
+);
+
+<div {...styles}>Content</div>;
+```
+
+## Parameters:
+
+-- tssStyles: A TSS-React style object (CSSObject)
+-- tailwindClasses: A string or array of strings containing -- Tailwind class names Returns an object with merged styles that can be spread into React components.
+
+## Theming
+
+Gridular includes a built-in theme provider that allows you to customize the appearance of your data grids:
+
+-- ThemeProvider: Context provider for styling your data grids.
+-- ThemeSwitcher: Component for toggling between light and dark themes.
+-- ThemeWrapper: Utility component for wrapping your components with theme context.
 
 ## Contributing
 
@@ -74,4 +128,4 @@ Contributions are welcome! Please open an issue or submit a pull request for any
 
 ## License
 
-This project is licensed under the MIT License. See the LICENSE file for details.
+This project is licensed under the MIT License. See the LICENSE file for details.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridular",
-  "version": "1.0.3",
+  "version": "1.2.0",
   "description": "A customizable data grid component for React.",
   "repository": {
     "type": "git",
@@ -49,6 +49,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/material": "^6.4.7",
+    "@radix-ui/react-context-menu": "^2.2.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-select": "^2.1.6",