Permissions
Connect interface availability to your authorization model.
Use table-wide flags for capabilities and row predicates for record-specific rules. Apply the same rules again in your backend actions.
Configuration example
Start from the React quick start or Vue quick start. The following file extends their product catalog. Pass this configuration through getTableConfig in React or config in Vue.
import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";
export const permissionsConfig = defineTableConfig({
...productConfig,
table: {
...productConfig.table,
allowEdit: true,
allowDelete: false,
allowDuplicate: false,
enableRowSelection: true,
canEditRow: (row) => row.status !== "archived",
canSelectRow: (row) => row.status !== "archived",
},
});import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";
export const permissionsConfig = defineTableConfig({
...productConfig,
table: {
...productConfig.table,
allowEdit: true,
allowDelete: false,
allowDuplicate: false,
enableRowSelection: true,
canEditRow: (row) => row.status !== "archived",
canSelectRow: (row) => row.status !== "archived",
},
});Three levels
Table flags control whether a feature is offered, and a feature is offered only when its action exists: Create needs actions.create, Edit actions.update, Delete actions.delete and Duplicate actions.duplicate. Without any row action, the actions column is omitted. Row guards (canEditRow, canDeleteRow, canDuplicateRow, canSelectRow) refine that decision per record. Form fields can be hidden or disabled from their context. None of these client controls replaces authentication, organization membership or field-level checks at the write boundary.
Bulk operations and exports
Authorize every selected ID, including IDs from another page. Return precise failedIds for a partial failure. Filter unauthorized records before computing counts or exports. Shared views are scoped to an organization; a personal favorite remains per user.
Build a read-only review screen
Declare the interface capabilities explicitly. The list endpoint still needs its own access checks and tenant scope.
Copy this complete configuration beside product-config.ts. Use () => exampleConfig as React’s getTableConfig, or :config="exampleConfig" in Vue.
Sample data. Changes stay in this preview.
import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
table: {
...productConfig.table,
allowCreate: false,
allowEdit: false,
allowInlineEdit: false,
allowDelete: false,
allowDuplicate: false,
allowBulkEdit: false,
allowBulkDelete: false,
enableRowSelection: false,
},
});Sample data. Changes stay in this preview.
import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
table: {
...productConfig.table,
allowCreate: false,
allowEdit: false,
allowInlineEdit: false,
allowDelete: false,
allowDuplicate: false,
allowBulkEdit: false,
allowBulkDelete: false,
enableRowSelection: false,
},
});Select only editable records
Combine selection and edit predicates so archived products are excluded from batch changes. Recheck each target in the server action, including stale selections.
Copy this complete configuration beside product-config.ts. Use () => exampleConfig as React’s getTableConfig, or :config="exampleConfig" in Vue.
Sample data. Changes stay in this preview.
import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
table: {
...productConfig.table,
enableRowSelection: true,
enableMultiRowSelection: true,
allowEdit: true,
allowBulkEdit: true,
canEditRow: (row) => row.status !== "archived",
canSelectRow: (row) => row.status !== "archived",
},
});Sample data. Changes stay in this preview.
import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
table: {
...productConfig.table,
enableRowSelection: true,
enableMultiRowSelection: true,
allowEdit: true,
allowBulkEdit: true,
canEditRow: (row) => row.status !== "archived",
canSelectRow: (row) => row.status !== "archived",
},
});