@mkt-loitd/react-table-grid-custom 1.0.9 → 1.1.5

package/README.md

@@ -1,164 +1,139 @@
-📦 React Table Grid Custom
+@mkt-loitd/react-table-grid-custom
 
-A powerful, flexible React Table component built on top of react-data-grid, designed for Next.js and TypeScript projects.
-
-Supports pagination, sorting, row selection, context menu, column visibility, and Mantine UI.
+A flexible and customizable React Table Grid component built with TypeScript, designed for displaying tabular data with custom columns, layouts, and rendering logic.
 
 ✨ Features
 
-✅ Built on react-data-grid
-
-✅ 100% TypeScript
-
-✅ Pagination & sorting
+⚛️ Built for React
 
-✅ Row selection (checkbox)
+🧩 Fully customizable columns
 
-✅ Context menu (right click)
+📝 Support for custom cell render
 
-✅ Show / hide columns
+📦 Lightweight & easy to integrate
 
-✅ Mantine UI integration
+🛠 Written in TypeScript
 
-✅ Optimized for Next.js 13+ (App Router & Pages Router)
+🔁 Supports both ESM and CJS
 
-✅ ESM + CJS support
+📦 Installation
 
-✅ Tree-shakeable (sideEffects: false)
+Using npm:
 
-📦 Installation
 npm install @mkt-loitd/react-table-grid-custom
 
 
-or
+Using yarn:
 
 yarn add @mkt-loitd/react-table-grid-custom
 
 
-or
+Using pnpm:
 
 pnpm add @mkt-loitd/react-table-grid-custom
 
-🔗 Repository
-
-👉 GitHub:
-https://github.com/loitd140201/react-table
-
-⚠️ Peer Dependencies
-
-Make sure your project already has:
-
-react >= 18
-react-dom >= 18
-next >= 13
-
-
-These packages are required but not bundled.
-
 🚀 Basic Usage
-'use client'
-
+import React from 'react'
 import { ReactTableGridCustom } from '@mkt-loitd/react-table-grid-custom'
-import type { TColumnsTable } from '@mkt-loitd/react-table-grid-custom'
 
-const columns: TColumnsTable<any> = [
-  { key: 'id', name: 'ID' },
-  { key: 'name', name: 'Name' },
-  { key: 'email', name: 'Email' }
+const columns = [
+  {
+    key: 'name',
+    title: 'Name',
+  },
+  {
+    key: 'email',
+    title: 'Email',
+  },
+  {
+    key: 'age',
+    title: 'Age',
+  },
 ]
 
 const data = [
-  { id: 1, name: 'John', email: 'john@gmail.com' },
-  { id: 2, name: 'Jane', email: 'jane@gmail.com' }
+  { id: 1, name: 'John Doe', email: 'john@example.com', age: 28 },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32 },
 ]
 
-export default function Example() {
+export default function App() {
   return (
-    <div style={{ height: 400 }}>
-      <ReactTableGridCustom
-        columns={columns}
-        data={data}
-        page={1}
-        pageSize={10}
-        total={data.length}
-      />
-    </div>
+    <ReactTableGridCustom
+      columns={columns}
+      data={data}
+      rowKey="id"
+    />
   )
 }
 
-🧩 Main Component
-ReactTableGridCustom<T>
-import type { IReactTableGridCustom } from '@mkt-loitd/react-table-grid-custom'
-
-Props
-Prop	Type	Description
-columns	TColumnsTable<T>	Column definitions
-data	T[]	Table data
-page	number	Current page
-pageSize	number	Records per page
-total	number	Total records
-onChange	(page: number) => void	Page change callback
-selectedRows	ReadonlySet<Key>	Selected rows
-fetching	boolean	Show loading overlay
-hiddenPagination	boolean	Hide pagination
-hiddenSTT	boolean	Hide index (STT) column
-classNameWapperTable	string	Wrapper table class
-classNamePaginationTable	string	Pagination wrapper class
-🧩 Context Menu Wrapper
-TableStyleContextWapper
-import {
-  TableStyleContextWapper,
-  type TableStyleWapperProps
-} from '@mkt-loitd/react-table-grid-custom'
-
-Example
-<TableStyleContextWapper
-  clsTablecustom="h-full"
-  renderContext={{
-    renderData: true,
-    onClick: (key, row) => {
-      console.log(key, row)
-    }
-  }}
->
-  <ReactTableGridCustom {...props} />
-</TableStyleContextWapper>
+🧱 Column Definition
+interface Column {
+  key: string
+  title: string
+  width?: number | string
+  render?: (value: any, row: any, rowIndex: number) => React.ReactNode
+}
+
+Example with custom render:
+const columns = [
+  {
+    key: 'name',
+    title: 'Name',
+    render: (value) => <strong>{value}</strong>,
+  },
+  {
+    key: 'action',
+    title: 'Action',
+    render: (_, row) => (
+      <button onClick={() => console.log(row)}>View</button>
+    ),
+  },
+]
 
+📌 Props
+Prop	Type	Required	Description
+columns	Column[]	✅	Table column configuration
+data	any[]	✅	Data source
+rowKey	string	✅	Unique key for each row
+className	string	❌	Custom CSS class
+style	CSSProperties	❌	Inline styles
 🎨 Styling
 
-Built with Mantine UI
+You can fully customize the table using your own CSS:
 
-Fully compatible with Tailwind CSS
+.react-table-grid {
+  border: 1px solid #e5e7eb;
+}
 
-Uses default styles from react-data-grid
+.react-table-grid-row:hover {
+  background-color: #f9fafb;
+}
 
-import 'react-data-grid/lib/styles.css'
 
-📁 Package Structure
-dist/
-README.md
+Or wrap it inside your design system (Tailwind, AntD, MUI, etc).
 
-🛠 Development
-npm run dev
+📂 Build Output
 
+This package is built using tsup:
 
-Build package:
+dist/index.esm.js – ES Module
 
-npm run build
+dist/index.cjs.js – CommonJS
 
+dist/index.d.ts – Type definitions
 
-Test locally:
+🧪 Compatibility
 
-npm pack
+React >= 17
 
-📄 License
+React DOM >= 17
 
-ISC © LoiTD
+Node >= 16
 
-💬 Support
+🛠 Development
+npm install
+npm run build
 
-🐞 Issues:
-https://github.com/loitd140201/react-table/issues
+📄 License
 
-📦 Repository:
-https://github.com/loitd140201/react-table
+MIT © mkt-loitd

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mkt-loitd/react-table-grid-custom",
-  "version": "1.0.9",
+  "version": "1.1.5",
   "description": "React Table Grid Custom component",
   "license": "ISC",
   "private": false,
@@ -25,7 +25,7 @@
   "scripts": {
     "dev": "tsup src/index.ts --watch --format esm,cjs --dts",
     "build": "tsup src/index.ts --format esm,cjs --dts",
-    "prepublishOnly": "npm run build",
+    "prebuild": "node scripts/prebuild.js",
     "release:patch": "npm version patch --no-git-tag-version"
   },
   "peerDependencies": {