feat: basic sorting for the table (learnwithparam#4)

pranav6527 · Nov 24, 2019 · 3e74534 · 3e74534
1 parent 8403cca
commit 3e74534
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 11 deletions.
diff --git a/src/App.css b/src/App.css
@@ -11,6 +11,7 @@ table td {
   padding: 0.5rem;
   border-bottom: 1px solid #ededed;
   border-right: 1px solid #ededed;
+  position: relative;
 }
 table th:last-child,
 table td:last-child {
@@ -20,19 +21,28 @@ table tr:nth-child(even) {
   background-color: #fafafa;
 }
 
+table th::before {
+  position: absolute;
+  right: 15px;
+  top: 16px;
+  content: "";
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+table th.sort-asc::before {
+  border-bottom: 5px solid #22543d;
+}
+table th.sort-desc::before {
+  border-top: 5px solid #22543d;
+}
+
 .App {
   display: flex;
   flex-direction: column;
   padding: 20px;
 }
-input {
-  padding: 10px;
-  margin-bottom: 20px;
-  font-size: 18px;
-  border-radius: 5px;
-  border: 1px solid #ddd;
-  box-shadow: none;
-}
 .badge {
   background-color: #9ae6b4;
   color: #22543d;
@@ -43,3 +53,11 @@ input {
   font-weight: bold;
   text-transform: uppercase;
 }
+input {
+  padding: 10px;
+  margin-bottom: 20px;
+  font-size: 18px;
+  border-radius: 5px;
+  border: 1px solid #ddd;
+  box-shadow: none;
+}
diff --git a/src/Table.js b/src/Table.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useTable, useFilters } from "react-table";
+import { useTable, useFilters, useSortBy } from "react-table";
 
 export default function Table({ columns, data }) {
   const [filterInput, setFilterInput] = useState("");
@@ -16,7 +16,8 @@ export default function Table({ columns, data }) {
       columns,
       data
     },
-    useFilters
+    useFilters,
+    useSortBy
   );
 
   const handleFilterChange = e => {
@@ -38,7 +39,18 @@ export default function Table({ columns, data }) {
           {headerGroups.map(headerGroup => (
             <tr {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map(column => (
-                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
+                <th
+                  {...column.getHeaderProps(column.getSortByToggleProps())}
+                  className={
+                    column.isSorted
+                      ? column.isSortedDesc
+                        ? "sort-desc"
+                        : "sort-asc"
+                      : ""
+                  }
+                >
+                  {column.render("Header")}
+                </th>
               ))}
             </tr>
           ))}