react-ctc/README.md

A powerful and flexible React table component with Bootstrap 5 styling, sortable columns, pagination, dynamic rendering, and export options.

# React-CTC Table Component

A highly customizable React table component with support for Bootstrap 5.3, column filtering, dynamic headers, search, HTML rendering, and more.


## Installation

Install my-project with npm

```bash
npm install react-ctc
npm install bootstrap
```
    
## Peer Dependencies

Make sure the following are installed in your project:

```bash
"peerDependencies": {
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0",
  "bootstrap": "^5.3.0"
}
```
Import Bootstrap styles if not already globally included:
```bash
import 'bootstrap/dist/css/bootstrap.min.css';
```


## Basic Usage

```bash
import TableComponent from 'react-ctc';
import 'bootstrap/dist/css/bootstrap.min.css';

const data = [
  { name: "John", age: 28, role: "Developer" },
  { name: "Alice", age: 32, role: "Designer" }
];

const App = () => {
  return (
    <TableComponent
      data={data}
      hover={true}
      striped={true}
      bordered={true}
      className="my-custom-table"
      showColumns={['name', 'role']}
      replaceColumns={{ role: 'Position' }}
      customColumns={[
        { key: 'actions', value:<button onClick={() => alert("write your own action logic")}>View</button> }
      ]}
      renderHTML={false}
      showTableNav={true}
      title={{ text: "Team Members" }}
      showSearch={true}
      applySearchOnColumns={['name', 'role']}
    />
  );
};
```

## Props Overview

| Prop                  | Type                      | Description                                                                 |
|-----------------------|---------------------------|-----------------------------------------------------------------------------|
| `data`                | Array<Object>             | **Required.** Data to display in the table.                                 |
| `hover`               | Boolean                   | Enables hover effect on rows.                                               |
| `striped`             | Boolean                   | Displays striped rows.                                                      |
| `bordered`            | Boolean                   | Adds borders around each cell.                                              |
| `className`           | String                    | Adds custom CSS class to the table.                                         |
| `showColumns`         | Array<String>             | Displays only the specified columns (by key name).                          |
| `replaceColumns`      | Object                    | Renames column headers. `{ key: "New Name" }`                               |
| `customColumns`       | Array<{ key, value }>     | Adds new columns with custom render logic at the end.                       |
| `renderHTML`          | Boolean                   | Renders cell content as HTML.                                               |
| `showTableNav`        | Boolean                   | Displays a navigation bar above the table.                                  |
| `title`               | Object                    | Displays a table title. Use `text` or `textHTML`.                           |
| `showSearch`          | Boolean                   | Displays a search box over the table.                                       |
| `applySearchOnColumns`| Array<String>             | Restricts search to specified columns.                                      |
| `pagination`            | Object                           | Enables pagination. Takes `{ rowsPerPage, onNext, onPrev }` configuration.  |
| `pagination.rowsPerPage`| Number                           | Number of rows to display per page.                                         |
| `pagination.onNext`     | Function                         | Called when the "Next" button is clicked. Receives `{ current }`.           |
| `pagination.onPrev`     | Function                         | Called when the "Prev" button is clicked. Receives `{ current }`.           |

## 📌 Notes

If renderHTML is set to true, ensure that you trust the data being rendered to avoid XSS issues.

customColumns.value can be a string or a JSX function that receives the current row as an argument.

## License

ISC