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