allow passing defaultOrder prop to table component
This commit is contained in:
parent
f126071669
commit
654ff201b9
|
@ -21,6 +21,7 @@ type Props<K> = {
|
||||||
children: Function,
|
children: Function,
|
||||||
size: number,
|
size: number,
|
||||||
defaultFixed?: boolean,
|
defaultFixed?: boolean,
|
||||||
|
defaultOrder?: 'desc' | 'asc',
|
||||||
}
|
}
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
|
@ -61,7 +62,7 @@ const FIXED_HEIGHT = 49
|
||||||
class GnoTable<K> extends React.Component<Props<K>, State> {
|
class GnoTable<K> extends React.Component<Props<K>, State> {
|
||||||
state = {
|
state = {
|
||||||
page: 0,
|
page: 0,
|
||||||
order: 'asc',
|
order: undefined,
|
||||||
orderBy: undefined,
|
orderBy: undefined,
|
||||||
fixed: undefined,
|
fixed: undefined,
|
||||||
orderProp: false,
|
orderProp: false,
|
||||||
|
@ -70,9 +71,14 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
|
||||||
|
|
||||||
onSort = (newOrderBy: string, orderProp: boolean) => {
|
onSort = (newOrderBy: string, orderProp: boolean) => {
|
||||||
const { order, orderBy } = this.state
|
const { order, orderBy } = this.state
|
||||||
|
const { defaultOrder } = this.props
|
||||||
let newOrder = 'desc'
|
let newOrder = 'desc'
|
||||||
|
|
||||||
if (orderBy === newOrderBy && order === 'desc') {
|
// if table was previously sorted by the user
|
||||||
|
if (order && orderBy === newOrderBy && order === 'desc') {
|
||||||
|
newOrder = 'asc'
|
||||||
|
} else if (!order && defaultOrder === 'desc') {
|
||||||
|
// if it was not sorted and defaultOrder is used
|
||||||
newOrder = 'asc'
|
newOrder = 'asc'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -99,12 +105,13 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
data, label, columns, classes, children, size, defaultOrderBy, defaultFixed,
|
data, label, columns, classes, children, size, defaultOrderBy, defaultOrder, defaultFixed,
|
||||||
} = this.props
|
} = this.props
|
||||||
const {
|
const {
|
||||||
order, orderBy, page, orderProp, rowsPerPage, fixed,
|
order, orderBy, page, orderProp, rowsPerPage, fixed,
|
||||||
} = this.state
|
} = this.state
|
||||||
const orderByParam = orderBy || defaultOrderBy
|
const orderByParam = orderBy || defaultOrderBy
|
||||||
|
const orderParam = order || defaultOrder
|
||||||
const fixedParam = typeof fixed !== 'undefined' ? fixed : !!defaultFixed
|
const fixedParam = typeof fixed !== 'undefined' ? fixed : !!defaultFixed
|
||||||
|
|
||||||
const backProps = {
|
const backProps = {
|
||||||
|
@ -121,7 +128,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
|
||||||
input: classes.white,
|
input: classes.white,
|
||||||
}
|
}
|
||||||
|
|
||||||
const sortedData = stableSort(data, getSorting(order, orderByParam, orderProp), fixedParam).slice(
|
const sortedData = stableSort(data, getSorting(orderParam, orderByParam, orderProp), fixedParam).slice(
|
||||||
page * rowsPerPage,
|
page * rowsPerPage,
|
||||||
page * rowsPerPage + rowsPerPage,
|
page * rowsPerPage + rowsPerPage,
|
||||||
)
|
)
|
||||||
|
@ -133,7 +140,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
{!isEmpty && (
|
{!isEmpty && (
|
||||||
<Table aria-labelledby={label} className={classes.root}>
|
<Table aria-labelledby={label} className={classes.root}>
|
||||||
<TableHead columns={columns} order={order} orderBy={orderByParam} onSort={this.onSort} />
|
<TableHead columns={columns} order={orderParam} orderBy={orderByParam} onSort={this.onSort} />
|
||||||
<TableBody>{children(sortedData)}</TableBody>
|
<TableBody>{children(sortedData)}</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
)}
|
)}
|
||||||
|
@ -159,4 +166,8 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
GnoTable.defaultProps = {
|
||||||
|
defaultOrder: 'asc'
|
||||||
|
}
|
||||||
|
|
||||||
export default withStyles(styles)(GnoTable)
|
export default withStyles(styles)(GnoTable)
|
||||||
|
|
|
@ -79,7 +79,7 @@ export const generateColumns = () => {
|
||||||
id: TX_TABLE_STATUS_ID,
|
id: TX_TABLE_STATUS_ID,
|
||||||
order: false,
|
order: false,
|
||||||
disablePadding: false,
|
disablePadding: false,
|
||||||
label: '',
|
label: 'Status',
|
||||||
custom: true,
|
custom: true,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -51,6 +51,7 @@ class Balances extends React.Component<Props, State> {
|
||||||
<Table
|
<Table
|
||||||
label="Transactions"
|
label="Transactions"
|
||||||
defaultOrderBy={TX_TABLE_NONCE_ID}
|
defaultOrderBy={TX_TABLE_NONCE_ID}
|
||||||
|
defaultOrder="desc"
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={filteredData}
|
data={filteredData}
|
||||||
size={filteredData.size}
|
size={filteredData.size}
|
||||||
|
|
Loading…
Reference in New Issue