React Table Grid Custom component
npm install @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.
---
- ⚛️ Built for React
- 🧩 Fully customizable columns
- 📝 Support for custom cell render
- 📦 Lightweight & easy to integrate
- 🛠 Written in TypeScript
- 🔁 Supports both ESM and CJS
---
```bash
npm install @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: 'john@example.com', age: 28 },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32 },
]
export default function App() {
return
}
🧱 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) => {value},
},
{
key: 'action',
title: 'Action',
render: (_, row) => (
),
},
]
📌 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