[Feature] add a data table component #305
Description
Is your feature request related to a problem? Please describe.
Currently, our application directly uses table components from the UI library (one that isbased on shadcn/ui) which requires extensive markup and repetitive code across multiple list components. Looking at components like TicketList, OrderList, InvoiceList, and NotificationList, we can see a consistent pattern of:
- Each component manually renders
Table,TableHeader,TableBody,TableRow,TableHead, andTableCellcomponents - Each component has switch statements to handle different column types (e.g.,
topic,type,status,updatedAt) with specific styling and rendering log - Any changes to table styling or behavior require updates across multiple components
Describe the solution you'd like
Create a new DataList (or perhaps suggest a beter name for it) component that:
- Use the existing
DataTable<T>class frompackages/framework/src/utils/models/data-table.tsas the foundation for a standardized data structure - The component should automatically render tables based on the provided data model, eliminating the need for manual table markup, and with the same underlying table structure and styling patterns
- Include built-in support for common column types (text, badge, date, actions) with appropriate styling and rendering logic
Example transformation:
// Current version (simplified)
<Table>
<TableHeader>
<TableRow>
{data.table.columns.map((column) => (
<TableHead>{column.title}</TableHead>
))}
{data.table.actions && (
<TableHead>{data.table.actions.title}</TableHead>
)}
</TableRow>
</TableHeader>
<TableBody>
{data.tickets.data.map((ticket) => (
<TableRow key={ticket.id}>
{data.table.columns.map((column) => {
switch (column.id) {
case 'topic':
return (
<TableCell>{ticket[column.id].label}</TableCell>
);
case 'type':
return (
<TableCell>{ticket[column.id].label}</TableCell>
);
case 'status':
return (
<TableCell>
<Badge>{ticket[column.id].label}</Badge>
</TableCell>
);
case 'updatedAt':
return (
<TableCell>{ticket[column.id]}</TableCell>
);
default:
return null;
}
})}
{data.table.actions && (
<TableCell className="py-0">
<Button asChild variant="link">{data.table.actions.label}</Button>
</TableCell>
)}
</TableRow>
))}
</TableBody>
</Table>
// Desired version (simplified)
<DataList data={data.tickets} columns={data.table.columns} />The new component should:
- Accept a
DataTable<T>model with columns and actions configuration - Accept an array of data items of type
T - Support custom cell renderers for specific column types
- Provide consistent styling and behavior across all list components
- Be easily extensible for new column types and actions
This would replace the current manual table rendering in components like TicketList.client.tsx, OrderList.client.tsx, InvoiceList.client.tsx, and NotificationList.client.tsx with a single, reusable component that handles all the complexity internally.
As an additional requirement, please provide a short feedback on your experiences with working with this framework - how easy or difficult it was to get started (including starting the project, getting around the monorepo or readings our docs) and to make the required changes.