react-table-context v0.0.56

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:

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:

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:

<TableContextProvider>
  <ContentListTable/>
</TableContextProvider>

Use Table Context:

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

Props

State

Note: The state includes all props

Actions