Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README.md #1

Merged
merged 1 commit into from
Oct 23, 2024
Merged

Update README.md #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 60 additions & 38 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,42 @@
![preview](https://raw.githubusercontent.com/barzin144/react-custable/main/.storybook/react-custable.png)

### This component will suitable for you if
# React CusTable

## You want
![preview](https://raw.githubusercontent.com/barzin144/react-custable/main/.storybook/react-custable.png)

> a selectable react table ?
**React CusTable** is a versatile and customizable table component for React that supports selectable rows, custom cell rendering, and pagination.

> to render a component inside the table cell ?
## Features

> a table with beautiful pagination?
- Selectable rows with callback functions
- Customizable components within table cells
- Built-in pagination support
- Sorting capabilities with customizable sort functions

## Run component in storybook
## When to Use

First clone the source then run
or visit storybook online [Here](https://barzin144.github.io/react-custable).
This component is ideal if you need:

```bash
npm start
```
- A selectable React table
- Custom components rendered inside table cells
- Beautiful, built-in pagination for large datasets

## Installation

## Install via NPM:
To install via NPM, run:

```bash
npm install --save react-custable
```

## Usage
## Usage Example

Just two variable is needed, column and data
You'll need to provide two variables: `columns` and `data`.

```javascript
import { Table } from 'react-custable';

//the fieldName should be as same as data's key
const column = [
// the fieldName should match the keys of your data
const columns = [
{ fieldName: 'name', title: 'Name', width: '180px', sortable: true },
{ fieldName: 'email', title: 'Email', width: '180px', sortable: true },
];
Expand All @@ -42,41 +45,60 @@ const data = [
{ id: '1', name: 'name one', email: '[email protected]' },
{ id: '2', name: 'name two', email: '[email protected]' },
];

<div className="App">
<Table columns={columns} data={data} />
</div>;
```

## Column Options

| Option | Type | Description |
| :---------: | :-----------------------------: | :---------------------------------------------------------------------------: |
| fieldName\* | string | data key |
| title\* | string | column header title |
| width | string(px) | column width (Default is auto) |
| fixed | string ('left' or 'right') | if you want to fixed the column (only work for first column or last column) |
| sortable | boolean | is column sortable (Default is false), string sort |
| sortFunc | ( a , b ) => number | sort function for column //return -1 when a < b , 1 when a > b , 0 when a = b |
| render | (row: T, index: number) => Cell | for rendering custom component in cell |
| Option | Type | Description |
| :-----------: | :-----------------: | :-----------------------------------------------------------------------------------: |
| fieldName\* | string | Key corresponding to your data object |
| title\* | string | The header title for the column |
| width | string(px) | Width of the column (default is auto-width) |
| fixed | string ('left' or 'right') | Fixed position for the column (works for first or last column only) |
| sortable | boolean | Enable sorting for the column (default is false) |
| sortFunc | (a, b) => number | Sorting function (return -1 for a < b, 1 for a > b, and 0 for a = b) |
| render | (row: T, index: number) => Cell | Function to render a custom component inside the cell |

### Cell
### Cell Type

```javascript
type Cell = {
value: React.ReactNode,
props: { [key: string]: string }, //props will be applied to td elemenet like colspan
props: { [key: string]: string }, // props applied to the <td> element, such as colspan
};
```

## Table Options

| Option | Type | Description |
| :---------------: | :-------------------------------------------------------------: | :--------------------------------------------------: |
| column\* | Column[] | array of columns |
| data\* | { id:string, ... }[] | array of data |
| selectRowHandler | (selectedRowIds: string[]) => void | the callback function will receiver selected row IDs |
| selectedRowKeys | string[] | default value for selected rows |
| pagination | { currentPage: number; totalCount: number; pageLimit: number; } | values for table pagination |
| pageChangeHandler | (pageNumner: number) => void | the callback for handle page changes |
| rowClickHandler | (row: Row) => void | the callback for handle row click |
| showLoading | boolean | show spinner over table |
| Option | Type | Description |
| :-----------------: | :-------------------------------: | :-------------------------------------------------------------------------: |
| columns\* | Column[] | Array of columns |
| data\* | { id: string, ... }[] | Array of row data |
| selectRowHandler | (selectedRowIds: string[]) => void | Callback triggered when row selection changes (returns selected row IDs) |
| selectedRowKeys | string[] | Default selected row IDs |
| pagination | { currentPage: number; totalCount: number; pageLimit: number; } | Pagination options, including current page, total item count, and page limit |
| pageChangeHandler | (pageNumber: number) => void | Callback for handling page changes |
| rowClickHandler | (row: Row) => void | Callback for handling row clicks |
| showLoading | boolean | Displays a spinner overlay when data is loading |

## Try it in Storybook

You can explore and test this component in Storybook:

- Visit the [online Storybook](https://barzin144.github.io/react-custable)
- Or run it locally by cloning the repository and running the following commands:

```bash
git clone https://github.com/barzin144/react-custable.git
cd react-custable
npm install
npm start
```

## Contributing

We welcome contributions! Feel free to open issues or submit pull requests.
Loading