](https://codesandbox.io/s/interesting-heyrovsky-jyvyci?file=/src/App.js)
## Install
```bash
npm i @p.aleks/react-grid-table
```
## Usage
By default, the table is fully featured even with just a basic configuration of rows and columns.
**Example:**
[](https://codesandbox.io/s/react-grid-table-usage-forked-igcm19?file=/src/App.js)
```JSX
import React from "react";
import GridTable from '@p.aleks/react-grid-table';
// custom cell component
const Username = ({ tableManager, value, field, data, column, colIndex, rowIndex }) => {
return (
](https://codesandbox.io/s/react-grid-table-components-forked-rtcx1d?file=/src/CustomHeader.js)
```JSX
const Header = ({tableManager}) => {
const { searchApi, columnsVisibilityApi, columnsApi } = tableManager;
const { searchText, setSearchText } = searchApi;
const { toggleColumnVisibility } = columnsVisibilityApi;
const { columns } = columnsApi;
return (
](https://codesandbox.io/s/frosty-benz-0sljxx?file=/src/App.js)
```JSX
export const SyncedTable = () => {
const rows = getRows();
const columns = getColumns();
return (
](https://codesandbox.io/s/react-grid-table-async-forked-p0otpl?file=/src/App.js)
```JSX
export const AsyncUncontrolledTable = () => {
const columns = getColumns();
const onRowsRequest = async (requestData, tableManager) => {
const response = await fetch(`app/api/rows`, {
method: 'post',
body: {
from: requestData.from,
to: requestData.to,
searchText: requestData.searchText,
sort: requestData.sort,
},
}).then(response => response.json()).catch(console.warn);
if(!response?.items) return;
return {
rows: response.items,
totalRows: response.totalItems
};
}
return (
](https://codesandbox.io/s/react-grid-table-async-controlled-forked-mmjhqx?file=/src/App.js)
```JSX
export const AsyncControlledTable = () => {
const columns = getColumns();
let [rows, setRows] = useState();
let [totalRows, setTotalRows] = useState();
const onRowsRequest = async (requestData, tableManager) => {
const response = await fetch(`app/api/rows`, {
method: 'post',
body: {
from: requestData.from,
to: requestData.to,
searchText: requestData.searchText,
sort: requestData.sort,
},
}).then(response => response.json()).catch(console.warn);
if(!response?.items) return;
return {
rows: response.items,
totalRows: response.totalItems
};
}
return (
](https://codesandbox.io/s/react-grid-table-async-managed-forked-clc7bx?file=/src/App.js)
```JSX
const controller = new AbortController();
export const AsyncManagedTable = () => {
const columns = getColumns();
let rowsRef = useRef([]);
let [totalRows, setTotalRows] = useState();
const onRowsRequest = async (requestData, tableManager) => {
const response = await fetch(`app/api/rows`, {
method: 'post',
body: {
from: requestData.from,
to: requestData.to,
searchText: requestData.searchText,
sort: requestData.sort,
},
signal: controller.signal,
}).then(response => response.json()).catch(console.warn);
if(!response?.items) return;
rowsRef.current = tableManager.asyncApi.mergeRowsAt(rowsRef.current, response.items, requestData.from);
setTotalRows(response.totalItems);
}
const onRowsReset = () => {
rowsRef.current = [];
setTotalRows();
controller.abort();
}
return (
](https://codesandbox.io/s/react-grid-table-row-edit-forked-qip068?file=/src/App.js)
```JSX
// state
const [rowsData, setRows] = useState(MOCK_DATA);
// 'editRowId' can also be controlled.
// if using controlled state, you can call your 'setEditRowId' instead of 'tableManager.rowEditApi.setEditRowId' to set it directly on your state.
// the table will typicaly call 'onEditRowIdChange' to reset it if 'searchText', 'sort' or 'page' has changed.
// const [editRowId, setEditRowId] = useState(null)
// columns
let columns = [
...,
{
id: 'my-buttons-column',
width: 'max-content',
pinned: true,
sortable: false,
resizable: false,
cellRenderer: ({ tableManager, value, data, column, colIndex, rowIndex }) => (
),
editorCellRenderer: ({ tableManager, value, data, column, colIndex, rowIndex, onChange }) => (