✨ feat: support paging / sorting (#64)

* ✨ feat: support paging / sorting

* 🔥 del: delete unused files

web/src/ui-component/TableHead.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import { TableCell, TableHead, TableRow, TableSortLabel } from '@mui/material';
+
+const KeywordTableHead = ({ order, orderBy, headLabel, onRequestSort }) => {
+  const onSort = (property) => (event) => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <TableHead>
+      <TableRow>
+        {headLabel.map((headCell) =>
+          headCell.hide && headCell.hide === true ? null : (
+            <TableCell
+              key={headCell.id}
+              align={headCell.align || 'left'}
+              // sortDirection={orderBy === headCell.id ? order : false}
+              sx={{ width: headCell.width, minWidth: headCell.minWidth }}
+            >
+              {headCell.disableSort ? (
+                headCell.label
+              ) : (
+                <TableSortLabel
+                  hideSortIcon
+                  active={orderBy === headCell.id}
+                  direction={orderBy === headCell.id ? order : 'asc'}
+                  onClick={onSort(headCell.id)}
+                >
+                  {headCell.label}
+                </TableSortLabel>
+              )}
+            </TableCell>
+          )
+        )}
+      </TableRow>
+    </TableHead>
+  );
+};
+
+export default KeywordTableHead;
+
+KeywordTableHead.propTypes = {
+  order: PropTypes.oneOf(['asc', 'desc']),
+  orderBy: PropTypes.string,
+  onRequestSort: PropTypes.func,
+  headLabel: PropTypes.array
+};

web/src/ui-component/TableToolBar.js

@@ -9,7 +9,7 @@ import { IconSearch } from '@tabler/icons-react';
 
 // ----------------------------------------------------------------------
 
-export default function TableToolBar({ filterName, handleFilterName, placeholder }) {
+export default function TableToolBar({ placeholder }) {
   const theme = useTheme();
   const grey500 = theme.palette.grey[500];
 
@@ -24,11 +24,10 @@ export default function TableToolBar({ filterName, handleFilterName, placeholder
     >
       <OutlinedInput
         id="keyword"
+        name="keyword"
         sx={{
           minWidth: '100%'
         }}
-        value={filterName}
-        onChange={handleFilterName}
         placeholder={placeholder}
         startAdornment={
           <InputAdornment position="start">