AdminTable Component and Associated APIs

The AdminTable is a versatile Vue component designed for displaying and managing tabular data within an admin interface. It offers features like pagination, sorting, filtering, column visibility control, and row selection.

AdminTable Component

app/components/AdminTable/index.vue

The core component, orchestrates the display and interaction of the table.

Key Features:

• Data Fetching: Accepts a fetchData prop, a function responsible for retrieving data based on pagination, sorting, and filtering parameters.
• Column Definition: Uses a columns prop to define the table structure, including headers and data accessors.
• Filtering: Supports various filter types (input, checkbox, tabs, daterange) defined via the filters prop. Filter changes trigger data refetching.
• Pagination: Integrates a component, with page number and items per page synced with URL query parameters.
• Sorting: Sort options are also synced with URL query parameters.
• Column Visibility: Leverages the composable and component to allow users to show/hide columns.
• Row Selection: If canSelect is true, it enables row selection functionality, managed by the composable.
• State Management: Component state (page, limit, sort options) is reactive and synchronized with the URL query parameters for better user experience and shareability.
• Error Handling: Includes basic error handling for data fetching operations, displaying toast notifications on failure.
• Refresh Functionality: Provides a handleRefresh method to manually refetch table data.

Backend APIs

Two main API endpoints support the AdminTable component:

1. List API (/api/admin/list/[tableName].get.ts)

   • This dynamic GET endpoint retrieves a paginated and filtered list of records for a specified tableName.
   • Path Parameter: tableName (string) - The name of the database table to query.
   • Query Parameters:
     • page (number, optional, default: 1): The page number for pagination.
     • limit (number, optional, default: 20, max: 100): The number of items per page.
     • filter (string, optional): A JSON string representing an array of filter conditions (e.g., [{ "col": "name", "op": "like", "v": "test" }]).
     • sort (string, optional): A JSON string representing an array of sort conditions (e.g., [[ "createdAt", "desc" ]]).
   • Functionality:
     • Validates the tableName.
     • Parses and applies filter and sort query parameters.
     • Applies pagination using page and limit.
     • Returns an object containing data (array of records), total (total record count), page, and limit.
     • Uses Drizzle ORM for database interactions.

2. Count API (/api/admin/count/[tableName]/[columnName].get.ts)

   • This dynamic GET endpoint retrieves the count of distinct values for a specified columnName within a given tableName, optionally filtered.
   • Path Parameters:
     • tableName (string): The name of the database table.
     • columnName (string): The name of the column to count distinct values from.
   • Query Parameters:
     • filter (string, optional): A JSON string representing an array of filter conditions, similar to the List API.
   • Functionality:
     • Validates tableName and columnName.
     • Parses and applies filter query parameters.
     • Returns an array of objects, each containing a distinct column value and its count.
     • Useful for generating statistics or populating filter options (e.g., checkboxes with counts).

This combination of a flexible frontend component and robust backend APIs provides a powerful system for data management in the admin panel.