@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.

✨ Features

• ⚛️ Built for React
• 🧩 Fully customizable columns
• 📝 Support for custom cell render
• 📦 Lightweight & easy to integrate
• 🛠 Written in TypeScript
• 🔁 Supports both ESM and CJS

📦 Installation

npm install @mkt-loitd/react-table-grid-custom
# or
yarn add @mkt-loitd/react-table-grid-custom
# 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' },
]

const data = [
  { id: 1, name: 'John Doe', email: '[email protected]', age: 28 },
  { id: 2, name: 'Jane Smith', email: '[email protected]', age: 32 },
]

export default function App() {
  return <ReactTableGridCustom columns={columns} data={data} rowKey="id" />
}
🧱 Column Definition
ts
Copy code
interface Column {
  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
ts
Copy code
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

You can fully customize the table using your own CSS:

css
Copy code
.react-table-grid {
  border: 1px solid #e5e7eb;
}

.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

dist/index.cjs.js – CommonJS

dist/index.d.ts – Type definitions

🧪 Compatibility
React >= 17

React DOM >= 17

Node >= 16

🛠 Development
bash
Copy code
npm install
npm run build
📄 License
MIT © mkt-loitd