diff --git a/examples/kitchen-sink/README.md b/examples/kitchen-sink/README.md index 1f20796..5ce3ae7 100644 --- a/examples/kitchen-sink/README.md +++ b/examples/kitchen-sink/README.md @@ -1,98 +1,4 @@ -# Pagination +# Kitchen Sink -- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination) +- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink) - `yarn` and `yarn start` to run and edit the example - -## Guide - -To add automatic client side pagination, use the `usePagination` hook: - -```diff -// Import React -import React from 'react' - -// Import React Table -import { - useTable, - useGroupBy, - useFilters, - useSortBy, - useExpanded, -+ usePagination, -} from 'react-table' - -// Create a component to render your table -function MyTable(props) { - // Use the useTable hook to create your table configuration - const instance = useTable( - props, - useGroupBy, - useFilters, - useSortBy, - useExpanded, -+ usePagination, - ) - - // Use the state and functions returned from useTable to build your UI - const { - getTableProps, - headerGroups, - rows, - getRowProps, - prepareRow, -+ pageOptions, -+ page, -+ state: [{ pageIndex, pageSize }], -+ gotoPage, -+ previousPage, -+ nextPage, -+ setPageSize, -+ canPreviousPage, -+ canNextPage, - } = instance - - // Render the UI for your table - return ( -
- - ... -
-+
-+ -+ -+
-+ Page{' '} -+ -+ {pageIndex + 1} of {pageOptions.length} -+ -+
-+
Go to page:
-+ { -+ const page = e.target.value ? Number(e.target.value) - 1 : 0 -+ gotoPage(page) -+ }} -+ /> -+ -+
-
- ) -} -```