I have hosted static website with react-table in github-pages. the react-table renders data from the repository.
The data is updated once a day, but the updated contents does not seem to be reflected in the static website.
Here is my code,
import { useTable, usePagination, useSortBy } from 'react-table'
import 'bootstrap/dist/css/bootstrap.min.css';
import mydata from "./mydata/data.json";
import styled from "styled-components";
const Styles = styled.div`
.page-link {
color: black;
}
`
function Table({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
page,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
initialState: {
pageIndex: 0,
pageSize: 10,
sortBy: [
{
id: 'date',
desc: true
}
]
},
},
useSortBy,
usePagination
)
// Render the UI for your table
return (
<div>
<table className="table" {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render('Header')}
<span>
{column.isSorted
? column.isSortedDesc
? ' '
: ' '
: ''}
</span>
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row)
return (
<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:
*/}
<ul className="pagination">
<li className="page-item" onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
<a className="page-link">First</a>
</li>
<li className="page-item" onClick={() => previousPage()} disabled={!canPreviousPage}>
<a className="page-link">{'<'}</a>
</li>
<li className="page-item" onClick={() => nextPage()} disabled={!canNextPage}>
<a className="page-link">{'>'}</a>
</li>
<li className="page-item" onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
<a className="page-link">Last</a>
</li>
<li>
<a className="page-link">
Page{' '}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>{' '}
</a>
</li>
<li>
<a className="page-link">
<input
className="form-control"
type="number"
defaultValue={pageIndex + 1}
onChange={e => {
const page = e.target.value ? Number(e.target.value) - 1 : 0
gotoPage(page)
}}
style={{ width: '100px', height: '20px' }}
/>
</a>
</li>{' '}
<select
className="form-control"
value={pageSize}
onChange={e => {
setPageSize(Number(e.target.value))
}}
style={{ width: '120px', height: '38px' }}
>
{[5, 10, 20, 30, 40, 50].map(pageSize => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</select>
</ul>
</div >
)
}
function PaginationTableComponent() {
const columns = React.useMemo(
() => [
{
Header: 'Date',
accessor: 'date',
// width: 100,
},
{
Header: 'Title2',
accessor: 'title',
className: "title",
// width: 250,
Cell: ({ row }) => <a href={row.original.url}>{row.original.title}</a>,
},
{
Header: 'Title(en)',
accessor: 'translated',
className: "title",
// width: 250,
},
{
Header: 'Likes',
accessor: 'likes',
// width: 60,
},
],
[mydata]
)
const data = React.useMemo(
() => mydata,
[mydata]
)
return (
<Styles>
<Table columns={columns} data={data} />
</Styles>
)
}
export default PaginationTableComponent;
The main point here is that usememo is not detecting the changes from 'mydata'
'mydata' is a raw json file, something like the below.
[{"date":"2021-07-26","title":"Auth0\u306e\u30c8\u30fc\u30af\u30f3\u306b\u30ed\u30fc\u30eb\u3092\u8ffd\u52a0\u3067\u304d\u306a\u304f\u306a\u3063\u3066\u30cf\u30de\u3063\u305f\u4ef6 #Auth0 #Qiita\u30a8\u30f3\u30b8\u30cb\u30a2\u30d5\u30a7\u30b9\u30bf_Auth0","likes":0,"url":"https:\/\/dev.classmethod.jp\/articles\/stuck-add-user-roles-to-tokens\/","translated":"I was addicted to not being able to add roles to Auth0 tokens # Auth0 # Qiita Engineer Festa_Auth0"},{"date":"2021-07-26","title":"\u30ef\u30fc\u30b1\u30fc\u30b7\u30e7\u30f3\u30921\u5e74\u9593\u3084\u3063\u3066\u307f\u305f","likes":0,"url":"https:\/\/dev.classmethod.jp\/articles\/workation\/","translated":"I tried worcation for a year"},{"date":"2021-07-26","title":"ECR \u30af\u30ed\u30b9\u30a2\u30ab\u30a6\u30f3\u30c8\u30ec\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092Terraform\u3067","likes":0,"url":"https:\/\/dev.classmethod.jp\/articles\/ecr-cross-account-replication-with-terraform\/","translated":"ECR cross-account replication in Terraform"},{"date":"2021-07-26","title":"\u5b9f\u8df5\uff01AWS CDK #22 RDS \u30af\u30e9\u30b9\u30bf\u30fc","likes":3,"url":"https:\/\/dev.classmethod.jp\/articles\/cdk-practice-22-rds-cluster\/","translated":"Practice! AWS CDK # 22 RDS cluster"}]
Can anyone help solve this issue?
FYI, Attempts that I have tried :
- I have included [mydata] as the second parameter for both useMemo components (columns, data)but it does not work.
- Someone here mentioned that useMemo does not work with 'sortby', but I do not know how to apply this code to mine. (React.useMemo does not update the data)
- maybe I thought it was because useMemo does not recognize raw json, but only recognizes javascript objects. That is why I followed this url (How to use react-table for a local json file?) but even after preprocessing the file, it does not work.
