5a46372afd
**What** This PR adds core DataTable enhancements to support view configurations in the admin dashboard. This is part of a set of stacked PRs to add the feature to Medusa. - Puts handlers in place to update the visible columns in a table and the order in which they appear. - Adds a ViewPills component for displaying and switching between saved view configurations - Integrated view configuration hooks (useViewConfigurations) with the DataTable Note: Column drag-and-drop reordering and the column visibility UI controls are not included in this PR as they require additional UI library updates - which will come in the next PR. Example of what this looks like with the feature flag turned on - note the view pills with "default" in the top. This will expand when the data table behavior adds configuration. <img width="2492" height="758" alt="CleanShot 2025-08-13 at 2 31 35@2x" src="https://github.com/user-attachments/assets/ee770f1c-dae1-49da-b255-1a6d615789de" />
71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import { HttpTypes } from "@medusajs/types"
|
|
|
|
export enum ColumnAlignment {
|
|
LEFT = "left",
|
|
CENTER = "center",
|
|
RIGHT = "right",
|
|
}
|
|
|
|
const DEFAULT_COLUMN_ORDER = 500
|
|
|
|
/**
|
|
* Determines the appropriate column alignment based on the column metadata
|
|
*/
|
|
export function getColumnAlignment(column: HttpTypes.AdminViewColumn): ColumnAlignment {
|
|
// Currency columns should be right-aligned
|
|
if (column.semantic_type === "currency" || column.data_type === "currency") {
|
|
return ColumnAlignment.RIGHT
|
|
}
|
|
|
|
// Number columns should be right-aligned (except identifiers)
|
|
if (column.data_type === "number" && column.context !== "identifier") {
|
|
return ColumnAlignment.RIGHT
|
|
}
|
|
|
|
// Total/amount/price columns should be right-aligned
|
|
if (
|
|
column.field.includes("total") ||
|
|
column.field.includes("amount") ||
|
|
column.field.includes("price")
|
|
) {
|
|
return ColumnAlignment.RIGHT
|
|
}
|
|
|
|
// Country columns should be center-aligned
|
|
if (column.field === "country" || column.field.includes("country_code")) {
|
|
return ColumnAlignment.CENTER
|
|
}
|
|
|
|
// Default to left alignment
|
|
return ColumnAlignment.LEFT
|
|
}
|
|
|
|
/**
|
|
* Gets the initial column visibility state from API columns
|
|
*/
|
|
export function getInitialColumnVisibility(
|
|
apiColumns: HttpTypes.AdminViewColumn[]
|
|
): Record<string, boolean> {
|
|
const visibility: Record<string, boolean> = {}
|
|
|
|
apiColumns.forEach(column => {
|
|
visibility[column.field] = column.default_visible
|
|
})
|
|
|
|
return visibility
|
|
}
|
|
|
|
/**
|
|
* Gets the initial column order from API columns
|
|
*/
|
|
export function getInitialColumnOrder(
|
|
apiColumns: HttpTypes.AdminViewColumn[]
|
|
): string[] {
|
|
const sortedColumns = [...apiColumns].sort((a, b) => {
|
|
const orderA = a.default_order ?? DEFAULT_COLUMN_ORDER
|
|
const orderB = b.default_order ?? DEFAULT_COLUMN_ORDER
|
|
return orderA - orderB
|
|
})
|
|
|
|
return sortedColumns.map(col => col.field)
|
|
} |