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

npm install react-ctc
npm install bootstrap

Peer Dependencies

Make sure the following are installed in your project:

"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:

import 'bootstrap/dist/css/bootstrap.min.css';

Basic Usage

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 | 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 | 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 | 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