Added inline documentation to table components

compass/components/Table/ResourceTable.tsx

@@ -20,12 +20,14 @@ type ResourceTableProps = {
 export default function ResourceTable({ data, setData }: ResourceTableProps ) {
     const columnHelper = createColumnHelper<Resource>();    
 
+    // Set up tag handling
     const programProps = useTagsHandler([
         "community",
         "domestic",
         "economic",
     ])
 
+    // Define Tanstack columns
     const columns: ColumnDef<Resource, any>[] = [
         columnHelper.accessor("name", {
             header: () => (

compass/components/Table/ServiceTable.tsx

@@ -20,6 +20,7 @@ type ServiceTableProps = {
 export default function ServiceTable({ data, setData }: ServiceTableProps ) {
     const columnHelper = createColumnHelper<Service>();
     
+    // Set up tag handling
     const programProps = useTagsHandler([
         "community",
         "domestic",
@@ -37,6 +38,7 @@ export default function ServiceTable({ data, setData }: ServiceTableProps ) {
         'initial assessment',
     ])
 
+    // Define Tanstack columns
     const columns: ColumnDef<Service, any>[] = [
         columnHelper.accessor("name", {
             header: () => (

compass/components/Table/Table.tsx

@@ -26,7 +26,7 @@ type TableProps<T extends DataPoint> = {
     columns: ColumnDef<T, any>[]
 };
 
-// For search
+/** Fuzzy search function */
 const fuzzyFilter = (
     row: Row<any>,
     columnId: string,
@@ -52,18 +52,19 @@ const fuzzyFilter = (
 export default function Table<T extends DataPoint>({ data, setData, columns }: TableProps<T>) {
     const columnHelper = createColumnHelper<T>();
     
-    // For sorting
+    /** Sorting function based on visibility */
     const visibilitySort = (a: T, b: T) => (
         a.visible === b.visible 
         ? 0 
         : a.visible ? -1 : 1
     )
 
+    // Sort data on load
     useEffect(() => {
         setData(prevData => prevData.sort(visibilitySort))
     }, [setData]);
 
-    // Data manipulation
+    // Data manipulation methods
     // TODO: Connect data manipulation methods to the database (deleteData, hideData, addData)
     const deleteData = (dataId: number) => {
         console.log(data);
@@ -121,6 +122,7 @@ export default function Table<T extends DataPoint>({ data, setData, columns }: T
 
     // TODO: Sorting
 
+    // Define Tanstack table
     const table = useReactTable({
         columns,
         data,

compass/components/Table/UserTable.tsx

@@ -20,6 +20,7 @@ type UserTableProps = {
 export default function UserTable({ data, setData }: UserTableProps ) {
     const columnHelper = createColumnHelper<User>();
     
+    // Set up tag handling
     const roleProps = useTagsHandler([
         "administrator",
         "volunteer",
@@ -32,6 +33,7 @@ export default function UserTable({ data, setData }: UserTableProps ) {
         "economic",
     ])
     
+    // Define Tanstack columns
     const columns: ColumnDef<User, any>[] = [
         columnHelper.accessor("username", {
             header: () => (