react-table#useExpanded JavaScript Examples
The following examples show how to use
react-table#useExpanded.
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: RawTable.js From covid19 with MIT License | 5 votes |
|
export default function RawTable(props) {
const { columns, data, initialState, onRowClick, filterPlaceholder } = props
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
{
columns,
data,
defaultColumn: { Filter: RegionFilter(filterPlaceholder), filter: flatten(textFilter) },
initialState,
getResetExpandedDeps: false
},
useFilters,
useSortBy,
useExpanded
)
return (
<div className="data-table-wrap">
{headerGroups[0].headers[1].render('Filter')}
<table className="data-table" {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup, i) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column, j) => (
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render('Header')}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row)
return (
<tr id={`table-${row.original.region}`} {...row.getRowProps()}>
{row.cells.map((cell, cellIdx) => {
return (
<td
{...cell.getCellProps()}
onClick={cellIdx > 0 ? () => onRowClick(row) : null}
>
{cell.render('Cell')}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
<div style={{ display: 'none' }}>{rows.length} regions</div>
</div>
)
}
Example #2
| 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 #3
| 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 #4
| Source File: Table.jsx From frontend-app-support-tools with GNU Affero General Public License v3.0 | 4 votes |
|
export default function Table({
columns, data, renderRowSubComponent, styleName, isResponsive, defaultSortColumn,
}) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
visibleColumns,
} = useTable(
{
columns,
data,
initialState: {
sortBy: defaultSortColumn,
},
},
useSortBy,
useExpanded, // Using useExpanded to track the expanded state
);
return (
<div className={isResponsive ? 'table-responsive' : ''}>
<table {...getTableProps()} className={styleName}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps(column.sortable && column.getSortByToggleProps())}>
{column.render('Header')}
<span>
{/* eslint-disable-next-line no-nested-ternary */}
{column.isSorted
? column.isSortedDesc
? <FontAwesomeIcon icon={faSortDown} />
: <FontAwesomeIcon icon={faSortUp} />
: ''}
</span>
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
return (
<React.Fragment key={row.id}>
<tr>
{row.cells.map(cell => (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
))}
</tr>
{/*
If the row is in an expanded state, render a row with a
column that fills the entire length of the table.
*/}
{row.isExpanded ? (
<tr>
<td colSpan={visibleColumns.length}>
{/*
Inside it, call our renderRowSubComponent function. In reality,
you could pass whatever you want as props to
a component like this, including the entire
table instance.
it's merely a rendering option we created for ourselves
*/}
{renderRowSubComponent({ row })}
</td>
</tr>
) : null}
</React.Fragment>
);
})}
</tbody>
</table>
<br />
</div>
);
}
Example #5
| 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>
</>
);
}
