# react-table-context

> Table Context Manager

Latest version **0.0.56** (published 2023-05-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-table-context
pnpm add react-table-context
yarn add react-table-context
bun add react-table-context
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.56 |
| Published | 2023-05-25 |
| First published | 2023-02-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 26.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | AliGhaleyan |
| Maintainers | serjik |
| Keywords | react, typescript, table, react-table |

## Links

- npm: https://www.npmjs.com/package/react-table-context
- Repository: https://github.com/shakewellagency/react-table-context
- Homepage: https://github.com/shakewellagency/react-table-context#readme
- Issues: https://github.com/shakewellagency/react-table-context/issues
- npm.io page: https://npm.io/package/react-table-context

## Dependencies (1)

- [typescript](https://npm.io/package/typescript.md) ^4.9.5

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.0.56 (latest) — 2023-05-25
- 0.0.55 — 2023-05-25
- 0.0.54 — 2023-05-24
- 0.0.53 — 2023-03-28
- 0.0.52 — 2023-03-23
- 0.0.51 — 2023-03-23
- 0.0.50 — 2023-03-08
- 0.0.49 — 2023-03-08
- 0.0.48 — 2023-03-08
- 0.0.47 — 2023-03-08
- 0.0.46 — 2023-03-07
- 0.0.45 — 2023-03-07
- 0.0.44 — 2023-03-07
- 0.0.43 — 2023-03-07
- 0.0.42 — 2023-03-07
- … 36 more at https://npm.io/package/react-table-context/versions

## README

## React Table Context

You can create your custom table component with the help of this component. This component helps you manage and edit
table states.

Let us create and manage your table states. You just create the UI :)

#### Install

```
npm install react-table-context

yarn add react-table-context
```

### Usage:

Create your table component:

```tsx
import {TableProps, TableRecord, injectRouteParamsToValues} from "react-table-context";

const TableHeader: React.FC = () => {
  const {dispatch, state: {columns, sort}} = useTableContext();

  const handleOnClick = () => {
    const order = sort?.order == "asc" ? "desc" : "asc";
    dispatch({
      type: "set-sort",
      payload: {key: column.key as string, order}
    });
  };

  return <thead>
  <tr>
    {columns.map((column, key) => {
      if (column.type == "action") return <th/>;

      return <th onClick={handleOnClick}>{column.title}</th>;
    })}
  </tr>
  </thead>;
}

type Props<T extends TableRecord = TableRecord> = TableProps<T> & {
  data: T[],
  perPage?: number,
  total?: number;
  from?: number;
  to?: number;
};

const Table = <T extends TableRecord = TableRecord>(props: Props<T>) => {
  const {dispatch, state: {page, perPage, initialized}} = useTableContext<Content>();

  useEffect(() => {
    if (initialized) return;

    dispatch({
      type: "initialize",
      payload: {
        columns: props.columns,
        ...injectRouteParamsToValues({
          page,
          perPage: props.perPage || perPage,
        }),
      },
    });
  }, [initialized, dispatch]);

  useEffect(() => {
    if (props.data)
      dispatch({type: "set-data", payload: {data: props.data}});
  }, [props.data]);

  useEffect(() => {
    if (props.total && props.from && props.to) {
      dispatch({
        type: "set-pagination",
        payload: {
          total: props.total,
          from: props.from,
          to: props.to,
        },
      });
    }
  }, [props.total, props.from, props.to]);

  return <table>
    <TableHeader/>

    {/* ... */}
  </table>;
};

export default Table;
```

Content list table:

```tsx
import {TableColumnType, useTableContext} from "react-table-context";

const columns: TableColumnType<Content>[] = [
  {title: "Title", key: "title", dataIndex: "title"},
];

const ContentListTable: React.Fc = () => {
  const {state: {sort, filters, initialized}} = useTableContext<Content>();
  const contentQuery = useContentsQuery({sort, filters, enabled: initialized});

  return <Table data={contentQuery.data ?? []} columns={columns}/>;
};

export default ContentListTable;
```

Use content list table:

```tsx
<TableContextProvider>
  <ContentListTable/>
</TableContextProvider>
```

#### Use Table Context:

```tsx
// T is your data type
const {state, dispatch} = useTableContext<T>();
```

### Props

| Name         | Type                                                                                                                       | Description                                                             |
|--------------|----------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------|
| columns      | Array of `type TableColumnType<T extends TableRecord> = { title: string; key: keyof T; dataIndex: keyof T; }` | `key` and `dataIndex` should be `keyof T`                               |

### State

> **Note:** The state includes all props

| Name          | Type                                                                                                                 | Description                                                     |
|---------------|----------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------|
| data          | Array of `type TableRecord = { id: number } & Record<string, unknown>`                                               | `TableRecord` is default type. you should instance of `TableRecord` |
| selected      | `number[]` or `undefined`                                                                                            | Selected rows ids                                               |
| isAllSelected | `boolean`                                                                                                            | If all rows are selected it should be `true`                    |
| sort          | `type TableSortType<T extends TableRecord> = { key: keyof T; order: TableSortOrder; }`                               | Sort state type. `TableSortOrder` is `"asc" or "desc"`          |
| filters       | Array of `type TableFilterType<T extends TableRecord> = { key: keyof T; value: string or Record<string, unknown>; }` |                                                                 |
| page          | `number`                                                                                                             | Current page number. Is optional.                               |
| perPage       | `number or undefined`                                                                                                | Page size number. Is optional.                       |
| total         | `number or undefined`                                                                                                | Number of all rows. Is optional.                                    |
| from          | `number or undefined`                                                                                                |                                                                     |
| to            | `number or undefined`                                                                                                |                                                                     |

### Actions

| Type              | Payload                                                  |
|-------------------|----------------------------------------------------------|
| set-data          | `{ data: TableRecord[], selectableItemIds?: number[] }`  |
| set-selected      | `{ ids: number[] }`                                      |
| toggle-selected   | `{ id: number }`                                         |
| toggle-select-all |                                                          |
| set-sort          | `TableSortType`                                          |
| set-filter        | `TableFilterType<T extends TableRecord = TableRecord>`   |
| set-filters       | `TableFilterType<T extends TableRecord = TableRecord>[]` |
| go-to-page        | `{ page: number }`                                       |
| next-page         |                                                          |
| prev-page         |                                                          |
| set-pagination    | `{ page?: number; perPage?: number; total?: number, from?: number; to?: number }`  |

---
_Source: https://npm.io/package/react-table-context · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._