maticz-table

A customizable and feature-rich React table component with built-in support for pagination, sorting, exporting, and more.

✨ Key Features

• Declarative Configuration
• Built-in and Configurable:
  • Sorting
  • Pagination
  • Striped Rows
  • Highlight On Hover
  • Pointer On Hover
  • totalCount Support
  • Search
  • Export to CSV, PDF, Excel
• Accessibility Friendly
• Responsive Design

⚙️ Requirements

• React: 18.2.0
• Node.js: 20.18.1

📦 Installation

npm install maticz-table



## 🚀 Usage

```jsx
import React from 'react';
import { MaticzTable } from 'maticz-table';

const columns = [
  {
    name: 'ID',
    selector: (row,rownumber) => rownumber,
    sortable: true,
    serialNumber: true,
  },
  {
    name: 'Name',
    selector: row => row.name,
    sortable: true,
  },
  {
    name: "Dept",
    selector: row => row.dept,
    selectorKey: 'dept', // Custom Sorting Option
    download: true, // Particular column download for csv, pdf and excel
  }
];

const data = [
  { id: 1, name: 'Mrunal Thakur' },
  { id: 2, name: 'Andrea Jeremiah' },
];

function App() {
  return (
    <MaticzTable
      data={data}
      column={columns}
      striped
      highlightOnHover
      pointerOnHover
      pagination
      responsive
      search
      downloadCSV
      downloadPDF
      downloadExcel
    />
  );
}

export default App;




## Props

| **Property**       | **Type**    | **Description**                                                                                |
| ------------------ | ----------- | ---------------------------------------------------------------------------------------------- |
| `data`             | `Array`     | Data array to render in the table.                                                             |
| `column`           | `Array`     | Column configuration array.                                                                    |
| `responsive`       | `Boolean`   | Makes the table horizontally scrollable on smaller screens.                                    |
| `striped`          | `Boolean`   | Applies stripe color to odd rows.                                                              |
| `highlightOnHover` | `Boolean`   | Highlights rows on hover.                                                                      |
| `fixedHeader`      | `Boolean`   | Makes the header fixed when scrolling.                                                         |
| `pointerOnHover`   | `Boolean`   | Shows pointer cursor on hover.                                                                 |
| `noDataComponent`  | `Component` | A custom component to display when no data is available.                                       |
| `sortFunction`     | `Function`  | Custom sort function: `(rows, field, direction) => []`. **Must return a new array reference.** |
| `search`           | `Boolean`   | Allows user to search/filter rows.                                                             |
| `downloadCSV`      | `Boolean`   | Enables downloading table data as `.csv`.                                                      |
| `downloadPDF`      | `Boolean`   | Enables downloading table data as `.pdf`.                                                      |
| `downloadExcel`    | `Boolean`   | Enables downloading table data as `.excel`.                                                    |
| `onServerDownload` | `Function`  | Custom logic for downloading data: `(fileType)`.                                               |
| `pagination`       | `Boolean`   | Enables pagination. For server-side, use `paginationServer`.                                   |
| `exportFilename`   | `String`    | Custom file name, use `exportFilename`.                                                        |
| `onPageChange`     | `Function`  | Custom per page items: `(value, itemsPerPage, sortBy, sortOrder)`.                             |
| `onSearchChange`   | `Function`  | Custom search data values: `(searchValue)`.                                                    |
| `download`         | `Boolean `  | Custom download options.                                                                       |
| `selectorKey`      | `String `   | Custom sorting.                                                                                |
| `serialNumber`     | `Boolean`   | Serial Number.                                                                                 |