Adapting sorting to accept custom fields in Table component
This commit is contained in:
parent
d00cf82bda
commit
3891f3c1a5
|
@ -5,27 +5,26 @@ import TableCell from '@material-ui/core/TableCell'
|
|||
import TableHead from '@material-ui/core/TableHead'
|
||||
import TableRow from '@material-ui/core/TableRow'
|
||||
import TableSortLabel from '@material-ui/core/TableSortLabel'
|
||||
import Tooltip from '@material-ui/core/Tooltip'
|
||||
import { type Order } from '~/components/Table/sorting'
|
||||
|
||||
export type Column = {
|
||||
id: string,
|
||||
numeric: boolean,
|
||||
order: boolean,
|
||||
disablePadding: boolean,
|
||||
label: string,
|
||||
tooltip?: string,
|
||||
}
|
||||
|
||||
type Props = {
|
||||
columns: List<Column>,
|
||||
orderBy: string, // id of one of the described columns
|
||||
order: Order,
|
||||
onSort: (property: string) => void,
|
||||
onSort: (property: string, orderAttr: boolean) => void,
|
||||
}
|
||||
|
||||
class GnoTableHead extends React.PureComponent<Props> {
|
||||
changeSort = (property: string) => () => {
|
||||
this.props.onSort(property)
|
||||
changeSort = (property: string, orderAttr: boolean) => () => {
|
||||
this.props.onSort(property, orderAttr)
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -40,20 +39,14 @@ class GnoTableHead extends React.PureComponent<Props> {
|
|||
numeric={column.numeric}
|
||||
padding={column.disablePadding ? 'none' : 'default'}
|
||||
sortDirection={orderBy === column.id ? order : false}
|
||||
>
|
||||
<Tooltip
|
||||
title={column.tooltip}
|
||||
placement={column.numeric ? 'bottom-end' : 'bottom-start'}
|
||||
enterDelay={300}
|
||||
>
|
||||
<TableSortLabel
|
||||
active={orderBy === column.id}
|
||||
direction={order}
|
||||
onClick={this.changeSort(column.id)}
|
||||
onClick={this.changeSort(column.id, column.order)}
|
||||
>
|
||||
{column.label}
|
||||
</TableSortLabel>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
|
|
|
@ -20,6 +20,7 @@ type State = {
|
|||
page: number,
|
||||
order: Order,
|
||||
orderBy: string,
|
||||
orderProp: boolean,
|
||||
}
|
||||
|
||||
class GnoTable<K> extends React.Component<Props<K>, State> {
|
||||
|
@ -27,9 +28,10 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
|
|||
page: 0,
|
||||
order: 'desc',
|
||||
orderBy: this.props.defaultOrderBy,
|
||||
orderProp: false,
|
||||
}
|
||||
|
||||
onSort = (property: string) => {
|
||||
onSort = (property: string, orderProp: boolean) => {
|
||||
const orderBy = property
|
||||
let order = 'desc'
|
||||
|
||||
|
@ -37,14 +39,16 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
|
|||
order = 'asc'
|
||||
}
|
||||
|
||||
this.setState({ order, orderBy })
|
||||
this.setState({ order, orderBy, orderProp })
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
data, label, columns, rowsPerPage = 5,
|
||||
} = this.props
|
||||
const { order, orderBy, page } = this.state
|
||||
const {
|
||||
order, orderBy, page, orderProp,
|
||||
} = this.state
|
||||
|
||||
return (
|
||||
<Table aria-labelledby={label}>
|
||||
|
@ -55,12 +59,12 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
|
|||
onSort={this.onSort}
|
||||
/>
|
||||
<TableBody>
|
||||
{stableSort(data, getSorting(order, orderBy))
|
||||
{stableSort(data, getSorting(order, orderBy, orderProp))
|
||||
.slice(page * rowsPerPage, ((page * rowsPerPage) + rowsPerPage))
|
||||
.map((row: any) => (
|
||||
.map((row: any, index: number) => (
|
||||
<TableRow
|
||||
tabIndex={-1}
|
||||
key={row.id}
|
||||
key={index}
|
||||
>
|
||||
{
|
||||
columns.map((column: Column) => (
|
||||
|
|
|
@ -1,11 +1,17 @@
|
|||
// @flow
|
||||
const desc = (a, b, orderBy) => {
|
||||
if (b[orderBy] < a[orderBy]) {
|
||||
|
||||
export const buildOrderFieldFrom = (attr: string) => `${attr}Order`
|
||||
|
||||
const desc = (a: Object, b: Object, orderBy: string, orderProp: boolean) => {
|
||||
const order = orderProp ? buildOrderFieldFrom(orderBy) : orderBy
|
||||
|
||||
if (b[order] < a[order]) {
|
||||
return -1
|
||||
}
|
||||
if (b[orderBy] > a[orderBy]) {
|
||||
if (b[order] > a[order]) {
|
||||
return 1
|
||||
}
|
||||
|
||||
return 0
|
||||
}
|
||||
|
||||
|
@ -26,5 +32,5 @@ export const stableSort = (array: any, cmp: any) => {
|
|||
|
||||
export type Order = 'asc' | 'desc'
|
||||
|
||||
export const getSorting = (order: Order, orderBy: string) =>
|
||||
(order === 'desc' ? (a: any, b: any) => desc(a, b, orderBy) : (a: any, b: any) => -desc(a, b, orderBy))
|
||||
export const getSorting = (order: Order, orderBy: string, orderProp: boolean) =>
|
||||
(order === 'desc' ? (a: any, b: any) => desc(a, b, orderBy, orderProp) : (a: any, b: any) => -desc(a, b, orderBy, orderProp))
|
||||
|
|
Loading…
Reference in New Issue