mirror of
https://github.com/gosticks/react-table.git
synced 2026-08-19 08:20:30 +00:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e42f1b93ba | ||
|
|
b17bebb546 | ||
|
|
71e2654156 | ||
|
|
82cf099d80 | ||
|
|
410417d067 | ||
|
|
73b4869329 | ||
|
|
3190047284 | ||
|
|
00efc98779 | ||
|
|
379d9e11d5 | ||
|
|
3fff682578 |
@@ -52,19 +52,77 @@
|
||||
|
||||
## Sponsors
|
||||
|
||||
| | |
|
||||
| --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [](https://patreon.com/tannerlinsley) | [](https://tryretool.com/?utm_source=sponsor&utm_campaign=react_table) |
|
||||
**React Table v7** is mostly planned and I (@tannerlinsley) am looking for Patreon support to make it a reality. It will require a decent time commitment on my part to not only implement it, but also help people migrate and continue to maintain it. If you would like to contribute to my Patreon goal for v7 and beyond, [visit my Patreon and help me out!](https://patreon.com/tannerlinsley).
|
||||
|
||||
| | | |
|
||||
| ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| [](https://patreon.com/tannerlinsley) | [](https://patreon.com/tannerlinsley) | [](https://patreon.com/tannerlinsley) |
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://patreon.com/tannerlinsley" target="_blank">
|
||||
<img src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/platinum.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://tryretool.com/?utm_source=sponsor&utm_campaign=react_table" target="_blank">
|
||||
<img src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/sponsor-retool.png">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
| | | | |
|
||||
| ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [](https://patreon.com/tannerlinsley) | [](https://patreon.com/tannerlinsley) | [](https://patreon.com/tannerlinsley) | [](https://patreon.com/tannerlinsley) |
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://patreon.com/tannerlinsley" target="_blank">
|
||||
<img src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/gold.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://tryretool.com/?utm_source=sponsor&utm_campaign=react_table" target="_blank">
|
||||
<img src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/gold-placeholder.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://tryretool.com/?utm_source=sponsor&utm_campaign=react_table" target="_blank">
|
||||
<img src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/gold-placeholder.png">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
**React Table v7** is mostly planned and I (@tannerlinsley) am looking for Patreon support to make it a reality. It will require a decent time commitment on my part to not only implement it, but also help people migrate and maintain it. If you would like to contribute to my Patreon goal for v7, [visit my Patreon and help me out!](https://patreon.com/tannerlinsley). Gold
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://patreon.com/tannerlinsley" target="_blank">
|
||||
<img src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://tryretool.com/?utm_source=sponsor&utm_campaign=react_table" target="_blank">
|
||||
<img src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver-placeholder.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://tryretool.com/?utm_source=sponsor&utm_campaign=react_table" target="_blank">
|
||||
<img src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver-placeholder.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://tryretool.com/?utm_source=sponsor&utm_campaign=react_table" target="_blank">
|
||||
<img src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver-placeholder.png">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Issues, Questions and Support
|
||||
|
||||
Github issues are temporarily disabled until v7 is out. Most if not all issues that were or will be opened are likely to be resolved or uneccessary after v7 is released (mostly due to the headless approach of the new component). If you have an issue or a question, feel free to use the [React Table Spectrum Community/Forum](https://spectrum.chat/react-table)!
|
||||
|
||||
## Table of Contents
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-table",
|
||||
"version": "6.8.7",
|
||||
"version": "6.9.2",
|
||||
"description": "A fast, lightweight, opinionated table and datagrid built on React",
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/react-tools/react-table#readme",
|
||||
|
||||
+50
-53
@@ -257,12 +257,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
|
||||
}
|
||||
|
||||
const makeHeaderGroups = () => {
|
||||
const theadGroupProps = _.splitProps(
|
||||
getTheadGroupProps(finalState, undefined, undefined, this)
|
||||
)
|
||||
const theadGroupTrProps = _.splitProps(
|
||||
getTheadGroupTrProps(finalState, undefined, undefined, this)
|
||||
)
|
||||
const theadGroupProps = _.splitProps(getTheadGroupProps(finalState, undefined, undefined, this))
|
||||
const theadGroupTrProps = _.splitProps(getTheadGroupTrProps(finalState, undefined, undefined, this))
|
||||
return (
|
||||
<TheadComponent
|
||||
className={classnames('-headerGroups', theadGroupProps.className)}
|
||||
@@ -665,11 +661,14 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
|
||||
{rowInfo.subRows &&
|
||||
isExpanded &&
|
||||
rowInfo.subRows.map((d, i) => makePageRow(d, i, rowInfo.nestingPath))}
|
||||
{SubComponent && !rowInfo.subRows && isExpanded && SubComponent(rowInfo, () => {
|
||||
const newExpanded = _.clone(expanded)
|
||||
{SubComponent &&
|
||||
!rowInfo.subRows &&
|
||||
isExpanded &&
|
||||
SubComponent(rowInfo, () => {
|
||||
const newExpanded = _.clone(expanded)
|
||||
|
||||
_.set(newExpanded, cellInfo.nestingPath, false)
|
||||
})}
|
||||
_.set(newExpanded, rowInfo.nestingPath, false)
|
||||
})}
|
||||
</TrGroupComponent>
|
||||
)
|
||||
}
|
||||
@@ -797,7 +796,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
|
||||
)
|
||||
}
|
||||
|
||||
const makePagination = (isTop) => {
|
||||
const makePagination = isTop => {
|
||||
const paginationProps = _.splitProps(
|
||||
getPaginationProps(finalState, undefined, undefined, this)
|
||||
)
|
||||
@@ -817,50 +816,48 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
|
||||
)
|
||||
}
|
||||
|
||||
const makeTable = () => {
|
||||
return (
|
||||
<div
|
||||
className={classnames('ReactTable', className, rootProps.className)}
|
||||
style={{
|
||||
...style,
|
||||
...rootProps.style,
|
||||
}}
|
||||
{...rootProps.rest}
|
||||
const makeTable = () => (
|
||||
<div
|
||||
className={classnames('ReactTable', className, rootProps.className)}
|
||||
style={{
|
||||
...style,
|
||||
...rootProps.style,
|
||||
}}
|
||||
{...rootProps.rest}
|
||||
>
|
||||
{showPagination && showPaginationTop ? (
|
||||
<div className="pagination-top">{makePagination(true)}</div>
|
||||
) : null}
|
||||
<TableComponent
|
||||
className={classnames(tableProps.className, currentlyResizing ? 'rt-resizing' : '')}
|
||||
style={tableProps.style}
|
||||
{...tableProps.rest}
|
||||
>
|
||||
{showPagination && showPaginationTop ? (
|
||||
<div className="pagination-top">{makePagination(true)}</div>
|
||||
) : null}
|
||||
<TableComponent
|
||||
className={classnames(tableProps.className, currentlyResizing ? 'rt-resizing' : '')}
|
||||
style={tableProps.style}
|
||||
{...tableProps.rest}
|
||||
{hasHeaderGroups ? makeHeaderGroups() : null}
|
||||
{makeHeaders()}
|
||||
{hasFilters ? makeFilters() : null}
|
||||
<TbodyComponent
|
||||
className={classnames(tBodyProps.className)}
|
||||
style={{
|
||||
...tBodyProps.style,
|
||||
minWidth: `${rowMinWidth}px`,
|
||||
}}
|
||||
{...tBodyProps.rest}
|
||||
>
|
||||
{hasHeaderGroups ? makeHeaderGroups() : null}
|
||||
{makeHeaders()}
|
||||
{hasFilters ? makeFilters() : null}
|
||||
<TbodyComponent
|
||||
className={classnames(tBodyProps.className)}
|
||||
style={{
|
||||
...tBodyProps.style,
|
||||
minWidth: `${rowMinWidth}px`,
|
||||
}}
|
||||
{...tBodyProps.rest}
|
||||
>
|
||||
{pageRows.map((d, i) => makePageRow(d, i))}
|
||||
{padRows.map(makePadRow)}
|
||||
</TbodyComponent>
|
||||
{hasColumnFooter ? makeColumnFooters() : null}
|
||||
</TableComponent>
|
||||
{showPagination && showPaginationBottom ? (
|
||||
<div className="pagination-bottom">{makePagination(false)}</div>
|
||||
) : null}
|
||||
{!pageRows.length && (
|
||||
<NoDataComponent {...noDataProps}>{_.normalizeComponent(noDataText)}</NoDataComponent>
|
||||
)}
|
||||
<LoadingComponent loading={loading} loadingText={loadingText} {...loadingProps} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{pageRows.map((d, i) => makePageRow(d, i))}
|
||||
{padRows.map(makePadRow)}
|
||||
</TbodyComponent>
|
||||
{hasColumnFooter ? makeColumnFooters() : null}
|
||||
</TableComponent>
|
||||
{showPagination && showPaginationBottom ? (
|
||||
<div className="pagination-bottom">{makePagination(false)}</div>
|
||||
) : null}
|
||||
{!pageRows.length && (
|
||||
<NoDataComponent {...noDataProps}>{_.normalizeComponent(noDataText)}</NoDataComponent>
|
||||
)}
|
||||
<LoadingComponent loading={loading} loadingText={loadingText} {...loadingProps} />
|
||||
</div>
|
||||
)
|
||||
|
||||
// childProps are optionally passed to a function-as-a-child
|
||||
return children ? children(finalState, makeTable, this) : makeTable()
|
||||
|
||||
+5
-6
@@ -30,7 +30,7 @@ export default Base =>
|
||||
SubComponent,
|
||||
} = newState
|
||||
|
||||
// Determine Header Groups
|
||||
// Determine if there are Header Groups
|
||||
let hasHeaderGroups = false
|
||||
columns.forEach(column => {
|
||||
if (column.columns) {
|
||||
@@ -43,11 +43,10 @@ export default Base =>
|
||||
let expanderColumn = columns.find(
|
||||
col => col.expander || (col.columns && col.columns.some(col2 => col2.expander))
|
||||
)
|
||||
// The actual expander might be in the columns field of a group column
|
||||
|
||||
if (expanderColumn && !expanderColumn.expander) {
|
||||
expanderColumn = expanderColumn.columns.find(col => col.expander)
|
||||
}
|
||||
|
||||
// If we have SubComponent's we need to make sure we have an expander column
|
||||
if (SubComponent && !expanderColumn) {
|
||||
expanderColumn = { expander: true }
|
||||
@@ -204,7 +203,7 @@ export default Base =>
|
||||
currentSpan = []
|
||||
}
|
||||
|
||||
// Build flast list of allVisibleColumns and HeaderGroups
|
||||
// Build flat list of allVisibleColumns and HeaderGroups
|
||||
visibleColumns.forEach(column => {
|
||||
if (column.columns) {
|
||||
allVisibleColumns = allVisibleColumns.concat(column.columns)
|
||||
@@ -323,7 +322,7 @@ export default Base =>
|
||||
sortedData: manual
|
||||
? resolvedData
|
||||
: this.sortData(
|
||||
this.filterData(resolvedData, filtered, defaultFilterMethod, allDecoratedColumns),
|
||||
this.filterData(resolvedData, filtered, defaultFilterMethod, allVisibleColumns),
|
||||
sorted,
|
||||
sortMethodsByColumnID
|
||||
),
|
||||
@@ -337,7 +336,7 @@ export default Base =>
|
||||
page: this.getStateOrProp('page'),
|
||||
pageSize: this.getStateOrProp('pageSize'),
|
||||
filter: this.getStateOrProp('filter'),
|
||||
};
|
||||
}
|
||||
|
||||
this.props.onFetchData(currentState, this)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user