@xinosolutions/react-datatable

# @xinosolutions/react-datatable

A modern, feature-rich React DataTable component with search functionality, pagination, row selection, and customizable theming.


---

About XinoSolutions

XinoSolutions is a software development company dedicated to creating high-quality, developer-friendly solutions. We specialize in building modern React components and tools that help developers build better applications faster. Our commitment to excellence, clean code, and user experience drives everything we create.

This package is part of our open-source initiative to contribute valuable tools to the React ecosystem.

---

Features

- ✅ Real-time Search - Search across all columns with instant filtering
- ✅ Pagination - Full-featured pagination with customizable page sizes
- ✅ Row Selection - Checkbox and radio button selection support
- ✅ Customizable Columns - Multiple column types (text, number, HTML, custom render)
- ✅ Theme Customization - Customizable theme colors via CSS variables
- ✅ Responsive Design - Mobile-friendly and responsive layout
- ✅ Sticky Header - Header stays visible while scrolling
- ✅ Empty States - Beautiful empty state messages
- ✅ Accessibility - ARIA labels and keyboard navigation support
- ✅ TypeScript Ready - Works seamlessly with TypeScript projects
- ✅ Zero Dependencies - No external dependencies (except React)

---

Installation

``bash
npm install @xinosolutions/react-datatable
`

or

`bash
yarn add @xinosolutions/react-datatable
`

or

`bash
pnpm add @xinosolutions/react-datatable
`

---

Quick Start

`jsx
import React, { useState } from 'react';
import { DataTable } from '@xinosolutions/react-datatable';

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

const rows = [
{ id: 1, name: 'John Doe', email: 'john@example.com', role: 'Developer' },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Designer' },
{ id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Manager' },
];

const columns = [
{ key: 'id', label: 'ID' },
{ key: 'name', label: 'Name' },
{ key: 'email', label: 'Email' },
{ key: 'role', label: 'Role' },
];

return (
rows={rows}
columns={columns}
checkboxSelection={{
selected,
setSelected,
selectBy: 'id'
}}
/>
);
}

export default App;
`

---

Props

$3

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| rows | Array