-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(usepagination): pageOptions calculate correctly, added pagination ex
- Loading branch information
1 parent
116f5cd
commit a7a95b2
Showing
18 changed files
with
10,777 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"presets": ["react-app"], | ||
"plugins": ["styled-components"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
SKIP_PREFLIGHT_CHECK=true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"extends": ["react-app", "prettier"], | ||
"rules": { | ||
// "eqeqeq": 0, | ||
// "jsx-a11y/anchor-is-valid": 0 | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
||
# dependencies | ||
/node_modules | ||
/.pnp | ||
.pnp.js | ||
|
||
# testing | ||
/coverage | ||
|
||
# production | ||
/build | ||
|
||
# misc | ||
.DS_Store | ||
.env.local | ||
.env.development.local | ||
.env.test.local | ||
.env.production.local | ||
|
||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
const path = require('path') | ||
const resolveFrom = require('resolve-from') | ||
|
||
const fixLinkedDependencies = config => { | ||
config.resolve = { | ||
...config.resolve, | ||
alias: { | ||
...config.resolve.alias, | ||
react$: resolveFrom(path.resolve('node_modules'), 'react'), | ||
'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'), | ||
}, | ||
} | ||
return config | ||
} | ||
|
||
const includeSrcDirectory = config => { | ||
config.resolve = { | ||
...config.resolve, | ||
modules: [path.resolve('src'), ...config.resolve.modules], | ||
} | ||
return config | ||
} | ||
|
||
module.exports = [ | ||
['use-babel-config', '.babelrc'], | ||
['use-eslint-config', '.eslintrc'], | ||
fixLinkedDependencies, | ||
// includeSrcDirectory, | ||
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and Rescripts. | ||
|
||
You can: | ||
|
||
- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic) | ||
- `yarn` and `yarn start` to run and edit the example |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
{ | ||
"private": true, | ||
"scripts": { | ||
"start": "rescripts start", | ||
"build": "rescripts build", | ||
"test": "rescripts test", | ||
"eject": "rescripts eject" | ||
}, | ||
"dependencies": { | ||
"namor": "^1.1.2", | ||
"react": "^16.8.6", | ||
"react-dom": "^16.8.6", | ||
"react-scripts": "3.0.1", | ||
"react-table": "next", | ||
"styled-components": "^4.3.2" | ||
}, | ||
"devDependencies": { | ||
"@rescripts/cli": "^0.0.11", | ||
"@rescripts/rescript-use-babel-config": "^0.0.8", | ||
"@rescripts/rescript-use-eslint-config": "^0.0.9", | ||
"babel-eslint": "10.0.1" | ||
}, | ||
"browserslist": { | ||
"production": [ | ||
">0.2%", | ||
"not dead", | ||
"not op_mini all" | ||
], | ||
"development": [ | ||
"last 1 chrome version", | ||
"last 1 firefox version", | ||
"last 1 safari version" | ||
] | ||
} | ||
} |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
<meta name="theme-color" content="#000000" /> | ||
<!-- | ||
manifest.json provides metadata used when your web app is installed on a | ||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ | ||
--> | ||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> | ||
<!-- | ||
Notice the use of %PUBLIC_URL% in the tags above. | ||
It will be replaced with the URL of the `public` folder during the build. | ||
Only files inside the `public` folder can be referenced from the HTML. | ||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will | ||
work correctly both with client-side routing and a non-root public URL. | ||
Learn how to configure a non-root public URL by running `npm run build`. | ||
--> | ||
<title>React App</title> | ||
</head> | ||
<body> | ||
<noscript>You need to enable JavaScript to run this app.</noscript> | ||
<div id="root"></div> | ||
<!-- | ||
This HTML file is a template. | ||
If you open it directly in the browser, you will see an empty page. | ||
You can add webfonts, meta tags, or analytics to this file. | ||
The build step will place the bundled scripts into the <body> tag. | ||
To begin the development, run `npm start` or `yarn start`. | ||
To create a production bundle, use `npm run build` or `yarn build`. | ||
--> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
{ | ||
"short_name": "React App", | ||
"name": "Create React App Sample", | ||
"icons": [ | ||
{ | ||
"src": "favicon.ico", | ||
"sizes": "64x64 32x32 24x24 16x16", | ||
"type": "image/x-icon" | ||
} | ||
], | ||
"start_url": ".", | ||
"display": "standalone", | ||
"theme_color": "#000000", | ||
"background_color": "#ffffff" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,213 @@ | ||
import React from 'react' | ||
import styled from 'styled-components' | ||
import { useTable, usePagination } from 'react-table' | ||
|
||
import makeData from './makeData' | ||
|
||
const Styles = styled.div` | ||
padding: 1rem; | ||
table { | ||
border-spacing: 0; | ||
border: 1px solid black; | ||
tr { | ||
:last-child { | ||
td { | ||
border-bottom: 0; | ||
} | ||
} | ||
} | ||
th, | ||
td { | ||
margin: 0; | ||
padding: 0.5rem; | ||
border-bottom: 1px solid black; | ||
border-right: 1px solid black; | ||
:last-child { | ||
border-right: 0; | ||
} | ||
} | ||
} | ||
.pagination { | ||
padding: 0.5rem; | ||
} | ||
` | ||
|
||
function Table({ columns, data }) { | ||
// Use the state and functions returned from useTable to build your UI | ||
const { | ||
getTableProps, | ||
headerGroups, | ||
prepareRow, | ||
page, // Instead of using 'rows', we'll use page, | ||
// which has only the rows for the active page | ||
|
||
// The rest of these things are super handy, too ;) | ||
canPreviousPage, | ||
canNextPage, | ||
pageOptions, | ||
pageCount, | ||
gotoPage, | ||
nextPage, | ||
previousPage, | ||
setPageSize, | ||
state: [{ pageIndex, pageSize }], | ||
} = useTable( | ||
{ | ||
columns, | ||
data, | ||
}, | ||
usePagination | ||
) | ||
|
||
// Render the UI for your table | ||
return ( | ||
<> | ||
<pre> | ||
<code> | ||
{JSON.stringify( | ||
{ | ||
pageIndex, | ||
pageSize, | ||
pageCount, | ||
canNextPage, | ||
canPreviousPage, | ||
pageOptions: [...pageOptions.slice(0, 6), '...'], | ||
}, | ||
null, | ||
2 | ||
)} | ||
</code> | ||
</pre> | ||
<table {...getTableProps()}> | ||
<thead> | ||
{headerGroups.map(headerGroup => ( | ||
<tr {...headerGroup.getHeaderGroupProps()}> | ||
{headerGroup.headers.map(column => ( | ||
<th {...column.getHeaderProps()}>{column.render('Header')}</th> | ||
))} | ||
</tr> | ||
))} | ||
</thead> | ||
<tbody> | ||
{page.map( | ||
(row, i) => | ||
prepareRow(row) || ( | ||
<tr {...row.getRowProps()}> | ||
{row.cells.map(cell => { | ||
return ( | ||
<td {...cell.getCellProps()}>{cell.render('Cell')}</td> | ||
) | ||
})} | ||
</tr> | ||
) | ||
)} | ||
</tbody> | ||
</table> | ||
{/* | ||
Pagination can be built however you'd like. | ||
This is just a very basic UI implementation: | ||
*/} | ||
<div className="pagination"> | ||
<button onClick={() => gotoPage(0)} disabled={!canPreviousPage}> | ||
{'<<'} | ||
</button>{' '} | ||
<button onClick={() => previousPage()} disabled={!canPreviousPage}> | ||
{'<'} | ||
</button>{' '} | ||
<button onClick={() => nextPage()} disabled={!canNextPage}> | ||
{'>'} | ||
</button>{' '} | ||
<button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}> | ||
{'>>'} | ||
</button>{' '} | ||
<span> | ||
Page{' '} | ||
<strong> | ||
{pageIndex + 1} of {pageOptions.length} | ||
</strong>{' '} | ||
</span> | ||
<span> | ||
| Go to page:{' '} | ||
<input | ||
type="number" | ||
defaultValue={pageIndex + 1} | ||
onChange={e => { | ||
const page = e.target.value ? Number(e.target.value) - 1 : 0 | ||
gotoPage(page) | ||
}} | ||
style={{ width: '100px' }} | ||
/> | ||
</span>{' '} | ||
<select | ||
value={pageSize} | ||
onChange={e => { | ||
setPageSize(Number(e.target.value)) | ||
}} | ||
> | ||
{[10, 20, 30, 40, 50].map(pageSize => ( | ||
<option key={pageSize} value={pageSize}> | ||
Show {pageSize} | ||
</option> | ||
))} | ||
</select> | ||
</div> | ||
</> | ||
) | ||
} | ||
|
||
function App() { | ||
const columns = React.useMemo( | ||
() => [ | ||
{ | ||
Header: 'Name', | ||
columns: [ | ||
{ | ||
Header: 'First Name', | ||
accessor: 'firstName', | ||
}, | ||
{ | ||
Header: 'Last Name', | ||
accessor: 'lastName', | ||
}, | ||
], | ||
}, | ||
{ | ||
Header: 'Info', | ||
columns: [ | ||
{ | ||
Header: 'Age', | ||
accessor: 'age', | ||
}, | ||
{ | ||
Header: 'Visits', | ||
accessor: 'visits', | ||
}, | ||
{ | ||
Header: 'Status', | ||
accessor: 'status', | ||
}, | ||
{ | ||
Header: 'Profile Progress', | ||
accessor: 'progress', | ||
}, | ||
], | ||
}, | ||
], | ||
[] | ||
) | ||
|
||
const data = React.useMemo(() => makeData(100000), []) | ||
|
||
return ( | ||
<Styles> | ||
<Table columns={columns} data={data} /> | ||
</Styles> | ||
) | ||
} | ||
|
||
export default App |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import React from 'react' | ||
import ReactDOM from 'react-dom' | ||
import App from './App' | ||
|
||
it('renders without crashing', () => { | ||
const div = document.createElement('div') | ||
ReactDOM.render(<App />, div) | ||
ReactDOM.unmountComponentAtNode(div) | ||
}) |
Oops, something went wrong.