Rendering Priority:
`
Raw Data → accessorFn → Type Formatter → typeValue → Custom Cell → cellClass Wrapper → Final Output
`

When to use each approach:
- Use type only for standard formatting (95% of cases)
- Use type + cellClass for simple styling needs
- Use type + Cell when you need formatting AND custom logic
- Use Cell only for completely custom rendering

---

Examples

$3

`jsx
import React, { useState } from 'react';
import DataGrid from '@insticc/react-datagrid-2';

function UserGrid() {
const [selected, setSelected] = useState([]);

const columns = [
{ accessorKey: 'id', header: 'ID', type: 'integer' },
{ accessorKey: 'name', header: 'Name', type: 'textTitle' },
{ accessorKey: 'email', header: 'Email', type: 'email' },
{ accessorKey: 'role', header: 'Role', type: 'text' },
{ accessorKey: 'createdAt', header: 'Joined', type: 'date', isDateColumn: true },
];

const users = [
{ id: 1, name: 'John Doe', email: 'john@company.com', role: 'Admin', createdAt: '2024-01-15' },
{ id: 2, name: 'Jane Smith', email: 'jane@company.com', role: 'User', createdAt: '2024-02-20' },
{ id: 3, name: 'Bob Johnson', email: 'bob@company.com', role: 'Manager', createdAt: '2024-03-10' },
];

return (
columns={columns}
createRows={users}
rowKey="id"
selectData={setSelected}
pageSize={50}
itemsPerPage={[25, 50, 100]}
gridHeight={500}
/>
);
}
`

$3

`jsx
function ConferenceGrid() {
const [selected, setSelected] = useState([]);

const columns = [
{
accessorKey: 'acronym',
accessorFn: (row) => row.acronym ?? '', // Handle null/undefined
header: 'Acronym',
type: 'textTitle'
},
{
accessorKey: 'fullName',
accessorFn: (row) => ${row.shortName || ''} - ${row.year || ''}, // Combine fields
header: 'Conference Name',
type: 'text'
},
{
accessorKey: 'papers',
accessorFn: (row) => row.numberPapers?.value ?? 0, // Nested object with fallback
header: 'Papers',
type: 'integer'
},
{
accessorKey: 'averageRating',
accessorFn: (row) => row.ratings?.average ?? 0, // Nested with default
header: 'Avg Rating',
type: 'number'
},
{
accessorKey: 'status',
accessorFn: (row) => row.isActive ? 'Active' : 'Inactive', // Conditional
header: 'Status',
type: 'text'
},
{
accessorKey: 'organizers',
accessorFn: (row) => row.organizers?.map(o => o.name).join(', ') ?? 'N/A', // Array processing
header: 'Organizers',
type: 'text'
}
];

const conferences = [
{
id: 1,
acronym: 'ICEIS',
shortName: 'International Conference on Enterprise Information Systems',
year: 2025,
numberPapers: { value: 150, trend: 'up' },
ratings: { average: 4.5, count: 200 },
isActive: true,
organizers: [{ name: 'John Doe' }, { name: 'Jane Smith' }]
},
{
id: 2,
acronym: null, // Will be handled by accessorFn
shortName: 'Conference on AI',
year: 2024,
numberPapers: null, // Will default to 0
ratings: { average: 3.8, count: 50 },
isActive: false,
organizers: []
}
];

return (
columns={columns}
createRows={conferences}
rowKey="id"
selectData={setSelected}
gridHeight={600}
/>
);
}
`

$3

`jsx
function ProductGrid() {
const [selectedProducts, setSelectedProducts] = useState([]);
const [products, setProducts] = useState(initialProducts);

const handleDelete = (rows) => {
const ids = rows.map(r => r.productId);
if (window.confirm(Delete ${ids.length} product(s)?)) {
setProducts(prev => prev.filter(p => !ids.includes(p.productId)));
}
};

const handleEdit = (rows) => {
if (rows.length === 1) {
openEditModal(rows[0]);
}
};

const handleAddNew = () => {
openCreateModal();
};

const actions = [
{
name: 'Delete',
function: handleDelete,
tooltip: 'Delete selected products',
color: 'red',
icon: 'trash',
selectionMode: 'multi',
hasConfirmMessage: true,
confirmMessage: 'Are you sure you want to delete the selected products?'
},
{
name: 'Edit',
function: handleEdit,
tooltip: 'Edit product',
color: 'blue',
icon: 'edit',
selectionMode: 'single'
},
{
name: 'Add Product',
function: handleAddNew,
tooltip: 'Add new product',
color: 'green',
icon: 'plus',
selectionMode: 'always'
}
];

const columns = [
{ accessorKey: 'productId', header: 'ID', type: 'integer' },
{ accessorKey: 'name', header: 'Product Name', type: 'textTitle' },
{
accessorKey: 'price',
accessorFn: (row) => row.price ?? 0, // Ensure numeric value
header: 'Price',
type: 'currency'
},
{ accessorKey: 'stock', header: 'Stock', type: 'integer' },
{ accessorKey: 'category', header: 'Category', type: 'text' },
];

return (
columns={columns}
createRows={products}
rowKey="productId"
selectData={setSelectedProducts}
actions={actions}
hasExcelExport={true}
hasPdfExport={true}
gridHeight={600}
/>
);
}
`

$3

return (
columns={columns}
createRows={filteredTasks}
rowKey="id"
selectData={setSelected}
filterActions={filterActions}
gridHeight={600}
/>
);
}
`

$3

`jsx
function ProjectGrid() {
const [selectedItems, setSelectedItems] = useState([]);

const columns = [
{ accessorKey: 'name', header: 'Name', type: 'textTitle' },
{ accessorKey: 'status', header: 'Status', type: 'text' },
{ accessorKey: 'assignee', header: 'Assignee', type: 'text' },
{ accessorKey: 'dueDate', header: 'Due Date', type: 'date', isDateColumn: true },
];

const data = [
{
id: 1,
name: 'Project Alpha',
status: 'Active',
assignee: 'John Doe',
dueDate: '2025-06-30',
subRows: [
{ id: '1.1', name: 'Task 1: Design', status: 'Complete', assignee: 'Jane', dueDate: '2025-02-15' },
{ id: '1.2', name: 'Task 2: Development', status: 'In Progress', assignee: 'Bob', dueDate: '2025-04-30' },
{ id: '1.3', name: 'Task 3: Testing', status: 'Not Started', assignee: 'Alice', dueDate: '2025-06-15' }
]
},
{
id: 2,
name: 'Project Beta',
status: 'Planning',
assignee: 'Jane Smith',
dueDate: '2025-12-31',
subRows: [
{ id: '2.1', name: 'Task 1: Requirements', status: 'In Progress', assignee: 'John', dueDate: '2025-03-01' }
]
}
];

return (
columns={columns}
createRows={data}
rowKey="id"
selectData={setSelectedItems}
hasSubRows={true}
enableExpanding={true}
gridHeight={500}
/>
);
}
`

$3

`jsx
function LargeDataGrid() {
const [selectedRows, setSelectedRows] = useState([]);

// Custom cell with type support
const StatusCell = ({ typeValue, cell, row }) => {
const value = cell.getValue();
const getColor = (status) => {
switch (status) {
case 'active': return 'green';
case 'pending': return 'orange';
case 'error': return 'red';
default: return 'grey';
}
};

return (
color: getColor(value),
fontWeight: 'bold',
padding: '2px 8px',
borderRadius: '4px',
backgroundColor: ${getColor(value)}22
}}>
{typeValue || value}

);
};

const PriorityCell = ({ cell, row }) => {
const priority = cell.getValue();
const icons = {
high: '🔴',
medium: '🟡',
low: '🟢'
};

return (

{icons[priority]} {priority.toUpperCase()}

);
};

const getRowStyle = ({ row }) => {
const styles = {};

if (row.original.status === 'error') {
styles.backgroundColor = '#ffebee';
}

if (row.original.priority === 'high') {
styles.borderLeft = '3px solid red';
}

if (row.original.isArchived) {
styles.opacity = 0.5;
}

return styles;
};

const columns = [
{ accessorKey: 'id', header: 'ID', type: 'integer' },
{
accessorKey: 'status',
header: 'Status',
type: 'text',
Cell: StatusCell
},
{
accessorKey: 'priority',
header: 'Priority',
Cell: PriorityCell
},
{ accessorKey: 'name', header: 'Name', type: 'text' },
{
accessorKey: 'value',
accessorFn: (row) => row.value ?? 0, // Ensure numeric value for currency
header: 'Value',
type: 'currency'
},
{
accessorKey: 'progress',
accessorFn: (row) => row.progress ?? 0, // Ensure numeric value for percentage
header: 'Progress',
type: 'percentage'
},
{ accessorKey: 'updatedAt', header: 'Updated', type: 'datetime', isDateColumn: true },
];

// Generate large dataset
const largeDataset = Array.from({ length: 5000 }, (_, i) => ({
id: i + 1,
status: ['active', 'pending', 'error'][i % 3],
priority: ['high', 'medium', 'low'][i % 3],
name: Item ${i + 1},
value: Math.random() * 10000,
progress: Math.random(),
updatedAt: new Date(Date.now() - Math.random() 365 24 60 60 * 1000).toISOString(),
isArchived: i % 10 === 0
}));

return (
columns={columns}
createRows={largeDataset}
rowKey="id"
selectData={setSelectedRows}
enableVirtualization={true}
enableCompactStyleMode={true}
rowHeight={40}
fontSize={12}
gridHeight="calc(100vh - 200px)"
getRowStyle={getRowStyle}
pageSize={100}
itemsPerPage={[50, 100, 200, 500]}
/>
);
}
`

$3

`jsx
function AdvancedGrid() {
const [data, setData] = useState([]);
const [cacheLoading, setCacheLoading] = useState(false);
const [selectedRows, setSelectedRows] = useState([]);
const [visibleRowCount, setVisibleRowCount] = useState(0);

const refreshData = async () => {
setCacheLoading(true);
try {
const newData = await fetchLatestData();
setData(newData);
} catch (error) {
console.error('Failed to refresh data:', error);
} finally {
setCacheLoading(false);
}
};

const handleVisibleRowsChange = (rows) => {
setVisibleRowCount(rows.length);
console.log('Visible rows:', rows);
};

const exportCustom = () => {
console.log('Custom export logic');
};

const actions = [
{
name: 'Process',
function: (rows) => processSelectedRows(rows),
tooltip: 'Process selected items',
color: 'blue',
icon: 'cog',
selectionMode: 'multi'
}
];

const extraActions = [
{
function: exportCustom,
content: 'Custom Export',
tooltip: 'Export with custom format',
icon: 'file alternate outline'
}
];

const columns = [
{ accessorKey: 'id', header: 'ID', type: 'integer' },
{ accessorKey: 'name', header: 'Name', type: 'textTitle' },
{ accessorKey: 'status', header: 'Status', type: 'text' },
{
accessorKey: 'amount',
accessorFn: (row) => row.amount ?? 0, // Ensure numeric value
header: 'Amount',
type: 'currency'
},
{ accessorKey: 'createdAt', header: 'Created', type: 'datetime', isDateColumn: true },
];

return (
columns={columns}
createRows={data}
rowKey="id"
selectData={setSelectedRows}

// Actions
actions={actions}
extraActions={extraActions}

// Advanced features
enableGlobalFilter={true}
globalFilterFn="fuzzy"
enableColumnFilterModes={true}
enableFixedHeader={true}
enableFixedActions={true}

// Cache management
updateCache={refreshData}
cacheUpdateText="Refresh data from server"
cacheUpdating={cacheLoading}

// Callbacks
onVisibleRowsChange={handleVisibleRowsChange}

// Exports
hasExcelExport={true}
hasPdfExport={true}

// Help
gridHelper={{
title: 'Data Grid Help',
content: (


`jsx
function OrderGrid() {
const [orders, setOrders] = useState([]);
const [selected, setSelected] = useState([]);

// Disable completed and cancelled orders from selection
const getDisabledRows = () => {
return orders
.filter(order => ['completed', 'cancelled'].includes(order.status))
.map(order => order.orderId);
};

const getRowStyle = ({ row }) => {
const status = row.original.status;

switch (status) {
case 'pending':
return { backgroundColor: '#fff3cd' };
case 'processing':
return { backgroundColor: '#cfe2ff' };
case 'completed':
return { backgroundColor: '#d1e7dd', opacity: 0.7 };
case 'cancelled':
return { backgroundColor: '#f8d7da', opacity: 0.7 };
default:
return {};
}
};

const columns = [
{ accessorKey: 'orderId', header: 'Order ID', type: 'text' },
{ accessorKey: 'customer', header: 'Customer', type: 'textTitle' },
{
accessorKey: 'total',
accessorFn: (row) => row.total ?? 0, // Ensure numeric value
header: 'Total',
type: 'currency'
},
{ accessorKey: 'status', header: 'Status', type: 'text' },
{ accessorKey: 'orderDate', header: 'Order Date', type: 'datetime', isDateColumn: true },
];

return (
columns={columns}
createRows={orders}
rowKey="orderId"
selectData={setSelected}
disableRows={getDisabledRows()}
getRowStyle={getRowStyle}
gridHeight={600}
/>
);
}
`

---

API Reference

$3

`typescript
interface ColumnDefinition {
// Required
accessorKey: string; // Key identifier for the column
header: string; // Column header text

// Data Access (choose one)
// Option 1: Direct property access (default when no accessorFn)
// Option 2: Custom accessor function
accessorFn?: (row: Object) => any; // Function to extract/compute value from row

// Type & Rendering
type?: string; // Cell type for automatic formatting
Cell?: React.Component; // Custom cell renderer (receives typeValue)
cellClass?: string; // CSS class wrapper for cell content

// Filtering
enableColumnFilter?: boolean; // Default: true
enableColumnFilterModes?: boolean;// Default: true
filterFn?: string | function; // Default: 'contains' (or undefined for dates)

// Sorting
enableSorting?: boolean; // Default: true
sortingFn?: string | function; // Default: 'basic' (or custom for dates)
isDateColumn?: boolean; // Special date handling (default: false)

// Display
enableResizing?: boolean; // Default: true
grow?: boolean; // Column can grow (default: true)
enableClickToCopy?: boolean; // Default: false
enableColumnActions?: boolean; // Default: false

// Additional
locale?: string; // Locale for formatting (e.g., 'en-US')
onlyFlag?: boolean; // For countryFlag type
columnDef?: object; // Additional metadata
}
`

$3

`typescript
interface ActionObject {
// Required
name: string; // Button label
function: (selectedRows: Array, table?: Object) => void; // Click handler

// Display
tooltip?: string; // Hover tooltip
color?: 'blue' | 'red' | 'green' | 'yellow' | 'orange' | 'black' | 'grey' |
'teal' | 'brown' | 'violet' | 'purple' | 'olive' | 'pink';
icon?: string | React.Element; // Icon name or element

// Behavior
selectionMode?: 'single' | 'multi' | 'always';
confirmMessage?: string | React.Element;
hasConfirmMessage?: boolean;
disabled?: boolean;
visible?: boolean; // Default: true

// Toggle mode
toggle?: boolean;
active?: boolean;

// Other
key?: string; // Unique React key
}
`

$3

`typescript
interface DataRow {
[rowKey: string]: any; // Unique identifier (required)
[key: string]: any; // Other data fields

// Optional: For hierarchical data
subRows?: Array;
isSubRow?: boolean;
}
`

---

Performance Tips

$3

// Better - Pre-process data before passing to grid
const processedData = rawData.map(row => ({
...row,
computedValue: expensiveCalculation(row.data)
}));
`

$3

Solutions:
- Verify disableSelect={false} (this is the default)
- Ensure selectData callback is provided
- Check that rowKey matches your data's unique identifier property
- Verify rows aren't in the disableRows array

`jsx
// Correct configuration
rowKey="id" // Matches data[0].id
selectData={handleSelection} // Required callback
disableSelect={false} // Optional - default is false
disableRows={[]} // No disabled rows
/>
`

#### Issue: Date columns not sorting correctly

Symptoms: Dates sort alphabetically instead of chronologically

Solutions:
- Set isDateColumn={true} on date columns
- Ensure date values are in valid ISO 8601 format (YYYY-MM-DD or YYYY-MM-DDTHH:mm:ss)
- Check that date strings are parseable by JavaScript Date constructor

`jsx
// Correct date column configuration
{
accessorKey: 'createdAt',
header: 'Created Date',
type: 'date',
isDateColumn: true // Enables date-aware sorting
}

// Data format
const data = [
{ id: 1, createdAt: '2025-01-15' }, // ISO 8601 format
{ id: 2, createdAt: '2024-12-20' },
];
`

#### Issue: Fixed headers not working

Symptoms: Headers scroll with content instead of staying fixed

Solutions:
- Set enableFixedHeader={true} (default is true)
- Ensure gridHeight is set to a specific numeric value or CSS string
- Do not use gridHeight="fit-content" with fixed headers
- Check for CSS conflicts with grid-sticky-header class

`jsx
// Correct fixed header configuration
enableFixedHeader={true}
gridHeight={600} // Or "80vh", not "fit-content"
/>
`

#### Issue: Fixed actions toolbar not sticking

Symptoms: Action buttons scroll instead of staying at top

Solutions:
- Enable both enableFixedHeader={true} and enableFixedActions={true}
- Verify gridHeight is set to a specific value
- Check for CSS conflicts with grid-sticky-actions class

`jsx
enableFixedHeader={true}
enableFixedActions={true}
gridHeight={700}
/>
`

#### Issue: Selection state not syncing with parent component

Symptoms: External state doesn't match grid selection

Solutions:
- Use the selectedIds prop to control selection from parent
- Component automatically syncs when selectedIds prop changes
- Ensure rowKey values in selectedIds match data

`jsx
const [externalSelection, setExternalSelection] = useState([1, 5, 10]);

selectedIds={externalSelection} // Controlled selection
selectData={(rows) => {
const ids = rows.map(r => r.id);
setExternalSelection(ids);
}}
/>
`

#### Issue: Export buttons not appearing

Symptoms: Excel/PDF export buttons are not visible

Solutions:
- Set hasExcelExport={true} and/or hasPdfExport={true}
- Check that disableSideActions={false} (default)
- Ensure toolbar has space (not too many actions)
- Verify enableTopToolbar={true} (default)

`jsx
hasExcelExport={true}
hasPdfExport={true}
enableTopToolbar={true}
disableSideActions={false}
/>
`

#### Issue: Type formatter not working

Symptoms: Column values appear as raw data instead of formatted

Solutions:
- Verify column has type property defined
- Check that type value exists in DEFAULT_CELL_TYPES (e.g., 'text', 'date', 'currency', 'email')
- Ensure data values are in correct format for the type
- Check browser console for errors

`jsx
// Correct type configuration
{
accessorKey: 'price',
header: 'Price',
type: 'currency' // Must match a valid type
}
`

#### Issue: Custom Cell component not receiving typeValue

Symptoms: typeValue prop is undefined in custom Cell

Solutions:
- Verify column has both type AND Cell defined
- Check that type matches a key in DEFAULT_CELL_TYPES
- typeValue only exists when type formatter is applied

`jsx
// Correct configuration for typeValue
const CustomCell = ({ typeValue, cell }) => {
console.log(typeValue); // Will be defined
return

{
accessorKey: 'amount',
type: 'currency', // Required for typeValue
Cell: CustomCell // Will receive typeValue
}
`

#### Issue: accessorFn not being used for filtering/sorting

Symptoms: Filters and sorts use raw data instead of accessorFn result

Solutions:
- Verify accessorFn is defined correctly
- The returned value from accessorFn is what gets filtered/sorted
- For complex objects, ensure accessorFn returns a simple value

`jsx
// Bad - Returns object (hard to filter/sort)
accessorFn: (row) => ({ value: row.data })

// Good - Returns simple value
accessorFn: (row) => row.data?.value ?? 0
`

#### Issue: Virtualization causing scroll issues

Symptoms: Jerky scrolling, rows not rendering, blank spaces

Solutions:
- Ensure rowHeight is set accurately
- Don't use dynamic row heights with virtualization
- Check that enableVirtualization={true} is actually needed (only for 1000+ rows)
- Verify data doesn't change reference on every render

`jsx
// Good for virtualization
enableVirtualization={true}
rowHeight={40} // Fixed height
createRows={stableDataReference} // Don't recreate array
/>
`

#### Issue: Actions not enabling/disabling correctly

Symptoms: Action buttons stay disabled when rows are selected

Solutions:
- Check selectionMode setting ('single', 'multi', 'always')
- Verify disabled prop isn't set to true
- Ensure rows are actually being selected (check selectData callback)

`jsx
actions={[
{
name: 'Edit',
selectionMode: 'single', // Requires exactly 1 row
function: handleEdit,
disabled: false // Not manually disabled
}
]}
`

#### Issue: Hierarchical data (subRows) not working

Symptoms: SubRows don't expand or aren't selectable

Solutions:
- Set hasSubRows={true}
- Set enableExpanding={true} to show expand icons
- Ensure data has correct subRows structure
- SubRow IDs should follow pattern: "parentId.index"
`jsx
const hierarchicalData = [
{
id: 1,
name: 'Parent',
subRows: [
{ id: '1.1', name: 'Child 1' },
{ id: '1.2', name: 'Child 2' }
]
}
];

hasSubRows={true}
enableExpanding={true}
createRows={hierarchicalData}
/>
`

#### Issue: Cache update button not appearing

Symptoms: Cache/refresh button is not visible

Solutions:
- Provide updateCache function prop
- Optionally set cacheUpdateText for tooltip
- Button only appears when updateCache is defined

`jsx
updateCache={() => fetchLatestData()}
cacheUpdateText="Refresh from server"
cacheUpdating={isLoading}
/>
`

#### Issue: Row styles not applying

Symptoms: getRowStyle returns styles but they don't appear

Solutions:
- Check that returned object contains valid CSS properties
- Verify function is actually being called
- CSS specificity might be overriding - use !important if needed
- Check browser console for CSS errors

`jsx
getRowStyle={({ row }) => {
console.log('Styling row:', row.id); // Debug
return {
backgroundColor: row.original.isHighlighted ? '#fffacd !important' : 'white'
};
}}
`

#### Issue: Filters not working

Symptoms: Column filters don't filter data

Solutions:
- Verify enableColumnFilter={true} on columns (default)
- Check that filterFn is valid
- Ensure data values match filter input type
- If using accessorFn, ensure it returns filterable values

`jsx
{
accessorKey: 'status',
header: 'Status',
enableColumnFilter: true,
filterFn: 'contains' // or 'equals', 'startsWith', etc.
}

// With accessorFn
{
accessorKey: 'papers',
accessorFn: (row) => row.numberPapers?.value ?? 0, // Returns number for filtering
header: 'Papers',
type: 'integer'
}
`

---

Important Notes

$3

$3