@mkt-loitd/react-table-grid-custom 1.2.6 → 1.2.8

package/README.md

@@ -1,54 +1,42 @@
-@mkt-loitd/react-table-grid-custom
+# @mkt-loitd/react-table-grid-custom
 
-A flexible and customizable React Table Grid component built with TypeScript, designed for displaying tabular data with custom columns, layouts, and rendering logic.
+[![npm version](https://img.shields.io/npm/v/@mkt-loitd/react-table-grid-custom)](https://www.npmjs.com/package/@mkt-loitd/react-table-grid-custom)
+[![Downloads](https://img.shields.io/npm/dm/@mkt-loitd/react-table-grid-custom)](https://www.npmjs.com/package/@mkt-loitd/react-table-grid-custom)
+[![License](https://img.shields.io/npm/l/@mkt-loitd/react-table-grid-custom)](https://opensource.org/licenses/MIT)
 
-✨ Features
+A **flexible and customizable React Table Grid component** built with **TypeScript**, designed for displaying tabular data with custom columns, layouts, and rendering logic.
 
-⚛️ Built for React
+---
 
-🧩 Fully customizable columns
+## ✨ Features
 
-📝 Support for custom cell render
+- ⚛️ Built for React  
+- 🧩 Fully customizable columns  
+- 📝 Support for custom cell render  
+- 📦 Lightweight & easy to integrate  
+- 🛠 Written in TypeScript  
+- 🔁 Supports both ESM and CJS  
 
-📦 Lightweight & easy to integrate
+---
 
-🛠 Written in TypeScript
-
-🔁 Supports both ESM and CJS
-
-📦 Installation
-
-Using npm:
+## 📦 Installation
 
+```bash
 npm install @mkt-loitd/react-table-grid-custom
-
-
-Using yarn:
-
+# or
 yarn add @mkt-loitd/react-table-grid-custom
-
-
-Using pnpm:
-
+# or
 pnpm add @mkt-loitd/react-table-grid-custom
-
 🚀 Basic Usage
+tsx
+Copy code
 import React from 'react'
 import { ReactTableGridCustom } from '@mkt-loitd/react-table-grid-custom'
 
 const columns = [
-  {
-    key: 'name',
-    title: 'Name',
-  },
-  {
-    key: 'email',
-    title: 'Email',
-  },
-  {
-    key: 'age',
-    title: 'Age',
-  },
+  { key: 'name', title: 'Name' },
+  { key: 'email', title: 'Email' },
+  { key: 'age', title: 'Age' },
 ]
 
 const data = [
@@ -57,24 +45,20 @@ const data = [
 ]
 
 export default function App() {
-  return (
-    <ReactTableGridCustom
-      columns={columns}
-      data={data}
-      rowKey="id"
-    />
-  )
+  return <ReactTableGridCustom columns={columns} data={data} rowKey="id" />
 }
-
 🧱 Column Definition
+ts
+Copy code
 interface Column {
-  key: string
-  title: string
-  width?: number | string
-  render?: (value: any, row: any, rowIndex: number) => React.ReactNode
+  key: string                       // Column key (unique)
+  title: string                     // Column header title
+  width?: number | string           // Optional column width
+  render?: (value: any, row: any, rowIndex: number) => React.ReactNode // Custom cell render
 }
-
-Example with custom render:
+Example with custom render
+ts
+Copy code
 const columns = [
   {
     key: 'name',
@@ -89,7 +73,6 @@ const columns = [
     ),
   },
 ]
-
 📌 Props
 Prop	Type	Required	Description
 columns	Column[]	✅	Table column configuration
@@ -97,10 +80,11 @@ data	any[]	✅	Data source
 rowKey	string	✅	Unique key for each row
 className	string	❌	Custom CSS class
 style	CSSProperties	❌	Inline styles
-🎨 Styling
 
 You can fully customize the table using your own CSS:
 
+css
+Copy code
 .react-table-grid {
   border: 1px solid #e5e7eb;
 }
@@ -108,12 +92,9 @@ You can fully customize the table using your own CSS:
 .react-table-grid-row:hover {
   background-color: #f9fafb;
 }
-
-
 Or wrap it inside your design system (Tailwind, AntD, MUI, etc).
 
 📂 Build Output
-
 This package is built using tsup:
 
 dist/index.esm.js – ES Module
@@ -123,7 +104,6 @@ dist/index.cjs.js – CommonJS
 dist/index.d.ts – Type definitions
 
 🧪 Compatibility
-
 React >= 17
 
 React DOM >= 17
@@ -131,9 +111,9 @@ React DOM >= 17
 Node >= 16
 
 🛠 Development
+bash
+Copy code
 npm install
 npm run build
-
 📄 License
-
 MIT © mkt-loitd

package/dist/index.d.mts

@@ -172,7 +172,7 @@ interface IPayloadService {
 type IDispatchState<T> = Dispatch<SetStateAction<T>>;
 
 interface IExpandValue extends IPayloadService {
-    t?: TFunction<any, any>;
+    t?: TFunction<any, any> | any;
     setConfigSearch?: IDispatchState<ISetConfigPagination>;
     setSelectedRecords?: Dispatch<ReadonlySet<string>>;
     setIsShowEdit?: Dispatch<SetStateAction<boolean>>;

package/dist/index.d.ts

@@ -172,7 +172,7 @@ interface IPayloadService {
 type IDispatchState<T> = Dispatch<SetStateAction<T>>;
 
 interface IExpandValue extends IPayloadService {
-    t?: TFunction<any, any>;
+    t?: TFunction<any, any> | any;
     setConfigSearch?: IDispatchState<ISetConfigPagination>;
     setSelectedRecords?: Dispatch<ReadonlySet<string>>;
     setIsShowEdit?: Dispatch<SetStateAction<boolean>>;

package/dist/index.js

@@ -757,7 +757,7 @@ var TableStyleContextWapper = ({
   if (!isClient) {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children });
   }
-  const idWapper = externalId != null ? externalId : (0, import_react10.useId)();
+  const idWapper = externalId != null ? externalId : "12";
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {

package/dist/index.mjs

@@ -506,7 +506,7 @@ var ReactTableGridCustomPaginationClient = memo2(
 );
 
 // src/component/ui/Table/TableStyleContextWapper.tsx
-import { memo as memo3, useId as useId2 } from "react";
+import { memo as memo3 } from "react";
 
 // src/component/ui/ContextMenu/ContextMenu.tsx
 import { useCallback as useCallback4, useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
@@ -733,7 +733,7 @@ var TableStyleContextWapper = ({
   if (!isClient) {
     return /* @__PURE__ */ jsx9(Fragment3, { children });
   }
-  const idWapper = externalId != null ? externalId : useId2();
+  const idWapper = externalId != null ? externalId : "12";
   return /* @__PURE__ */ jsxs4(
     "div",
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mkt-loitd/react-table-grid-custom",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "React Table Grid Custom component",
   "license": "ISC",
   "private": false,