Enable multi-selection on table views (#112)

* Enable multi-selection on table views

* Enable multi-selection

front/src/components/table/SelectAllCheckbox.tsx

@@ -0,0 +1,18 @@
+import Checkbox from '../form/Checkbox';
+
+export const SelectAllCheckbox = ({
+  indeterminate,
+  onChange,
+}: {
+  indeterminate?: boolean;
+  onChange?: any;
+} & React.HTMLProps<HTMLInputElement>) => {
+  return (
+    <Checkbox
+      name="select-all-checkbox"
+      id="select-all-checkbox"
+      indeterminate={indeterminate}
+      onChange={onChange}
+    />
+  );
+};

front/src/components/table/Table.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import {
   ColumnDef,
+  RowSelectionState,
   flexRender,
   getCoreRowModel,
   useReactTable,
@@ -34,6 +35,7 @@ type OwnProps<TData, SortField, FilterProperties> = {
     filter: FilterType<FilterProperties> | null,
     searchValue: string,
   ) => void;
+  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;
 };
 
 const StyledTable = styled.table`
@@ -98,11 +100,23 @@ function Table<TData extends { id: string }, SortField, FilterProperies>({
   onSortsUpdate,
   onFiltersUpdate,
   onFilterSearch,
+  onRowSelectionChange,
 }: OwnProps<TData, SortField, FilterProperies>) {
+  const [rowSelection, setRowSelection] = React.useState({});
+
+  React.useEffect(() => {
+    onRowSelectionChange && onRowSelectionChange(rowSelection);
+  }, [rowSelection, onRowSelectionChange]);
+
   const table = useReactTable<TData>({
     data,
     columns,
+    state: {
+      rowSelection,
+    },
     getCoreRowModel: getCoreRowModel(),
+    enableRowSelection: true, //enable row selection for all rows
+    onRowSelectionChange: setRowSelection,
   });
 
   return (