acazares
2b735c27b8
- Added columns definition for Code Pedimento Regimens including ID, Pedimento Code, Regimen Code, Type, and Actions. - Created DataTableActions component for handling actions on each row. - Developed data-table component to manage pagination and rendering of the data table. - Introduced helper functions for rendering components and snippets in table cells. - Integrated API call in the server-side load function to fetch Code Pedimento Regimens data with pagination support. - Updated package.json to include lucide-svelte dependency for icons.
112 lines
3.6 KiB
TypeScript
112 lines
3.6 KiB
TypeScript
import type { Component, ComponentProps, Snippet } from "svelte";
|
|
|
|
/**
|
|
* A helper class to make it easy to identify Svelte components in
|
|
* `columnDef.cell` and `columnDef.header` properties.
|
|
*
|
|
* > NOTE: This class should only be used internally by the adapter. If you're
|
|
* reading this and you don't know what this is for, you probably don't need it.
|
|
*
|
|
* @example
|
|
* ```svelte
|
|
* {@const result = content(context as any)}
|
|
* {#if result instanceof RenderComponentConfig}
|
|
* {@const { component: Component, props } = result}
|
|
* <Component {...props} />
|
|
* {/if}
|
|
* ```
|
|
*/
|
|
export class RenderComponentConfig<TComponent extends Component> {
|
|
component: TComponent;
|
|
props: ComponentProps<TComponent> | Record<string, never>;
|
|
constructor(
|
|
component: TComponent,
|
|
props: ComponentProps<TComponent> | Record<string, never> = {}
|
|
) {
|
|
this.component = component;
|
|
this.props = props;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
|
|
*
|
|
* > NOTE: This class should only be used internally by the adapter. If you're
|
|
* reading this and you don't know what this is for, you probably don't need it.
|
|
*
|
|
* @example
|
|
* ```svelte
|
|
* {@const result = content(context as any)}
|
|
* {#if result instanceof RenderSnippetConfig}
|
|
* {@const { snippet, params } = result}
|
|
* {@render snippet(params)}
|
|
* {/if}
|
|
* ```
|
|
*/
|
|
export class RenderSnippetConfig<TProps> {
|
|
snippet: Snippet<[TProps]>;
|
|
params: TProps;
|
|
constructor(snippet: Snippet<[TProps]>, params: TProps) {
|
|
this.snippet = snippet;
|
|
this.params = params;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
|
|
*
|
|
* This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
|
|
*
|
|
* @param component A Svelte component
|
|
* @param props The props to pass to `component`
|
|
* @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
|
|
* @example
|
|
* ```ts
|
|
* // +page.svelte
|
|
* const defaultColumns = [
|
|
* columnHelper.accessor('name', {
|
|
* header: header => renderComponent(SortHeader, { label: 'Name', header }),
|
|
* }),
|
|
* columnHelper.accessor('state', {
|
|
* header: header => renderComponent(SortHeader, { label: 'State', header }),
|
|
* }),
|
|
* ]
|
|
* ```
|
|
* @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
|
|
*/
|
|
export function renderComponent<
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
T extends Component<any>,
|
|
Props extends ComponentProps<T>,
|
|
>(component: T, props: Props = {} as Props) {
|
|
return new RenderComponentConfig(component, props);
|
|
}
|
|
|
|
/**
|
|
* A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
|
|
*
|
|
* The snippet must only take one parameter.
|
|
*
|
|
* This is only to be used with Snippets - use `renderComponent` for Svelte Components.
|
|
*
|
|
* @param snippet
|
|
* @param params
|
|
* @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
|
|
* @example
|
|
* ```ts
|
|
* // +page.svelte
|
|
* const defaultColumns = [
|
|
* columnHelper.accessor('name', {
|
|
* cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
|
|
* }),
|
|
* columnHelper.accessor('state', {
|
|
* cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
|
|
* }),
|
|
* ]
|
|
* ```
|
|
* @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
|
|
*/
|
|
export function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params: TProps = {} as TProps) {
|
|
return new RenderSnippetConfig(snippet, params);
|
|
}
|