Add table header sorting

Author: modularcoder

src/Administration/Users/UsersList/UsersList.js

@@ -5,13 +5,14 @@ import Grid from '@material-ui/core/Grid'
 import {
   makeStyles,
   Paper,
-  TableContainer,
   Table,
   TableCell,
   TableRow,
   TableHead,
   TableBody,
   TableFooter,
+  TableContainer,
+  TableSortLabel,
 } from '@material-ui/core'
 
 import { Alert, AlertTitle } from '@material-ui/lab'
@@ -32,6 +33,46 @@ const UsersList = ({ match }) => {
   const [page, setPage] = React.useState(0)
   const [usersData, setUsersData] = useState({ users: [], count: 0 })
   const [rowsPerPage, setRowsPerPage] = React.useState(10)
+  const [order, setOrder] = React.useState({
+    order: 'desc',
+    orderBy: 'createdAt',
+  })
+
+  const { users, count } = usersData
+  const rowsExpected = count ? Math.max(count - rowsPerPage * page, 0) : rowsPerPage
+
+  const tableColumns = [
+    {
+      id: 'avatarUrl',
+      label: '',
+      isSortable: false,
+    },
+    {
+      id: 'firstName',
+      label: 'First Name',
+      isSortable: true,
+    },
+    {
+      id: 'lastName',
+      label: 'Last Name',
+      isSortable: true,
+    },
+    {
+      id: 'username',
+      label: 'Username',
+      isSortable: true,
+    },
+    {
+      id: 'email',
+      label: 'Email',
+      isSortable: true,
+    },
+    {
+      id: 'createdAt',
+      label: 'Created',
+      isSortable: true,
+    },
+  ]
 
   // Request users
   useEffect(() => {
@@ -71,8 +112,12 @@ const UsersList = ({ match }) => {
     setPage(0)
   }
 
-  const { users, count } = usersData
-  const rowsExpected = count ? Math.max(count - rowsPerPage * page, 0) : rowsPerPage
+  const handelChangeOrder = (event, columnId) => {
+    setOrder({
+      order: order.order === 'asc' ? 'desc' : 'asc',
+      orderBy: columnId,
+    })
+  }
 
   return (
     <BasePageContainer>
@@ -91,11 +136,17 @@ const UsersList = ({ match }) => {
               <Table className={classes.table} aria-label="custom pagination table">
                 <TableHead>
                   <TableRow>
-                    <TableCell>Avatar</TableCell>
-                    <TableCell>First Name</TableCell>
-                    <TableCell>Last Name</TableCell>
-                    <TableCell>Username</TableCell>
-                    <TableCell>Email</TableCell>
+                    {tableColumns.map(column => (
+                      <TableCell key={column.id}>
+                        <TableSortLabel
+                          active={order.orderBy === column.id}
+                          direction={order.orderBy === column.id ? order.order : 'asc'}
+                          onClick={event => handelChangeOrder(event, column.id)}
+                        >
+                          {column.label}
+                        </TableSortLabel>
+                      </TableCell>
+                    ))}
                     <TableCell>Actions</TableCell>
                   </TableRow>
                 </TableHead>
@@ -112,6 +163,7 @@ const UsersList = ({ match }) => {
                       page={page}
                       rowsPerPage={rowsPerPage}
                       count={count}
+                      order={order}
                       onChangePage={handleChangePage}
                       onChangeRowsPerPage={handleChangeRowsPerPage}
                     />

src/Administration/Users/UsersList/UsersListTableItems.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { FormattedDate } from 'react-intl'
 
 import { makeStyles, TableBody, TableCell, TableRow, Avatar } from '@material-ui/core'
 import { Skeleton } from '@material-ui/lab'
@@ -39,6 +40,9 @@ const UsersListTableItems = ({ users, rowsPerPage = 10, rowsExpected = 10 }) =>
             <TableCell>
               <Skeleton variant="text" />
             </TableCell>
+            <TableCell>
+              <Skeleton variant="text" />
+            </TableCell>
           </TableRow>
         ))}
       {users.map(row => (
@@ -52,6 +56,14 @@ const UsersListTableItems = ({ users, rowsPerPage = 10, rowsExpected = 10 }) =>
           <TableCell>{row.lastName}</TableCell>
           <TableCell>{row.username}</TableCell>
           <TableCell>{row.email}</TableCell>
+          <TableCell>
+            <FormattedDate
+              value={new Date(row.createdAt)}
+              year="numeric"
+              month="long"
+              day="2-digit"
+            />
+          </TableCell>
           <TableCell>
             <EditIcon />
             <DeleteIcon />

src/_api/_data/usersData.ts

@@ -1,4 +1,5 @@
 import _keyBy from 'lodash/keyBy'
+import moment from 'moment'
 import User from '../_types/User'
 import organizationsToUsersData from './organizationsToUsersData'
 
@@ -150,7 +151,14 @@ const list: User[] = [
       'https://images-na.ssl-images-amazon.com/images/M/MV5BMTgxMTc1MTYzM15BMl5BanBnXkFtZTgwNzI5NjMwOTE@._V1_UY256_CR16,0,172,256_AL_.jpg',
     userToOrganizations: organizationsToUsersData.byUserId[5],
   },
-]
+].map(item => {
+  return {
+    ...item,
+    createdAt: moment()
+      .subtract(item.id, 'days')
+      .format(),
+  }
+})
 
 const byId: { [key: number]: User } = _keyBy(list, 'id')
 

src/_api/_types/User.ts

@@ -7,7 +7,7 @@ export type UserId = EntityId
 
 // global user role across the system (useful for SAAS or if organizations arn't used)
 // Each user can have only one global role
-export type UserGlobalRole = 'admin' | 'support' | 'member'
+// export type UserGlobalRole = 'admin' | 'support' | 'member'
 
 export interface UserSubmissionData {
   firstName?: string
@@ -17,7 +17,7 @@ export interface UserSubmissionData {
   email: string
   password?: string
   avatarUrl?: string
-  globalRole?: UserGlobalRole
+  globalRole?: string
 }
 
 export default interface User extends UserSubmissionData, Entity {