react-table#usePagination JavaScript Examples
The following examples show how to use
react-table#usePagination.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.jsx From react-firebase-admin with MIT License | 4 votes |
|
Table = ({ columns, data }) => {
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
pageCount,
state: { pageIndex, pageSize },
gotoPage,
previousPage,
nextPage,
setPageSize,
canPreviousPage,
canNextPage,
} = useTable(
{
columns,
data,
},
useSortBy,
usePagination
);
const perPage = useFormatMessage('Table.perPage');
return (
<div className="table-wrapper">
<table
className="table is-striped has-mobile-cards is-hoverable"
{...getTableProps()}
>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
className={classNames(
{ [classes.isCurrentSort]: column.isSorted },
{ [classes.isSortable]: column.canSort }
)}
{...column.getHeaderProps(column.getSortByToggleProps())}
>
<div className="th-wrap">
{column.render('Header')}
{column.isSorted && (
<span className="icon is-small">
<i
className={classNames(
'mdi',
classes.tableIcon,
{ 'mdi-arrow-down': column.isSortedDesc },
{ 'mdi-arrow-up': !column.isSortedDesc }
)}
/>
</span>
)}
</div>
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td
className={classNames(
{ 'is-actions-cell': cell.column.id === 'actions' },
{
'has-no-head-mobile is-image-cell':
cell.column.id === 'logoUrl',
}
)}
data-label={cell.column.Header}
{...cell.getCellProps()}
>
{cell.render('Cell')}
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
<div className={classNames('level', classes.level)}>
<div className="level-left">
<div className="control">
<span className="select">
<select
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value));
}}
>
{[5, 10, 15, 20, 50].map((size) => (
<option key={size} value={size}>
{size} {perPage}
</option>
))}
</select>
</span>
</div>
</div>
<div className="level-right">
<div className="level-item">
<nav className="pagination">
<button
type="button"
className="pagination-link pagination-previous"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
<span className="icon" aria-hidden="true">
<i className="mdi mdi-chevron-left mdi-24px" />
</span>
</button>
<button
type="button"
className="pagination-link pagination-next"
onClick={() => nextPage()}
disabled={!canNextPage}
>
<span className="icon" aria-hidden="true">
<i className="mdi mdi-chevron-right mdi-24px" />
</span>
</button>
<ul className="pagination-list">
{pageIndex !== 0 && (
<li>
<button
type="button"
className="pagination-link"
onClick={() => gotoPage(0)}
>
1
</button>
</li>
)}
{pageIndex > 3 && (
<li>
<span className="pagination-ellipsis">…</span>
</li>
)}
{pageIndex === 3 && (
<li>
<button
type="button"
className="pagination-link"
onClick={() => gotoPage(1)}
>
2
</button>
</li>
)}
{pageIndex - 1 > 0 && (
<li>
<button
type="button"
className="pagination-link"
onClick={() => previousPage()}
>
{pageIndex}
</button>
</li>
)}
<li>
<button
type="button"
className={classNames(
'pagination-link',
classes.currentPage
)}
aria-current="true"
>
{pageIndex + 1}
</button>
</li>
{canNextPage && (
<li>
<button
type="button"
className="pagination-link"
onClick={() => nextPage()}
>
{pageIndex + 2}
</button>
</li>
)}
{pageCount - pageIndex === 4 && (
<li>
<button
type="button"
className="pagination-link"
onClick={() => gotoPage(pageCount - 2)}
>
{pageCount - 1}
</button>
</li>
)}
{pageCount - pageIndex > 4 && (
<li>
<span className="pagination-ellipsis">…</span>
</li>
)}
{pageIndex + 2 < pageCount && (
<li>
<button
type="button"
className="pagination-link"
onClick={() => gotoPage(pageCount - 1)}
>
{pageCount}
</button>
</li>
)}
</ul>
</nav>
</div>
</div>
</div>
</div>
);
}
Example #2
| Source File: auth.js From peppermint with GNU Affero General Public License v3.0 | 4 votes |
|
function Table({ columns, data }) {
const filterTypes = React.useMemo(
() => ({
// Add a new fuzzyTextFilterFn filter type.
// fuzzyText: fuzzyTextFilterFn,
// Or, override the default text filter to use
// "startWith"
text: (rows, id, filterValue) =>
rows.filter((row) => {
const rowValue = row.values[id];
return rowValue !== undefined
? String(rowValue)
.toLowerCase()
.startsWith(String(filterValue).toLowerCase())
: true;
}),
}),
[]
);
const defaultColumn = React.useMemo(
() => ({
// Let's set up our default Filter UI
Filter: DefaultColumnFilter,
}),
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
canPreviousPage,
canNextPage,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
defaultColumn, // Be sure to pass the defaultColumn option
filterTypes,
initialState: {
pageIndex: 0,
},
},
useFilters, // useFilters!
useGlobalFilter,
usePagination
);
return (
<div className="overflow-x-auto md:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full md:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 md:rounded-lg">
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
>
<thead className="bg-gray-50">
{headerGroups.map((headerGroup) => (
<tr
{...headerGroup.getHeaderGroupProps()}
key={headerGroup.headers.map((header) => header.id)}
>
{headerGroup.headers.map((column) =>
column.hideHeader === false ? null : (
<th
{...column.getHeaderProps()}
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
{column.render("Header")}
{/* Render the columns filter UI */}
<div>
{column.canFilter ? column.render("Filter") : null}
</div>
</th>
)
)}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()} className="bg-white">
{row.cells.map((cell) => (
<td
className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
{...cell.getCellProps()}
>
{cell.render("Cell")}
</td>
))}
</tr>
);
})}
</tbody>
</table>
<nav
className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
aria-label="Pagination"
>
<div className="hidden sm:block">
<div className="flex flex-row flex-nowrap w-full space-x-2">
<p
htmlFor="location"
className="block text-sm font-medium text-gray-700 mt-4"
>
Show
</p>
<select
id="location"
name="location"
className="block w-full pl-3 pr-10 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value));
}}
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
</select>
</div>
</div>
<div className="flex-1 flex justify-between sm:justify-end">
<button
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
Previous
</button>
<button
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => nextPage()}
disabled={!canNextPage}
>
Next
</button>
</div>
</nav>
</div>
</div>
</div>
);
}
Example #3
| Source File: clients.js From peppermint with GNU Affero General Public License v3.0 | 4 votes |
|
function Table({ columns, data }) {
const filterTypes = React.useMemo(
() => ({
// Add a new fuzzyTextFilterFn filter type.
// fuzzyText: fuzzyTextFilterFn,
// Or, override the default text filter to use
// "startWith"
text: (rows, id, filterValue) =>
rows.filter((row) => {
const rowValue = row.values[id];
return rowValue !== undefined
? String(rowValue)
.toLowerCase()
.startsWith(String(filterValue).toLowerCase())
: true;
}),
}),
[]
);
const defaultColumn = React.useMemo(
() => ({
// Let's set up our default Filter UI
Filter: DefaultColumnFilter,
}),
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
canPreviousPage,
canNextPage,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
defaultColumn, // Be sure to pass the defaultColumn option
filterTypes,
initialState: {
pageIndex: 0,
},
},
useFilters, // useFilters!
useGlobalFilter,
usePagination
);
return (
<div className="overflow-x-auto md:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full md:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 md:rounded-lg">
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
>
<thead className="bg-gray-50">
{headerGroups.map((headerGroup) => (
<tr
{...headerGroup.getHeaderGroupProps()}
key={headerGroup.headers.map((header) => header.id)}
>
{headerGroup.headers.map((column) =>
column.hideHeader === false ? null : (
<th
{...column.getHeaderProps()}
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
{column.render("Header")}
{/* Render the columns filter UI */}
<div>
{column.canFilter ? column.render("Filter") : null}
</div>
</th>
)
)}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()} className="bg-white">
{row.cells.map((cell) => (
<td
className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
{...cell.getCellProps()}
>
{cell.render("Cell")}
</td>
))}
</tr>
);
})}
</tbody>
</table>
<nav
className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
aria-label="Pagination"
>
<div className="hidden sm:block">
<div className="flex flex-row flex-nowrap w-full space-x-2">
<p
htmlFor="location"
className="block text-sm font-medium text-gray-700 mt-4"
>
Show
</p>
<select
id="location"
name="location"
className="block w-full pl-3 pr-10 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value));
}}
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
</select>
</div>
</div>
<div className="flex-1 flex justify-between sm:justify-end">
<button
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
Previous
</button>
<button
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => nextPage()}
disabled={!canNextPage}
>
Next
</button>
</div>
</nav>
</div>
</div>
</div>
);
}
Example #4
| Source File: history.js From peppermint with GNU Affero General Public License v3.0 | 4 votes |
|
function Table({ columns, data }) {
const filterTypes = React.useMemo(
() => ({
// // Add a new fuzzyTextFilterFn filter type.
// fuzzyText: fuzzyTextFilterFn,
// // Or, override the default text filter to use
// // "startWith"
text: (rows, id, filterValue) =>
rows.filter((row) => {
const rowValue = row.values[id];
return rowValue !== undefined
? String(rowValue)
.toLowerCase()
.startsWith(String(filterValue).toLowerCase())
: true;
}),
}),
[]
);
const defaultColumn = React.useMemo(
() => ({
// Let's set up our default Filter UI
Filter: DefaultColumnFilter,
}),
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
canPreviousPage,
canNextPage,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
defaultColumn, // Be sure to pass the defaultColumn option
filterTypes,
initialState: {
pageIndex: 0,
},
},
useFilters, // useFilters!
useGlobalFilter,
usePagination
);
return (
<div className="overflow-x-auto md:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full md:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 md:rounded-lg">
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
>
<thead className="bg-gray-50">
{headerGroups.map((headerGroup) => (
<tr
{...headerGroup.getHeaderGroupProps()}
key={headerGroup.headers.map((header) => header.id)}
>
{headerGroup.headers.map((column) =>
column.hideHeader === false ? null : (
<th
{...column.getHeaderProps()}
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
{column.render("Header")}
{/* Render the columns filter UI */}
<div>
{column.canFilter ? column.render("Filter") : null}
</div>
</th>
)
)}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()} className="bg-white">
{row.cells.map((cell) => (
<td
className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
{...cell.getCellProps()}
>
{cell.render("Cell")}
</td>
))}
</tr>
);
})}
</tbody>
</table>
<nav
className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
aria-label="Pagination"
>
<div className="hidden sm:block">
<div className="flex flex-row flex-nowrap w-full space-x-2">
<p
htmlFor="location"
className="block text-sm font-medium text-gray-700 mt-4"
>
Show
</p>
<select
id="location"
name="location"
className="block w-full pl-3 pr-10 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value));
}}
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
</select>
</div>
</div>
<div className="flex-1 flex justify-between sm:justify-end">
<button
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
Previous
</button>
<button
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => nextPage()}
disabled={!canNextPage}
>
Next
</button>
</div>
</nav>
</div>
</div>
</div>
);
}
Example #5
| Source File: index.js From peppermint with GNU Affero General Public License v3.0 | 4 votes |
|
function Table({ columns, data }) {
const filterTypes = React.useMemo(
() => ({
// Add a new fuzzyTextFilterFn filter type.
// fuzzyText: fuzzyTextFilterFn,
// Or, override the default text filter to use
// "startWith"
text: (rows, id, filterValue) =>
rows.filter((row) => {
const rowValue = row.values[id];
return rowValue !== undefined
? String(rowValue)
.toLowerCase()
.startsWith(String(filterValue).toLowerCase())
: true;
}),
}),
[]
);
const defaultColumn = React.useMemo(
() => ({
// Let's set up our default Filter UI
Filter: DefaultColumnFilter,
}),
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
canPreviousPage,
canNextPage,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
defaultColumn, // Be sure to pass the defaultColumn option
filterTypes,
initialState: {
pageIndex: 0,
},
},
useFilters, // useFilters!
useGlobalFilter,
usePagination
);
return (
<div className="overflow-x-auto md:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full md:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 md:rounded-lg">
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
>
<thead className="bg-gray-50">
{headerGroups.map((headerGroup) => (
<tr
{...headerGroup.getHeaderGroupProps()}
key={headerGroup.headers.map((header) => header.id)}
>
{headerGroup.headers.map((column) =>
column.hideHeader === false ? null : (
<th
{...column.getHeaderProps()}
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
{column.render("Header")}
<div>
{column.canFilter ? column.render("Filter") : null}
</div>
</th>
)
)}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()} className="bg-white">
{row.cells.map((cell) => (
<td
className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
{...cell.getCellProps()}
>
{cell.render("Cell")}
</td>
))}
</tr>
);
})}
</tbody>
</table>
<nav
className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
aria-label="Pagination"
>
<div className="hidden sm:block">
<div className="flex flex-row flex-nowrap w-full space-x-2">
<p
htmlFor="location"
className="block text-sm font-medium text-gray-700 mt-4"
>
Show
</p>
<select
id="location"
name="location"
className="block w-full pl-3 pr-10 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value));
}}
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
</select>
</div>
</div>
<div className="flex-1 flex justify-between sm:justify-end">
<button
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
Previous
</button>
<button
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => nextPage()}
disabled={!canNextPage}
>
Next
</button>
</div>
</nav>
</div>
</div>
</div>
);
}
Example #6
| Source File: Table.js From plenty-interface with GNU General Public License v3.0 | 4 votes |
|
Table = ({ searchQuery, columns, data, className }) => {
useEffect(() => {
setFilter('token', searchQuery);
}, [searchQuery]);
const {
getTableProps,
headerGroups,
page,
prepareRow,
gotoPage,
pageCount,
state: { pageIndex },
setFilter,
} = useTable(
{
columns,
data,
initialState: {
pageIndex: 0,
pageSize: 10,
sortBy: [
{
id: 'liquidity',
desc: true,
},
],
},
autoResetPage: false,
autoResetExpanded: false,
autoResetGroupBy: false,
autoResetSelectedRows: false,
autoResetSortBy: false,
autoResetFilters: false,
autoResetRowState: false,
},
useFilters,
useSortBy,
usePagination,
);
return (
<>
<div className={styles.tableContainer}>
<div {...getTableProps()} className={clsx(styles.table, className)}>
<div className={styles.thead}>
{headerGroups.map((headerGroup) => (
<div
key={'will be overridden'}
{...headerGroup.getHeaderGroupProps()}
className={styles.th}
>
{headerGroup.headers.map((column) => (
<div
key={'will be overridden'}
{...column.getHeaderProps(column.getSortByToggleProps())}
className={styles.td}
>
<div className="flex flex-row align-items-center">
<span className="mx-1">{column.render('Header')}</span>
{column.id !== 'favorite' && (
<span>
{column.isSorted ? (
column.isSortedDesc ? (
<span className="material-icons flex">keyboard_arrow_down</span>
) : (
<span className="material-icons flex">keyboard_arrow_up</span>
)
) : (
<span className="material-icons invisible">keyboard_arrow_up</span>
)}
</span>
)}
</div>
</div>
))}
</div>
))}
</div>
<div className={styles.tbody}>
{page.map((row) => {
prepareRow(row);
return (
<div key={'will be overridden'} {...row.getRowProps()} className={styles.tr}>
{row.cells.map((cell) => {
return (
<div
key={'will be overridden'}
{...cell.getCellProps()}
className={styles.td}
>
<span className="mx-1">{cell.render('Cell')}</span>
</div>
);
})}
</div>
);
})}
</div>
</div>
</div>
<div className="d-flex justify-content-center mt-2">
{Array(pageCount)
.fill(0)
.map((x, i) => (
<div
key={i}
className={clsx(styles.page, {
[styles.selected]: i === pageIndex,
})}
onClick={() => gotoPage(i)}
>
{i + 1}
</div>
))}
</div>
</>
);
}
Example #7
| Source File: TableContainer.js From RT7-example with MIT License | 4 votes |
|
TableContainer = ({ columns, data, renderRowSubComponent }) => {
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
visibleColumns,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
defaultColumn: { Filter: DefaultColumnFilter },
initialState: { pageIndex: 0, pageSize: 10 },
},
useFilters,
useSortBy,
useExpanded,
usePagination
);
const generateSortingIndicator = (column) => {
return column.isSorted ? (column.isSortedDesc ? ' ?' : ' ?') : '';
};
const onChangeInSelect = (event) => {
setPageSize(Number(event.target.value));
};
const onChangeInInput = (event) => {
const page = event.target.value ? Number(event.target.value) - 1 : 0;
gotoPage(page);
};
return (
<Fragment>
<Table bordered hover {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>
<div {...column.getSortByToggleProps()}>
{column.render('Header')}
{generateSortingIndicator(column)}
</div>
<Filter column={column} />
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row) => {
prepareRow(row);
return (
<Fragment key={row.getRowProps().key}>
<tr>
{row.cells.map((cell) => {
return (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
);
})}
</tr>
{row.isExpanded && (
<tr>
<td colSpan={visibleColumns.length}>
{renderRowSubComponent(row)}
</td>
</tr>
)}
</Fragment>
);
})}
</tbody>
</Table>
<Row style={{ maxWidth: 1000, margin: '0 auto', textAlign: 'center' }}>
<Col md={3}>
<Button
color='primary'
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
>
{'<<'}
</Button>
<Button
color='primary'
onClick={previousPage}
disabled={!canPreviousPage}
>
{'<'}
</Button>
</Col>
<Col md={2} style={{ marginTop: 7 }}>
Page{' '}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>
</Col>
<Col md={2}>
<Input
type='number'
min={1}
style={{ width: 70 }}
max={pageOptions.length}
defaultValue={pageIndex + 1}
onChange={onChangeInInput}
/>
</Col>
<Col md={2}>
<CustomInput
type='select'
value={pageSize}
onChange={onChangeInSelect}
>
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</CustomInput>
</Col>
<Col md={3}>
<Button color='primary' onClick={nextPage} disabled={!canNextPage}>
{'>'}
</Button>
<Button
color='primary'
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
>
{'>>'}
</Button>
</Col>
</Row>
</Fragment>
);
}
Example #8
| Source File: TransactionHistoryTable.js From ucurtmetre with GNU General Public License v3.0 | 4 votes |
|
function TransactionHistoryTable({ data }) {
const breakpoint = useBreakpoints();
const isMobile = breakpoint === 'isMobile';
const columns = useMemo(
() => [
{
Header: 'Kimden',
accessor: 'from.name',
Cell: ({ value }) => (
<div className="person with-icon">
<div>{value || 'Anonim'}</div>
<div className="icon">
<ArrowRight />
</div>
</div>
),
},
{
Header: 'Kime',
accessor: 'to.name',
Cell: ({
value,
row: {
original: { to },
},
}) => {
let Element = 'div';
let linkProps;
if (to.campaignCode && to.campaignCode !== 'donate-all') {
Element = 'a';
linkProps = {
href: `https://www.ucurtmaprojesi.com/campaign/${to.campaignCode}`,
};
}
return (
<Element className="person" {...linkProps}>
{value}
</Element>
);
},
},
{
Header: 'Ne Zaman',
accessor: 'when',
id: 'when',
Cell: ({ value }) => <div>{dayjs().to(dayjs(value * 1000))}</div>,
},
{
Header: 'Ne Kadar',
accessor: 'amount',
Cell: ({
value,
row: {
original: { tokenName },
},
}) => (
<div className="amount">{`${
typeof value === 'number' ? Math.floor(value) : value
} ${tokenName}`}</div>
),
},
],
[]
);
const defaultSort = useMemo(() => [{ id: 'when', desc: true }], []);
const tableInstance = useTable(
{
columns,
data,
initialState: { sortBy: defaultSort, pageSize: 10, pageIndex: 0 },
disableMultiSort: true,
disableSortRemove: true,
},
useFlexLayout,
useSortBy,
usePagination
);
const {
getTableProps,
headerGroups,
prepareRow,
page,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
state: { pageIndex },
} = tableInstance;
return (
<div className="table-wrapper">
<div {...(!isMobile && getTableProps())} className="table">
{!isMobile &&
headerGroups.map(headerGroup => (
<div {...headerGroup.getHeaderGroupProps({})} className="tr">
{headerGroup.headers.map(column => (
<div
{...column.getHeaderProps(column.getSortByToggleProps())}
className="th title"
>
{column.render('Header')}
{column.isSorted ? (
column.isSortedDesc ? (
<ChevronDown />
) : (
<ChevronUp />
)
) : (
''
)}
</div>
))}
</div>
))}
<div className="tbody">
{page.map(row => {
prepareRow(row);
return (
<div {...row.getRowProps()} className="tr">
{row.cells.map(cell => {
return (
<div {...cell.getCellProps()} className="td">
{isMobile && (
<div className="td-header">{cell.render('Header')}</div>
)}
<div className="td-content">{cell.render('Cell')}</div>
</div>
);
})}
</div>
);
})}
</div>
</div>
<div className="pagination">
<div>
<button
className="button icon-button"
type="button"
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
>
<ChevronsLeft />
</button>
<button
className="button icon-button"
type="button"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
<ChevronLeft />
</button>
<button
className="button icon-button"
type="button"
onClick={() => nextPage()}
disabled={!canNextPage}
>
<ChevronRight />
</button>
<button
className="button icon-button"
type="button"
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
>
<ChevronsRight />
</button>
</div>
<span>
Toplam {pageOptions.length} sayfadan
<strong>{pageIndex + 1}.</strong>
sayfayı görüntülüyorsunuz.
</span>
</div>
</div>
);
}
Example #9
| Source File: Table.js From datapass with GNU Affero General Public License v3.0 | 4 votes |
|
Table = ({
columns,
data,
initialState = {},
updateData,
filterTypes,
skipReset,
}) => {
const defaultColumn = useMemo(
() => ({
Filter: () => null,
}),
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
page,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
state: { pageIndex },
} = useTable(
{
columns,
data,
initialState,
defaultColumn,
autoResetPage: !skipReset,
autoResetFilters: !skipReset,
updateData,
filterTypes,
},
useFilters,
usePagination
);
return (
<>
<div className="admin-table-wrapper">
<div className="admin-table">
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>
{column.render('Header')}
{column.canFilter && column.render('Filter')}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
))}
</tr>
);
})}
</tbody>
</table>
</div>
</div>
<div>
<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>
</div>
</>
);
}
Example #10
| Source File: index.js From ThreatMapper with Apache License 2.0 | 4 votes |
|
DfTableV2 = ({
columns,
data,
renderRowSubComponent,
showPagination,
manual,
totalRows,
page,
defaultPageSize,
onPageChange,
enableSorting,
onSortChange,
noDataText,
disableResizing,
columnCustomizable,
name,
loading,
noMargin,
multiSelectOptions,
onRowClick,
onCellClick,
getRowStyle,
getCellStyle,
}) => {
defaultPageSize = getDefaultPageSize({
showPagination,
inputDefaultPageSize: defaultPageSize,
data
});
const rtColumns = useColumnFilter({
columns,
columnCustomizable,
renderRowSubComponent,
name,
multiSelectOptions,
});
const defaultColumn = React.useMemo(
() => ({
// When using the useFlexLayout:
minWidth: 30, // minWidth is only used as a limit for resizing
width: 100, // width is used for both the flex-basis and flex-grow
maxWidth: 500, // maxWidth is only used as a limit for resizing
}),
[]
)
const additionalTableParams = {};
if (manual) {
additionalTableParams.pageCount = getPageCount({
manual,
showPagination,
defaultPageSize,
totalRows,
data
});
} else if (showPagination) {
additionalTableParams.initialState = {
pageSize: defaultPageSize
};
}
const tableInstance = useTable(
{
columns: rtColumns,
data,
defaultColumn,
autoResetExpanded: false,
autoResetPage: false,
manualPagination: !!manual,
paginateExpandedRows: false,
disableSortBy: !enableSorting,
manualSortBy: !!manual,
autoResetSortBy: false,
disableMultiSort: true,
autoResetSelectedRows: false,
...additionalTableParams
},
useResizeColumns,
useFlexLayout,
useSortBy,
useExpanded,
usePagination,
useRowSelect
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
visibleColumns,
page: rtPage,
gotoPage,
pageCount,
state: {
pageIndex,
sortBy,
},
toggleAllRowsExpanded,
setPageSize,
toggleAllPageRowsSelected,
selectedFlatRows
} = tableInstance;
useEffect(() => {
// in case of manual pagination, parent should be passing current page number
if (manual && page !== null && page !== undefined) gotoPage(page);
}, [page]);
useEffect(() => {
// whenever pageIndex changes, existing expanded rows should be collapsed
// all rows are deselected
toggleAllRowsExpanded(false);
toggleAllPageRowsSelected(false);
}, [pageIndex]);
useEffect(() => {
// reset page index to 0 when number of rows shown in the page changes
gotoPage(0);
}, [defaultPageSize]);
useEffect(() => {
if (defaultPageSize !== data.length) {
setPageSize(defaultPageSize);
}
}, [defaultPageSize, data]);
useEffect(() => {
if (manual && onSortChange) onSortChange(sortBy);
}, [sortBy]);
return (
<div className={styles.tableContainer}>
<div className={classNames(styles.table, {
[styles.noMargin]: noMargin
})} {...getTableProps()}>
{
loading ? <AppLoader small className={styles.loader} /> : <>
<div>
{
headerGroups.map(headerGroup => {
const { key, ...rest } = headerGroup.getHeaderGroupProps();
return <div key={key} {...rest}>
{
headerGroup.headers.map(column => {
const { key, onClick, ...rest } = column.getHeaderProps(enableSorting ? column.getSortByToggleProps() : undefined);
return <div className={classNames(styles.headerCell, {
[styles.headerOverflowShown]: !!column.showOverflow
})} key={key} {...rest}>
<span className={styles.headerContent} onClick={onClick}>
<span>
{column.render('Header')}
</span>
<span className={`${styles.sortIndicator}`}>
{
column.isSorted
? column.isSortedDesc
? <i className="fa fa-angle-down" />
: <i className="fa fa-angle-up" />
: null
}
</span>
</span>
{column.canResize && !disableResizing ? (
<div
{...column.getResizerProps()}
className={styles.headerCellResizer}
/>
) : null}
</div>
})}
</div>
})}
</div>
<div {...getTableBodyProps()}>
{
rtPage.map((row, index) => {
prepareRow(row);
const { key, style, ...rest } = row.getRowProps();
return (
<React.Fragment key={key} >
<div
className={classNames(styles.row, {
[styles.oddRow]: index % 2 !== 0,
[styles.expandableRow]: !!renderRowSubComponent,
[styles.clickableRow]: !!onRowClick
})}
onClick={() => {
if (renderRowSubComponent) {
row.toggleRowExpanded();
} else if (onRowClick) {
onRowClick(row);
}
}}
style={{ ...(getRowStyle ? getRowStyle(row) : {}), ...style }}
{...rest}
>
{
row.cells.map(cell => {
const { key, style, ...rest } = cell.getCellProps();
const { column } = cell;
return (
<div
className={classNames(styles.cell, {
[styles.wrap]: !column.noWrap
})}
key={key}
onClick={() => {
if (onCellClick) {
onCellClick(cell);
}
}}
style={{ ...(getCellStyle ? getCellStyle(cell) : {}), ...style }}
{...rest}>
{
cell.render('Cell')
}
</div>
)
})
}
</div>
{
row.isExpanded ? (
<div>
<div colSpan={visibleColumns.length}>
{renderRowSubComponent({ row })}
</div>
</div>
) : null
}
</React.Fragment>
)
})}
</div>
</>
}
{
!data.length && !loading ? (
<div className={styles.noDataPlaceholder}>
{noDataText || 'No rows found'}
</div>
) : null
}
</div>
{
showPagination && data.length && !loading ? (
<div className={styles.paginationWrapper}>
<Pagination
pageCount={pageCount}
pageIndex={pageIndex}
onPageChange={(selectedIndex) => {
if (manual && onPageChange) {
onPageChange(selectedIndex);
}
if (!manual) {
gotoPage(selectedIndex);
}
}}
/>
</div>
) : null
}
{(multiSelectOptions && selectedFlatRows.length) ? (<div className={styles.multiSelectActions}>
<MultiselectActions
toggleAllPageRowsSelected={toggleAllPageRowsSelected}
selectedFlatRows={selectedFlatRows ?? []}
multiSelectOptions={multiSelectOptions}
data={data}
/>
</div>) : null}
</div>
);
}
Example #11
| Source File: BuilderListView.jsx From scaffold-directory with MIT License | 4 votes |
|
export default function BuilderListView({ serverUrl, mainnetProvider, userRole }) {
const [builders, setBuilders] = useState([]);
const [isLoadingBuilders, setIsLoadingBuilders] = useState(false);
const { secondaryFontColor } = useCustomColorModes();
const isAdmin = userRole === USER_ROLES.admin;
const columns = useMemo(
() => [
{
Header: "Builder",
accessor: "builder",
disableSortBy: true,
Cell: ({ value }) => <BuilderAddressCell builderId={value} mainnetProvider={mainnetProvider} />,
},
{
Header: "Challenges",
accessor: "challenges",
sortDescFirst: true,
},
{
Header: "Socials",
accessor: "socials",
disableSortBy: true,
Cell: ({ value }) => <BuilderSocialLinksCell builder={value} isAdmin={isAdmin} />,
},
{
Header: "Last Activity",
accessor: "lastActivity",
sortDescFirst: true,
Cell: ({ value }) => <DateWithTooltip timestamp={value} />,
},
],
// eslint-disable-next-line
[userRole],
);
useEffect(() => {
async function fetchBuilders() {
setIsLoadingBuilders(true);
const fetchedBuilders = await axios.get(serverUrl + serverPath);
const processedBuilders = fetchedBuilders.data.map(builder => ({
builder: builder.id,
challenges: getAcceptedChallenges(builder?.challenges)?.length ?? 0,
socials: builder,
lastActivity: builderLastActivity(builder),
}));
setBuilders(processedBuilders);
setIsLoadingBuilders(false);
}
fetchBuilders();
}, [serverUrl]);
const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
page,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data: builders,
initialState: { pageIndex: 0, pageSize: 25, sortBy: useMemo(() => [{ id: "lastActivity", desc: true }], []) },
},
useSortBy,
usePagination,
);
return (
<Container maxW="container.lg">
<Container maxW="container.md" centerContent>
<Heading as="h1" mb="4">
All Builders
</Heading>
<Text color={secondaryFontColor} textAlign="center" mb="10">
List of Ethereum builders creating products, prototypes, and tutorials with{" "}
<Link href="https://github.com/scaffold-eth/scaffold-eth" color="teal.500" isExternal>
scaffold-eth
</Link>
.
</Text>
</Container>
{isLoadingBuilders ? (
<BuilderListSkeleton />
) : (
<Box overflowX="auto" mb={8}>
<Center mb={5}>
<chakra.strong mr={2}>Total builders:</chakra.strong> {builders.length}
</Center>
<Table {...getTableProps()}>
<Thead>
{headerGroups.map(headerGroup => (
<Tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<Th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render("Header")}
<chakra.span pl="4">
{column.isSorted ? (
column.isSortedDesc ? (
<TriangleDownIcon aria-label="sorted descending" />
) : (
<TriangleUpIcon aria-label="sorted ascending" />
)
) : null}
</chakra.span>
</Th>
))}
</Tr>
))}
</Thead>
<Tbody {...getTableBodyProps()}>
{page.map(row => {
prepareRow(row);
return (
<Tr {...row.getRowProps()}>
{row.cells.map(cell => (
<Td {...cell.getCellProps()}>{cell.render("Cell")}</Td>
))}
</Tr>
);
})}
</Tbody>
</Table>
<Center mt={4}>
<ButtonGroup>
<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>
</ButtonGroup>
</Center>
<Center mt={4}>
<Text mr={4}>
Page{" "}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>{" "}
</Text>
<Box>
<Select
isFullWidth={false}
value={pageSize}
onChange={e => {
setPageSize(Number(e.target.value));
}}
>
{[25, 50, 100].map(pageSizeOption => (
<option key={pageSizeOption} value={pageSizeOption}>
Show {pageSizeOption}
</option>
))}
</Select>
</Box>
</Center>
</Box>
)}
</Container>
);
}
Example #12
| Source File: Table.js From os-league-tools with MIT License | 4 votes |
|
export default function Table({
columns,
data,
filters = [],
filterState,
globalFilter,
defaultColumn,
initialState,
ExpandedRow,
customFilterProps = {},
enableResizeColumns = true,
}) {
const [records, setRecords] = useState(data);
useEffect(() => {
if (filters.length) {
setRecords(data.filter(record => filters.every(filter => filter(record, filterState, customFilterProps))));
} else {
setRecords(data);
}
}, [filterState, data, customFilterProps]);
const table = useTable(
{
initialState: { pageSize: 25, ...initialState },
columns,
data: records,
defaultColumn,
globalFilter,
manualFilters: true,
autoResetGlobalFilter: false,
autoResetSortBy: false,
autoResetPage: false,
autoResetExpanded: false,
getRowId: useCallback(row => row.id, []),
},
useFlexLayout,
useResizeColumns,
useGlobalFilter,
useSortBy,
useExpanded,
usePagination
);
useEffect(() => {
// Reset to first page when filters are changed
table.gotoPage(0);
}, [filterState]);
const moveRow = (dragIndex, hoverIndex) => {
const dragRecord = records[dragIndex];
setRecords(
update(records, {
$splice: [
[dragIndex, 1],
[hoverIndex, 0, dragRecord],
],
})
);
};
return (
<>
<div className='flex flex-row flex-wrap justify-between pb-3 px-3 items-end'>
<span className='italic text-sm'>Showing: {table.page.length} rows</span>
<SearchBox globalFilter={table.state.globalFilter} setGlobalFilter={table.setGlobalFilter} />
</div>
<div className='overflow-auto px-3'>
<DndProvider backend={HTML5Backend}>
<div {...table.getTableProps()} style={{ minWidth: 'min-content' }}>
<div>
{table.headerGroups.map(headerGroup => (
<div
{...headerGroup.getHeaderGroupProps()}
className='heading-accent-md leading-loose border-b border-accent w-full'
>
{headerGroup.headers.map(column => (
<div
{...column.getHeaderProps(column.getSortByToggleProps())}
className='relative font-bold text-center'
>
{column.render('Header')}
{column.isSorted && (
<span className='icon-base absolute'>
{column.isSortedDesc ? 'arrow_drop_down' : 'arrow_drop_up'}
</span>
)}
{enableResizeColumns && (
<span {...column.getResizerProps()} className='resizer icon-lg'>
drag_handle
</span>
)}
</div>
))}
</div>
))}
</div>
<div {...table.getTableBodyProps()}>
{table.page.map(
(row, index) =>
table.prepareRow(row) || (
<Row
index={index}
row={row}
moveRow={moveRow}
isReorderEnabled={filterState?.reorderEnabled}
ExpandedRow={ExpandedRow}
{...row.getRowProps()}
/>
)
)}
</div>
<div className='flex flex-col justify-center text-center'>
<div>
<PageButton
onClick={() => table.gotoPage(0)}
disabled={!table.canPreviousPage}
text='<<'
/>
<PageButton
onClick={() => table.previousPage()}
disabled={!table.canPreviousPage}
text='<'
/>
<span className='text-xs'>
{table.state.pageIndex + 1} of {table.pageOptions.length}
</span>
<PageButton onClick={() => table.nextPage()} disabled={!table.canNextPage} text='>' />
<PageButton
onClick={() => table.gotoPage(table.pageCount - 1)}
disabled={!table.canNextPage}
text='>>'
/>
</div>
<span className='text-xs'>
Show:
<select
className='input-primary text-xs p-0 ml-1 text-center'
value={table.state.pageSize}
onChange={e => {
table.setPageSize(Number(e.target.value));
}}
>
{[25, 50, 100, 200].map(pageSize => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
</select>
</span>
</div>
</div>
</DndProvider>
</div>
</>
);
}
