definePlugin

definePlugin<TData, TSchema>(options): object

Defined in: definePlugin.ts:281

Define a plugin with type-safe configuration.

This function creates a plugin factory with a configure method that validates configuration at runtime using the provided Zod schema.

Type Parameters

TData

TData

TSchema

TSchema extends ZodType<unknown, unknown, $ZodTypeInternals<unknown, unknown>>

Parameters

options

DefinePluginOptions<TData, TSchema>

Returns

object

configure()

configure: (config) => SeizenTablePlugin<TData>

Parameters

config

input<TSchema>

Returns

SeizenTablePlugin<TData>

Example

import { z } from "zod";
import { definePlugin, cellContextMenuItem, usePluginContext } from "@izumisy/seizen-table/plugin";

const BulkActionsSchema = z.object({
  enableDelete: z.boolean().default(true),
  enableExport: z.boolean().default(true),
});

function createSidePanelRenderer(context: PluginContext<z.infer<typeof BulkActionsSchema>>) {
  const { args } = context;
  return function SidePanelContent() {
    const { selectedRows } = usePluginContext();
    if (selectedRows.length === 0) return null;
    return (
      <div className="bulk-actions">
        <span>{selectedRows.length} selected</span>
        {args.enableDelete && <button>Delete</button>}
        {args.enableExport && <button>Export</button>}
      </div>
    );
  };
}

const BulkActions = definePlugin({
  id: "bulk-actions",
  name: "Bulk Actions",
  args: BulkActionsSchema,
  slots: {
    sidePanel: {
      position: "right-sider",
      render: createSidePanelRenderer,
    },
  },
  contextMenuItems: {
    cell: [
      cellContextMenuItem("copy-value", (ctx) => ({
        label: "Copy value",
        onClick: () => navigator.clipboard.writeText(String(ctx.value)),
      })),
    ],
  },
});

// Usage
<SeizenTable plugins={[BulkActions.configure({ enableDelete: true })]} />