{
+ toggleSort={e => (
isSortable && this.sortColumn(column, e.shiftKey)
- }}
+ )}
{...rest}
>
{_.normalizeComponent(column.Header, {
data: sortedData,
- column: column,
+ column,
})}
{resizer}
@@ -397,28 +381,28 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
)
}
- const makeFilters = () => {
- const theadFilterProps = _.splitProps(
- getTheadFilterProps(finalState, undefined, undefined, this)
+ const makeHeaders = () => {
+ const theadProps = _.splitProps(
+ getTheadProps(finalState, undefined, undefined, this),
)
- const theadFilterTrProps = _.splitProps(
- getTheadFilterTrProps(finalState, undefined, undefined, this)
+ const theadTrProps = _.splitProps(
+ getTheadTrProps(finalState, undefined, undefined, this),
)
return (
- {allVisibleColumns.map(makeFilter)}
+ {allVisibleColumns.map(makeHeader)}
)
@@ -429,18 +413,18 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
const width = _.getFirstDefined(
resizedCol.value,
column.width,
- column.minWidth
+ column.minWidth,
)
const maxWidth = _.getFirstDefined(
resizedCol.value,
column.width,
- column.maxWidth
+ column.maxWidth,
)
const theadFilterThProps = _.splitProps(
- getTheadFilterThProps(finalState, undefined, column, this)
+ getTheadFilterThProps(finalState, undefined, column, this),
)
const columnHeaderProps = _.splitProps(
- column.getHeaderProps(finalState, undefined, column, this)
+ column.getHeaderProps(finalState, undefined, column, this),
)
const classes = [
@@ -467,12 +451,12 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
const isFilterable = _.getFirstDefined(
column.filterable,
filterable,
- false
+ false,
)
return (
this.filterColumn(column, value),
},
- defaultProps.column.Filter
+ defaultProps.column.Filter,
)
: null}
)
}
+ const makeFilters = () => {
+ const theadFilterProps = _.splitProps(
+ getTheadFilterProps(finalState, undefined, undefined, this),
+ )
+ const theadFilterTrProps = _.splitProps(
+ getTheadFilterTrProps(finalState, undefined, undefined, this),
+ )
+ return (
+
+
+ {allVisibleColumns.map(makeFilter)}
+
+
+ )
+ }
+
const makePageRow = (row, i, path = []) => {
const rowInfo = {
original: row[originalKey],
- row: row,
+ row,
index: row[indexKey],
- viewIndex: ++rowIndex,
- pageSize: pageSize,
- page: page,
+ viewIndex: rowIndex += 1,
+ pageSize,
+ page,
level: path.length,
nestingPath: path.concat([i]),
aggregated: row[aggregatedKey],
@@ -514,14 +525,14 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
const isExpanded = _.get(expanded, rowInfo.nestingPath)
const trGroupProps = getTrGroupProps(finalState, rowInfo, undefined, this)
const trProps = _.splitProps(
- getTrProps(finalState, rowInfo, undefined, this)
+ getTrProps(finalState, rowInfo, undefined, this),
)
return (
{
+ () => (
onExpandedChange &&
onExpandedChange(newExpanded, cellInfo.nestingPath, e)
- }
+ ),
)
}
@@ -605,7 +616,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
let resolvedCell = _.normalizeComponent(
column.Cell,
cellInfo,
- value
+ value,
)
// Resolve Renderers
@@ -632,7 +643,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
// Make it expandable by defualt
cellInfo.expandable = true
useOnExpanderClick = true
- // If pivoted, has no subRows, and does not have a subComponent, do not make expandable
+ // If pivoted, has no subRows, and does not have a subComponent,
+ // do not make expandable
if (cellInfo.pivoted && !cellInfo.subRows && !SubComponent) {
cellInfo.expandable = false
}
@@ -655,14 +667,14 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
...cellInfo,
value: row[pivotValKey],
},
- row[pivotValKey]
+ row[pivotValKey],
)
} else if (isPreview) {
// Show the pivot preview
resolvedCell = _.normalizeComponent(
ResolvedAggregatedComponent,
cellInfo,
- value
+ value,
)
} else {
resolvedCell = null
@@ -671,7 +683,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
resolvedCell = _.normalizeComponent(
ResolvedAggregatedComponent,
cellInfo,
- value
+ value,
)
}
@@ -679,7 +691,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
resolvedCell = _.normalizeComponent(
ResolvedExpanderComponent,
cellInfo,
- row[pivotValKey]
+ row[pivotValKey],
)
if (pivotBy) {
if (cellInfo.groupedByPivot) {
@@ -695,7 +707,9 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
? onExpanderClick
: () => {}
- // If there are multiple onClick events, make sure they don't override eachother. This should maybe be expanded to handle all function attributes
+ // If there are multiple onClick events, make sure they don't
+ // override eachother. This should maybe be expanded to handle all
+ // function attributes
const interactionProps = {
onClick: resolvedOnExpanderClick,
}
@@ -715,12 +729,13 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
// Return the cell
return (
- makePageRow(d, i, rowInfo.nestingPath)
+ makePageRow(d, i, rowInfo.nestingPath),
)}
{SubComponent &&
!rowInfo.subRows &&
@@ -750,52 +765,26 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
)
}
- const makePadRow = (row, i) => {
- const trGroupProps = getTrGroupProps(
- finalState,
- undefined,
- undefined,
- this
- )
- const trProps = _.splitProps(
- getTrProps(finalState, undefined, undefined, this)
- )
- return (
-
-
- {allVisibleColumns.map(makePadColumn)}
-
-
- )
- }
-
const makePadColumn = (column, i) => {
const resizedCol = resized.find(x => x.id === column.id) || {}
const show =
typeof column.show === 'function' ? column.show() : column.show
- let width = _.getFirstDefined(
+ const width = _.getFirstDefined(
resizedCol.value,
column.width,
- column.minWidth
+ column.minWidth,
)
- let flex = width
- let maxWidth = _.getFirstDefined(
+ const flex = width
+ const maxWidth = _.getFirstDefined(
resizedCol.value,
column.width,
- column.maxWidth
+ column.maxWidth,
)
const tdProps = _.splitProps(
- getTdProps(finalState, undefined, column, this)
+ getTdProps(finalState, undefined, column, this),
)
const columnProps = _.splitProps(
- column.getProps(finalState, undefined, column, this)
+ column.getProps(finalState, undefined, column, this),
)
const classes = [
@@ -812,7 +801,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
return (
{
+ const trGroupProps = getTrGroupProps(
+ finalState,
+ undefined,
+ undefined,
+ this,
+ )
+ const trProps = _.splitProps(
+ getTrProps(finalState, undefined, undefined, this),
+ )
+ return (
+
+
+ {allVisibleColumns.map(makePadColumn)}
+
+
+ )
+ }
+
+ const makeColumnFooter = (column, i) => {
+ const resizedCol = resized.find(x => x.id === column.id) || {}
+ const show =
+ typeof column.show === 'function' ? column.show() : column.show
+ const width = _.getFirstDefined(
+ resizedCol.value,
+ column.width,
+ column.minWidth,
+ )
+ const maxWidth = _.getFirstDefined(
+ resizedCol.value,
+ column.width,
+ column.maxWidth,
+ )
+ const tFootTdProps = _.splitProps(
+ getTfootTdProps(finalState, undefined, undefined, this),
+ )
+ const columnProps = _.splitProps(
+ column.getProps(finalState, undefined, column, this),
+ )
+ const columnFooterProps = _.splitProps(
+ column.getFooterProps(finalState, undefined, column, this),
+ )
+
+ const classes = [
+ tFootTdProps.className,
+ column.className,
+ columnProps.className,
+ columnFooterProps.className,
+ ]
+
+ const styles = {
+ ...tFootTdProps.style,
+ ...column.style,
+ ...columnProps.style,
+ ...columnFooterProps.style,
+ }
+
+ return (
+
+ {_.normalizeComponent(column.Footer, {
+ data: sortedData,
+ column,
+ })}
+
+ )
+ }
+
const makeColumnFooters = () => {
const tFootProps = getTfootProps(finalState, undefined, undefined, this)
const tFootTrProps = _.splitProps(
- getTfootTrProps(finalState, undefined, undefined, this)
+ getTfootTrProps(finalState, undefined, undefined, this),
)
return (
{
- const resizedCol = resized.find(x => x.id === column.id) || {}
- const show =
- typeof column.show === 'function' ? column.show() : column.show
- const width = _.getFirstDefined(
- resizedCol.value,
- column.width,
- column.minWidth
- )
- const maxWidth = _.getFirstDefined(
- resizedCol.value,
- column.width,
- column.maxWidth
- )
- const tFootTdProps = _.splitProps(
- getTfootTdProps(finalState, undefined, undefined, this)
- )
- const columnProps = _.splitProps(
- column.getProps(finalState, undefined, column, this)
- )
- const columnFooterProps = _.splitProps(
- column.getFooterProps(finalState, undefined, column, this)
- )
-
- const classes = [
- tFootTdProps.className,
- column.className,
- columnProps.className,
- columnFooterProps.className,
- ]
-
- const styles = {
- ...tFootTdProps.style,
- ...column.style,
- ...columnProps.style,
- ...columnFooterProps.style,
- }
-
- return (
-
- {_.normalizeComponent(column.Footer, {
- data: sortedData,
- column: column,
- })}
-
- )
- }
-
const makePagination = () => {
const paginationProps = _.splitProps(
- getPaginationProps(finalState, undefined, undefined, this)
+ getPaginationProps(finalState, undefined, undefined, this),
)
return (
{
const pagination = makePagination()
return (
@@ -956,14 +958,14 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
{...rootProps.rest}
>
{showPagination && showPaginationTop
- ?
+ ?
{pagination}
: null}
{showPagination && showPaginationBottom
- ?