@shwfed/nuxt 0.7.8 → 0.7.10

package/dist/runtime/components/ui/table-configurator/TableConfiguratorDialog.vue

@@ -0,0 +1,2233 @@
+<script setup>
+import { useNuxtApp } from "#app";
+import { useSortable } from "@vueuse/integrations/useSortable";
+import { Icon } from "@iconify/vue";
+import z from "zod";
+import { computed, nextTick, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useTableRenderers } from "../../../composables/useTableRenderers";
+import { dotPropC, expressionC } from "../../../utils/coders";
+import { cn } from "../../../utils/cn";
+import ExpressionEditor from "../expression-editor/ExpressionEditor.vue";
+import { Button } from "../button";
+import { Checkbox } from "../checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../dialog";
+import { Input } from "../input";
+import { InputGroup, InputGroupNumberField } from "../input-group";
+import Locale from "../locale/Locale.vue";
+import { NativeSelect, NativeSelectOption } from "../native-select";
+import { NumberField, NumberFieldInput } from "../number-field";
+import { Switch } from "../switch";
+import { Textarea } from "../textarea";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs";
+import { Toggle } from "../toggle";
+import {
+  getColumnTechnicalKey,
+  getLocalizedText,
+  TableConfigC,
+  TableConfigCellStylesC,
+  TableConfigEnableMultiRowSelectionC,
+  TableConfigEnableRowSelectionC,
+  TableConfigGetRowIdC,
+  TableConfigGetSubRowsC
+} from "../table/schema";
+import {
+  buildTableConfiguratorColumnTree,
+  createTableConfiguratorDraftColumnNode,
+  flattenTableConfiguratorColumnTree,
+  getTableConfiguratorColumnAncestorItemIds,
+  getTableConfiguratorColumnDescendantItemIds,
+  getTableConfiguratorColumnNode,
+  insertTableConfiguratorRootColumnNode,
+  materializeTableConfiguratorColumnTree,
+  moveTableConfiguratorColumnNodeAfterItem,
+  moveTableConfiguratorColumnNodeToParent,
+  moveTableConfiguratorColumnSibling,
+  removeTableConfiguratorColumnSubtree,
+  updateTableConfiguratorColumnNode
+} from "./menu";
+const GENERATED_COLUMN_ID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/iu;
+const TableConfiguratorColumnAccessorReadC = expressionC(/.+/, { row: "dyn", index: "int" });
+const TableConfiguratorColumnAccessorWriteC = z.string().trim().refine((value) => value.length > 0, { error: "\u5199\u5165\u8868\u8FBE\u5F0F\u4E0D\u80FD\u4E3A\u7A7A" });
+const TOOLTIP_EXPRESSION_EXAMPLE = "{{ expression }}";
+const props = defineProps({
+  config: { type: Object, required: true }
+});
+const emit = defineEmits(["confirm"]);
+const open = defineModel("open", { type: Boolean, ...{
+  default: false
+} });
+const { $toast } = useNuxtApp();
+const { t, locale } = useI18n();
+const { listTableRenderers, resolveTableRenderer } = useTableRenderers();
+const search = ref("");
+const childSearch = ref("");
+const selectedItemId = ref("general");
+const draftBaseConfig = ref({ columns: [] });
+const draftColumnTree = ref(buildTableConfiguratorColumnTree([]));
+const draftGetRowId = ref();
+const draftGetSubRows = ref();
+const draftEnableRowSelection = ref();
+const draftEnableMultiRowSelection = ref();
+const draftCellStyles = ref();
+const draftPaginationLeft = ref();
+const draftPaginationRight = ref();
+const draftPageSize = ref();
+const leftPinnedSortableListRef = ref(null);
+const leftPinnedSortableItemIds = ref([]);
+const centerSortableListRef = ref(null);
+const centerSortableItemIds = ref([]);
+const rightPinnedSortableListRef = ref(null);
+const rightPinnedSortableItemIds = ref([]);
+const leftPinnedRootItemIds = ref([]);
+const centerRootItemIds = ref([]);
+const rightPinnedRootItemIds = ref([]);
+const selectedChildSortableListRef = ref(null);
+const selectedChildSortableItemIds = ref([]);
+const getRowIdEditor = ref(null);
+const getSubRowsEditor = ref(null);
+const enableRowSelectionEditor = ref(null);
+const enableMultiRowSelectionEditor = ref(null);
+const cellStylesEditor = ref(null);
+const importInputRef = ref(null);
+const accessorPathEditor = ref(null);
+const accessorReadEditor = ref(null);
+const accessorWriteEditor = ref(null);
+const selectedRendererConfigRef = ref(null);
+const selectedColumnAccessorMode = ref("path");
+const generalItem = computed(() => ({
+  id: "general",
+  label: t("general")
+}));
+const normalizedSearch = computed(() => search.value.trim().toLocaleLowerCase());
+const normalizedChildSearch = computed(() => childSearch.value.trim().toLocaleLowerCase());
+const selectedColumnNode = computed(() => {
+  if (selectedItemId.value === "general") {
+    return void 0;
+  }
+  return getTableConfiguratorColumnNode(draftColumnTree.value, selectedItemId.value);
+});
+const selectedColumn = computed(() => selectedColumnNode.value?.column);
+const selectedColumnTechnicalKey = computed(() => selectedColumn.value ? getColumnTechnicalKey(selectedColumn.value) : void 0);
+const selectedColumnAncestorItemIds = computed(() => {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return [];
+  }
+  return getTableConfiguratorColumnAncestorItemIds(draftColumnTree.value, node.itemId);
+});
+const selectedColumnDescendantItemIds = computed(() => {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return [];
+  }
+  return getTableConfiguratorColumnDescendantItemIds(draftColumnTree.value, node.itemId);
+});
+function looksLikeGeneratedColumnId(value) {
+  if (!value) {
+    return false;
+  }
+  return GENERATED_COLUMN_ID_RE.test(value);
+}
+function getColumnSearchMeta(column, hasChildren) {
+  if (typeof column.accessor === "string") {
+    return column.accessor;
+  }
+  if (column.accessor) {
+    return column.accessor.read;
+  }
+  if (column.id && (hasChildren || !looksLikeGeneratedColumnId(column.id))) {
+    return column.id;
+  }
+  return void 0;
+}
+function createListItem(itemId, depth) {
+  const node = getTableConfiguratorColumnNode(draftColumnTree.value, itemId);
+  if (!node) {
+    return void 0;
+  }
+  const hasChildren = node.childItemIds.length > 0;
+  const searchMeta = getColumnSearchMeta(node.column, hasChildren);
+  return {
+    itemId,
+    label: getLocalizedText(node.column.title, locale.value) ?? searchMeta ?? t("untitled-column"),
+    searchMeta,
+    depth,
+    hasChildren,
+    column: node.column
+  };
+}
+const columnListItems = computed(() => flattenTableConfiguratorColumnTree(draftColumnTree.value).flatMap((item) => {
+  const listItem = createListItem(item.itemId, item.depth);
+  return listItem ? [listItem] : [];
+}));
+const filteredColumnItems = computed(() => {
+  if (!normalizedSearch.value) {
+    return columnListItems.value;
+  }
+  return columnListItems.value.filter((item) => matchesSearch(item, normalizedSearch.value));
+});
+const selectedColumnItem = computed(() => columnListItems.value.find((item) => item.itemId === selectedItemId.value));
+const selectedItemLabel = computed(() => selectedColumnItem.value?.label ?? generalItem.value.label);
+const selectedColumnLocaleValue = computed(() => {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return void 0;
+  }
+  if (node.column.title) {
+    return node.column.title;
+  }
+  const fallbackLabel = getColumnSearchMeta(node.column, node.childItemIds.length > 0);
+  if (!fallbackLabel) {
+    return void 0;
+  }
+  return [
+    {
+      locale: "zh",
+      message: fallbackLabel
+    }
+  ];
+});
+const selectedColumnTooltipValue = computed(() => {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return void 0;
+  }
+  return node.column.tooltip;
+});
+const selectedColumnHasChildren = computed(() => (selectedColumnNode.value?.childItemIds.length ?? 0) > 0);
+const rendererOptions = computed(() => listTableRenderers().map((renderer) => ({
+  id: renderer.id,
+  label: getTableConfiguratorRendererLabel(renderer.id)
+})));
+function getTableConfiguratorRendererLabel(rendererId) {
+  const segments = rendererId.split(".");
+  const leaf = segments.at(-1) ?? rendererId;
+  if (locale.value.startsWith("ja")) {
+    const labels2 = {
+      text: "\u30C6\u30AD\u30B9\u30C8",
+      selection: "\u9078\u629E",
+      expand: "\u5C55\u958B",
+      money: "\u91D1\u984D",
+      date: "\u65E5\u4ED8",
+      markdown: "Markdown"
+    };
+    const label2 = labels2[leaf];
+    if (label2) {
+      return label2;
+    }
+  }
+  if (locale.value.startsWith("en")) {
+    const labels2 = {
+      text: "Text",
+      selection: "Selection",
+      expand: "Expand",
+      money: "Money",
+      date: "Date",
+      markdown: "Markdown"
+    };
+    const label2 = labels2[leaf];
+    if (label2) {
+      return label2;
+    }
+  }
+  const labels = {
+    text: "\u6587\u672C",
+    selection: "\u9009\u62E9",
+    expand: "\u5C55\u5F00",
+    money: "\u91D1\u989D",
+    date: "\u65E5\u671F",
+    markdown: "Markdown"
+  };
+  const label = labels[leaf];
+  if (label) {
+    return label;
+  }
+  return `${leaf.slice(0, 1).toLocaleUpperCase()}${leaf.slice(1)}`;
+}
+function getColumnRendererId(column) {
+  if (!column) {
+    return "table.renderer.text";
+  }
+  if (typeof column.renderer === "string") {
+    return column.renderer;
+  }
+  return column.renderer?.id ?? "table.renderer.text";
+}
+function getColumnRendererProps(column) {
+  if (!column || !column.renderer || typeof column.renderer === "string") {
+    return void 0;
+  }
+  return column.renderer.props;
+}
+const selectedColumnRendererId = computed(() => getColumnRendererId(selectedColumn.value));
+const selectedColumnRendererModel = computed({
+  get() {
+    return selectedColumnRendererId.value;
+  },
+  set(value) {
+    updateSelectedColumnRendererId(value);
+  }
+});
+const selectedColumnRenderer = computed(() => resolveTableRenderer(selectedColumnRendererId.value));
+const selectedColumnRendererConfigComponent = computed(() => selectedColumnRenderer.value.config);
+const selectedColumnRendererOptions = computed(() => {
+  const renderer = selectedColumnRenderer.value;
+  try {
+    return renderer.parseOptions(getColumnRendererProps(selectedColumn.value));
+  } catch (e) {
+    console.error(e);
+    return renderer.parseOptions(void 0);
+  }
+});
+function isDotPropPath(value) {
+  if (!value) {
+    return false;
+  }
+  return dotPropC.safeParse(value).success;
+}
+async function copySelectedColumnId() {
+  if (!selectedColumnTechnicalKey.value) {
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(selectedColumnTechnicalKey.value);
+  } catch (e) {
+    console.error(e);
+  }
+}
+function getColumnAccessorPath(column) {
+  if (!column) {
+    return void 0;
+  }
+  if (typeof column.accessor === "string") {
+    return column.accessor;
+  }
+  if (!column.accessor) {
+    return void 0;
+  }
+  if (isDotPropPath(column.accessor.write)) {
+    return column.accessor.write;
+  }
+  const read = column.accessor.read;
+  if (!read.startsWith("row")) {
+    return void 0;
+  }
+  const path = read.slice(3);
+  const normalizedPath = path.startsWith(".") ? path.slice(1) : path;
+  return isDotPropPath(normalizedPath) ? normalizedPath : void 0;
+}
+function createAccessorReadFromPath(path) {
+  if (!path) {
+    return "";
+  }
+  return path.startsWith("[") ? `row${path}` : `row.${path}`;
+}
+function getColumnAccessorExpression(column) {
+  if (column?.accessor && typeof column.accessor !== "string") {
+    return column.accessor;
+  }
+  const path = getColumnAccessorPath(column);
+  return {
+    read: createAccessorReadFromPath(path),
+    write: path ?? ""
+  };
+}
+function getColumnAccessorMode(column) {
+  if (column?.accessor && typeof column.accessor !== "string") {
+    return "expression";
+  }
+  return "path";
+}
+const selectedColumnAccessorPath = computed(() => getColumnAccessorPath(selectedColumn.value));
+const selectedColumnAccessorExpression = computed(() => getColumnAccessorExpression(selectedColumn.value));
+function normalizeOptionalText(value) {
+  if (value === void 0 || value.trim().length === 0) {
+    return void 0;
+  }
+  return value;
+}
+function normalizeOptionalNumber(value) {
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? value : void 0;
+  }
+  if (value === void 0 || value.trim().length === 0) {
+    return void 0;
+  }
+  const normalized = Number(value);
+  return Number.isFinite(normalized) ? normalized : void 0;
+}
+function getInitialPageSize(config) {
+  return config.props?.initialState?.pagination?.pageSize;
+}
+function isRendererConfigExposed(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const clearValidation = Reflect.get(value, "clearValidation");
+  const validate = Reflect.get(value, "validate");
+  return typeof clearValidation === "function" && typeof validate === "function";
+}
+function areRendererOptionsDefault(rendererId, props2) {
+  const renderer = resolveTableRenderer(rendererId);
+  const normalizedProps = renderer.parseOptions(props2);
+  const defaultProps = renderer.parseOptions(void 0);
+  return JSON.stringify(normalizedProps) === JSON.stringify(defaultProps);
+}
+function buildColumnRenderer(rendererId, props2) {
+  const renderer = resolveTableRenderer(rendererId);
+  const normalizedProps = renderer.parseOptions(props2);
+  if (areRendererOptionsDefault(rendererId, normalizedProps)) {
+    return rendererId;
+  }
+  return {
+    id: renderer.id,
+    props: normalizedProps
+  };
+}
+function getLeafColumnTechnicalKeys(itemId) {
+  const node = getTableConfiguratorColumnNode(draftColumnTree.value, itemId);
+  if (!node) {
+    return void 0;
+  }
+  if (node.childItemIds.length === 0) {
+    const technicalKey = getColumnTechnicalKey(node.column);
+    return technicalKey ? [technicalKey] : void 0;
+  }
+  const leafColumnIds = [];
+  for (const childItemId of node.childItemIds) {
+    const childLeafColumnIds = getLeafColumnTechnicalKeys(childItemId);
+    if (!childLeafColumnIds?.length) {
+      return void 0;
+    }
+    leafColumnIds.push(...childLeafColumnIds);
+  }
+  return leafColumnIds;
+}
+function createRootInitialStateItem(itemId) {
+  const listItem = createListItem(itemId, 0);
+  if (!listItem) {
+    return void 0;
+  }
+  const leafColumnIds = getLeafColumnTechnicalKeys(itemId) ?? [];
+  return {
+    itemId,
+    label: listItem.label,
+    leafColumnIds,
+    canManage: leafColumnIds.length > 0
+  };
+}
+const rootInitialStateItems = computed(() => draftColumnTree.value.rootItemIds.flatMap((itemId) => {
+  const listItem = createRootInitialStateItem(itemId);
+  return listItem ? [listItem] : [];
+}));
+function resolveRootInitialStateItems(itemIds) {
+  return itemIds.flatMap((itemId) => {
+    const item = rootInitialStateItems.value.find((candidate) => candidate.itemId === itemId);
+    return item ? [item] : [];
+  });
+}
+const leftPinnedInitialStateItems = computed(() => resolveRootInitialStateItems(leftPinnedRootItemIds.value));
+const centerInitialStateItems = computed(() => resolveRootInitialStateItems(centerRootItemIds.value));
+const rightPinnedInitialStateItems = computed(() => resolveRootInitialStateItems(rightPinnedRootItemIds.value));
+const selectedChildItems = computed(() => {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return [];
+  }
+  return node.childItemIds.flatMap((itemId) => {
+    const listItem = createListItem(itemId, 0);
+    return listItem ? [listItem] : [];
+  });
+});
+const childCandidateItems = computed(() => {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return [];
+  }
+  const excludedItemIds = /* @__PURE__ */ new Set([
+    node.itemId,
+    ...selectedColumnAncestorItemIds.value,
+    ...selectedColumnDescendantItemIds.value
+  ]);
+  return columnListItems.value.filter((item) => !excludedItemIds.has(item.itemId));
+});
+const filteredChildCandidateItems = computed(() => {
+  if (!normalizedChildSearch.value) {
+    return childCandidateItems.value;
+  }
+  return childCandidateItems.value.filter((item) => matchesSearch(item, normalizedChildSearch.value));
+});
+function matchesSearch(item, normalizedValue) {
+  const haystack = [item.label, item.searchMeta].filter((value) => value).join(" ").toLocaleLowerCase();
+  return haystack.includes(normalizedValue);
+}
+function reorderItemIds(itemIds, oldIndex, newIndex) {
+  if (oldIndex < 0 || newIndex < 0 || oldIndex >= itemIds.length || newIndex >= itemIds.length) {
+    return itemIds.slice();
+  }
+  const nextItemIds = itemIds.slice();
+  const movedItemId = nextItemIds[oldIndex];
+  if (!movedItemId) {
+    return itemIds.slice();
+  }
+  nextItemIds.splice(oldIndex, 1);
+  nextItemIds.splice(newIndex, 0, movedItemId);
+  return nextItemIds;
+}
+function initializeInitialStateGroups(config) {
+  const leafColumnIdToRootItemId = /* @__PURE__ */ new Map();
+  for (const item of rootInitialStateItems.value) {
+    if (!item.canManage) {
+      continue;
+    }
+    for (const leafColumnId of item.leafColumnIds) {
+      if (!leafColumnIdToRootItemId.has(leafColumnId)) {
+        leafColumnIdToRootItemId.set(leafColumnId, item.itemId);
+      }
+    }
+  }
+  const initialState = config.props?.initialState;
+  const leftItemIds = [];
+  const rightItemIds = [];
+  const centerItemIds = [];
+  for (const leafColumnId of initialState?.columnPinning?.left ?? []) {
+    const itemId = leafColumnIdToRootItemId.get(leafColumnId);
+    if (!itemId || leftItemIds.includes(itemId)) {
+      continue;
+    }
+    leftItemIds.push(itemId);
+  }
+  for (const leafColumnId of initialState?.columnPinning?.right ?? []) {
+    const itemId = leafColumnIdToRootItemId.get(leafColumnId);
+    if (!itemId || leftItemIds.includes(itemId) || rightItemIds.includes(itemId)) {
+      continue;
+    }
+    rightItemIds.push(itemId);
+  }
+  for (const leafColumnId of initialState?.columnOrder ?? []) {
+    const itemId = leafColumnIdToRootItemId.get(leafColumnId);
+    if (!itemId || leftItemIds.includes(itemId) || rightItemIds.includes(itemId) || centerItemIds.includes(itemId)) {
+      continue;
+    }
+    centerItemIds.push(itemId);
+  }
+  for (const item of rootInitialStateItems.value) {
+    if (leftItemIds.includes(item.itemId) || rightItemIds.includes(item.itemId) || centerItemIds.includes(item.itemId)) {
+      continue;
+    }
+    centerItemIds.push(item.itemId);
+  }
+  leftPinnedRootItemIds.value = leftItemIds;
+  centerRootItemIds.value = centerItemIds;
+  rightPinnedRootItemIds.value = rightItemIds;
+}
+function resetDraftState(config) {
+  draftBaseConfig.value = config;
+  draftColumnTree.value = buildTableConfiguratorColumnTree(config.columns);
+  draftGetRowId.value = config.getRowId;
+  draftGetSubRows.value = config.getSubRows;
+  draftEnableRowSelection.value = config.enableRowSelection;
+  draftEnableMultiRowSelection.value = config.enableMultiRowSelection;
+  draftCellStyles.value = config.cellStyles;
+  draftPaginationLeft.value = config.paginationLeft;
+  draftPaginationRight.value = config.paginationRight;
+  draftPageSize.value = getInitialPageSize(config);
+  initializeInitialStateGroups(config);
+  childSearch.value = "";
+  selectedItemId.value = "general";
+  clearExpressionValidation();
+}
+watch(() => props.config, (config) => {
+  if (!open.value) {
+    resetDraftState(config);
+  }
+}, { immediate: true });
+const leftPinnedSortable = useSortable(leftPinnedSortableListRef, leftPinnedSortableItemIds);
+const centerSortable = useSortable(centerSortableListRef, centerSortableItemIds);
+const rightPinnedSortable = useSortable(rightPinnedSortableListRef, rightPinnedSortableItemIds);
+const childSortable = useSortable(selectedChildSortableListRef, selectedChildSortableItemIds);
+function syncSortableItemIds() {
+  leftPinnedSortableItemIds.value = leftPinnedRootItemIds.value.slice();
+  centerSortableItemIds.value = centerRootItemIds.value.slice();
+  rightPinnedSortableItemIds.value = rightPinnedRootItemIds.value.slice();
+  selectedChildSortableItemIds.value = selectedColumnNode.value?.childItemIds.slice() ?? [];
+}
+function normalizeInitialStateGroups() {
+  const rootItemIdSet = new Set(rootInitialStateItems.value.map((item) => item.itemId));
+  const manageableRootItemIdSet = new Set(
+    rootInitialStateItems.value.filter((item) => item.canManage).map((item) => item.itemId)
+  );
+  const leftItemIds = [];
+  const centerItemIds = [];
+  const rightItemIds = [];
+  for (const itemId of leftPinnedRootItemIds.value) {
+    if (!rootItemIdSet.has(itemId) || !manageableRootItemIdSet.has(itemId) || leftItemIds.includes(itemId)) {
+      continue;
+    }
+    leftItemIds.push(itemId);
+  }
+  for (const itemId of centerRootItemIds.value) {
+    if (!rootItemIdSet.has(itemId) || leftItemIds.includes(itemId) || centerItemIds.includes(itemId)) {
+      continue;
+    }
+    centerItemIds.push(itemId);
+  }
+  for (const itemId of rightPinnedRootItemIds.value) {
+    if (!rootItemIdSet.has(itemId) || !manageableRootItemIdSet.has(itemId) || leftItemIds.includes(itemId) || centerItemIds.includes(itemId) || rightItemIds.includes(itemId)) {
+      continue;
+    }
+    rightItemIds.push(itemId);
+  }
+  for (const item of rootInitialStateItems.value) {
+    if (leftItemIds.includes(item.itemId) || centerItemIds.includes(item.itemId) || rightItemIds.includes(item.itemId)) {
+      continue;
+    }
+    centerItemIds.push(item.itemId);
+  }
+  leftPinnedRootItemIds.value = leftItemIds;
+  centerRootItemIds.value = centerItemIds;
+  rightPinnedRootItemIds.value = rightItemIds;
+}
+function handleLeftPinnedSortableUpdate(event) {
+  const oldIndex = event.oldIndex;
+  const newIndex = event.newIndex;
+  if (selectedItemId.value !== "general" || oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
+    return;
+  }
+  leftPinnedRootItemIds.value = reorderItemIds(
+    leftPinnedRootItemIds.value,
+    oldIndex,
+    newIndex
+  );
+}
+function handleCenterSortableUpdate(event) {
+  const oldIndex = event.oldIndex;
+  const newIndex = event.newIndex;
+  if (selectedItemId.value !== "general" || oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
+    return;
+  }
+  centerRootItemIds.value = reorderItemIds(
+    centerRootItemIds.value,
+    oldIndex,
+    newIndex
+  );
+}
+function handleRightPinnedSortableUpdate(event) {
+  const oldIndex = event.oldIndex;
+  const newIndex = event.newIndex;
+  if (selectedItemId.value !== "general" || oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
+    return;
+  }
+  rightPinnedRootItemIds.value = reorderItemIds(
+    rightPinnedRootItemIds.value,
+    oldIndex,
+    newIndex
+  );
+}
+function handleChildSortableUpdate(event) {
+  const oldIndex = event.oldIndex;
+  const newIndex = event.newIndex;
+  const node = selectedColumnNode.value;
+  if (!node || oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
+    return;
+  }
+  draftColumnTree.value = moveTableConfiguratorColumnSibling(
+    draftColumnTree.value,
+    node.itemId,
+    oldIndex,
+    newIndex
+  );
+}
+function configureLeftPinnedSortable() {
+  leftPinnedSortable.option("animation", 150);
+  leftPinnedSortable.option("handle", '[data-slot="table-configurator-initial-state-left-drag-handle"]');
+  leftPinnedSortable.option("onUpdate", handleLeftPinnedSortableUpdate);
+}
+function configureCenterSortable() {
+  centerSortable.option("animation", 150);
+  centerSortable.option("handle", '[data-slot="table-configurator-initial-state-center-drag-handle"]');
+  centerSortable.option("onUpdate", handleCenterSortableUpdate);
+}
+function configureRightPinnedSortable() {
+  rightPinnedSortable.option("animation", 150);
+  rightPinnedSortable.option("handle", '[data-slot="table-configurator-initial-state-right-drag-handle"]');
+  rightPinnedSortable.option("onUpdate", handleRightPinnedSortableUpdate);
+}
+function configureChildSortable() {
+  childSortable.option("animation", 150);
+  childSortable.option("handle", '[data-slot="table-configurator-child-drag-handle"]');
+  childSortable.option("onUpdate", handleChildSortableUpdate);
+}
+async function refreshSortable() {
+  leftPinnedSortable.stop();
+  centerSortable.stop();
+  rightPinnedSortable.stop();
+  childSortable.stop();
+  if (!open.value) {
+    return;
+  }
+  await nextTick();
+  if (selectedItemId.value === "general") {
+    leftPinnedSortable.start();
+    centerSortable.start();
+    rightPinnedSortable.start();
+    configureLeftPinnedSortable();
+    configureCenterSortable();
+    configureRightPinnedSortable();
+    return;
+  }
+  if (selectedColumnNode.value) {
+    childSortable.start();
+    configureChildSortable();
+  }
+}
+watch(rootInitialStateItems, () => {
+  normalizeInitialStateGroups();
+}, { immediate: true });
+watch([draftColumnTree, selectedItemId, leftPinnedRootItemIds, centerRootItemIds, rightPinnedRootItemIds], () => {
+  syncSortableItemIds();
+}, { immediate: true });
+watch(open, async (value) => {
+  if (value) {
+    resetDraftState(props.config);
+    await refreshSortable();
+    return;
+  }
+  leftPinnedSortable.stop();
+  centerSortable.stop();
+  rightPinnedSortable.stop();
+  childSortable.stop();
+  childSearch.value = "";
+  search.value = "";
+}, { immediate: true });
+watch(selectedItemId, async () => {
+  childSearch.value = "";
+  clearAccessorValidation();
+  clearRendererValidation();
+  selectedColumnAccessorMode.value = getColumnAccessorMode(selectedColumn.value);
+  if (!open.value) {
+    return;
+  }
+  await refreshSortable();
+});
+watch(selectedColumnAccessorMode, (value, oldValue) => {
+  if (value === oldValue) {
+    return;
+  }
+  updateSelectedColumnAccessorMode(value);
+});
+watch(columnListItems, (items) => {
+  if (selectedItemId.value === "general") {
+    return;
+  }
+  if (!items.some((item) => item.itemId === selectedItemId.value)) {
+    selectedItemId.value = "general";
+  }
+}, { immediate: true });
+watch(filteredColumnItems, (items) => {
+  if (!normalizedSearch.value || selectedItemId.value === "general") {
+    return;
+  }
+  if (items.some((item) => item.itemId === selectedItemId.value)) {
+    return;
+  }
+  selectedItemId.value = items[0]?.itemId ?? "general";
+}, { immediate: true });
+watch(selectedColumnRendererId, () => {
+  clearRendererValidation();
+});
+function hasVisibleTitle(value) {
+  return value?.some((item) => item.message.trim().length > 0) ?? false;
+}
+function normalizeColumn(column) {
+  const title = hasVisibleTitle(column.title) ? column.title : void 0;
+  const tooltip = hasVisibleTitle(column.tooltip) ? column.tooltip : void 0;
+  const normalizedChildren = column.columns?.map(normalizeColumn);
+  return {
+    ...column,
+    title,
+    tooltip,
+    columns: normalizedChildren?.length ? normalizedChildren : void 0
+  };
+}
+function discardChanges() {
+  resetDraftState(props.config);
+  childSearch.value = "";
+  search.value = "";
+  open.value = false;
+}
+function handleOpenChange(value) {
+  if (value) {
+    open.value = true;
+    return;
+  }
+  discardChanges();
+}
+function selectGeneral() {
+  selectedItemId.value = "general";
+}
+function selectItem(itemId) {
+  selectedItemId.value = itemId;
+}
+function moveRootItemToGroup(itemId, group) {
+  const nextLeftItemIds = leftPinnedRootItemIds.value.filter((currentItemId) => currentItemId !== itemId);
+  const nextCenterItemIds = centerRootItemIds.value.filter((currentItemId) => currentItemId !== itemId);
+  const nextRightItemIds = rightPinnedRootItemIds.value.filter((currentItemId) => currentItemId !== itemId);
+  if (group === "left") {
+    nextLeftItemIds.push(itemId);
+  } else if (group === "center") {
+    nextCenterItemIds.push(itemId);
+  } else {
+    nextRightItemIds.push(itemId);
+  }
+  leftPinnedRootItemIds.value = nextLeftItemIds;
+  centerRootItemIds.value = nextCenterItemIds;
+  rightPinnedRootItemIds.value = nextRightItemIds;
+}
+function addColumn() {
+  const nextNode = createTableConfiguratorDraftColumnNode({
+    id: crypto.randomUUID()
+  });
+  draftColumnTree.value = insertTableConfiguratorRootColumnNode(draftColumnTree.value, nextNode);
+  selectedItemId.value = nextNode.itemId;
+}
+function deleteColumn(itemId) {
+  const flattenedItems = flattenTableConfiguratorColumnTree(draftColumnTree.value);
+  const deleteIndex = flattenedItems.findIndex((item) => item.itemId === itemId);
+  if (deleteIndex < 0) {
+    return;
+  }
+  const removedItemIds = [itemId, ...getTableConfiguratorColumnDescendantItemIds(draftColumnTree.value, itemId)];
+  const nextTree = removeTableConfiguratorColumnSubtree(draftColumnTree.value, itemId);
+  draftColumnTree.value = nextTree;
+  if (!removedItemIds.includes(selectedItemId.value)) {
+    return;
+  }
+  const nextFlattenedItems = flattenTableConfiguratorColumnTree(nextTree);
+  const nextSelectedItem = nextFlattenedItems[deleteIndex] ?? nextFlattenedItems[deleteIndex - 1];
+  selectedItemId.value = nextSelectedItem?.itemId ?? "general";
+}
+function updateSelectedColumnTitle(value) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      title: value
+    })
+  );
+}
+function updateSelectedColumnTooltip(value) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      tooltip: value
+    })
+  );
+}
+function updateSelectedColumnAccessor(accessor) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      accessor
+    })
+  );
+}
+function updateSelectedColumnSize(value) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      size: normalizeOptionalNumber(value)
+    })
+  );
+}
+function updateSelectedColumnGrow(value) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      grow: value === true
+    })
+  );
+}
+function updateSelectedColumnEnableSorting(value) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      enableSorting: value === true
+    })
+  );
+}
+function updateSelectedColumnAccessorPath(value) {
+  updateSelectedColumnAccessor(value);
+}
+function updateSelectedColumnAccessorRead(value) {
+  const currentAccessor = selectedColumnAccessorExpression.value;
+  const nextRead = value ?? "";
+  const nextWrite = currentAccessor.write;
+  if (nextRead.length === 0 && nextWrite.length === 0) {
+    updateSelectedColumnAccessor(void 0);
+    return;
+  }
+  updateSelectedColumnAccessor({
+    read: nextRead,
+    write: nextWrite
+  });
+}
+function updateSelectedColumnAccessorWrite(value) {
+  const currentAccessor = selectedColumnAccessorExpression.value;
+  const nextRead = currentAccessor.read;
+  const nextWrite = value ?? "";
+  if (nextRead.length === 0 && nextWrite.length === 0) {
+    updateSelectedColumnAccessor(void 0);
+    return;
+  }
+  updateSelectedColumnAccessor({
+    read: nextRead,
+    write: nextWrite
+  });
+}
+function updateSelectedColumnAccessorMode(value) {
+  const column = selectedColumn.value;
+  if (!column) {
+    return;
+  }
+  if (value === "path") {
+    updateSelectedColumnAccessor(getColumnAccessorPath(column));
+    clearAccessorValidation();
+    return;
+  }
+  const accessor = getColumnAccessorExpression(column);
+  updateSelectedColumnAccessor({
+    read: accessor.read,
+    write: accessor.write
+  });
+  clearAccessorValidation();
+}
+function updateSelectedColumnRendererId(value) {
+  const node = selectedColumnNode.value;
+  if (!node || typeof value !== "string") {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      renderer: buildColumnRenderer(value, void 0)
+    })
+  );
+}
+function updateSelectedColumnRendererProps(value) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = updateTableConfiguratorColumnNode(
+    draftColumnTree.value,
+    node.itemId,
+    (column) => ({
+      ...column,
+      renderer: buildColumnRenderer(selectedColumnRendererId.value, value)
+    })
+  );
+}
+function toggleChildSelection(itemId, value) {
+  const node = selectedColumnNode.value;
+  if (!node || value !== true) {
+    return;
+  }
+  draftColumnTree.value = moveTableConfiguratorColumnNodeToParent(
+    draftColumnTree.value,
+    itemId,
+    node.itemId
+  );
+}
+function removeSelectedChild(itemId) {
+  const node = selectedColumnNode.value;
+  if (!node) {
+    return;
+  }
+  draftColumnTree.value = moveTableConfiguratorColumnNodeAfterItem(
+    draftColumnTree.value,
+    itemId,
+    node.itemId
+  );
+}
+function clearExpressionValidation() {
+  getRowIdEditor.value?.clearValidation();
+  getSubRowsEditor.value?.clearValidation();
+  enableRowSelectionEditor.value?.clearValidation();
+  enableMultiRowSelectionEditor.value?.clearValidation();
+  cellStylesEditor.value?.clearValidation();
+  clearAccessorValidation();
+  clearRendererValidation();
+}
+function clearAccessorValidation() {
+  accessorPathEditor.value?.clearValidation();
+  accessorReadEditor.value?.clearValidation();
+  accessorWriteEditor.value?.clearValidation();
+}
+function clearRendererValidation() {
+  if (isRendererConfigExposed(selectedRendererConfigRef.value)) {
+    selectedRendererConfigRef.value.clearValidation();
+  }
+}
+function validateExpressionEditors() {
+  let isValid = true;
+  if (getRowIdEditor.value && !getRowIdEditor.value.validate()) {
+    isValid = false;
+  }
+  if (getSubRowsEditor.value && !getSubRowsEditor.value.validate()) {
+    isValid = false;
+  }
+  if (enableRowSelectionEditor.value && !enableRowSelectionEditor.value.validate()) {
+    isValid = false;
+  }
+  if (enableMultiRowSelectionEditor.value && !enableMultiRowSelectionEditor.value.validate()) {
+    isValid = false;
+  }
+  if (cellStylesEditor.value && !cellStylesEditor.value.validate()) {
+    isValid = false;
+  }
+  if (selectedColumn.value && selectedColumnAccessorMode.value === "path" && selectedColumnAccessorPath.value !== void 0 && accessorPathEditor.value && !accessorPathEditor.value.validate()) {
+    isValid = false;
+  }
+  if (selectedColumn.value && selectedColumnAccessorMode.value === "expression") {
+    const accessor = selectedColumn.value.accessor;
+    if (!accessor || typeof accessor === "string") {
+      return validateRendererConfig(isValid);
+    }
+    if (accessorReadEditor.value && !accessorReadEditor.value.validate()) {
+      isValid = false;
+    }
+    if (accessorWriteEditor.value && !accessorWriteEditor.value.validate()) {
+      isValid = false;
+    }
+  }
+  return validateRendererConfig(isValid);
+}
+function validateRendererConfig(currentIsValid) {
+  if (!selectedColumn.value || selectedColumnHasChildren.value) {
+    return currentIsValid;
+  }
+  if (isRendererConfigExposed(selectedRendererConfigRef.value) && !selectedRendererConfigRef.value.validate()) {
+    return false;
+  }
+  return currentIsValid;
+}
+function buildInitialStateLeafColumnIds(itemIds) {
+  const leafColumnIds = [];
+  for (const itemId of itemIds) {
+    const item = rootInitialStateItems.value.find((candidate) => candidate.itemId === itemId);
+    if (!item?.canManage) {
+      continue;
+    }
+    leafColumnIds.push(...item.leafColumnIds);
+  }
+  return leafColumnIds;
+}
+function updateDraftPaginationLeft(value) {
+  draftPaginationLeft.value = normalizeOptionalText(String(value));
+}
+function updateDraftPaginationRight(value) {
+  draftPaginationRight.value = normalizeOptionalText(String(value));
+}
+function updateDraftPageSize(value) {
+  draftPageSize.value = normalizeOptionalNumber(value);
+}
+function buildNextPaginationState() {
+  const currentPagination = draftBaseConfig.value.props?.initialState?.pagination;
+  const nextPageSize = draftPageSize.value;
+  if (!currentPagination && nextPageSize === void 0) {
+    return void 0;
+  }
+  return {
+    ...currentPagination,
+    pageSize: nextPageSize
+  };
+}
+function buildDraftConfig() {
+  return TableConfigC.safeParse({
+    ...draftBaseConfig.value,
+    getRowId: draftGetRowId.value,
+    getSubRows: draftGetSubRows.value,
+    enableRowSelection: draftEnableRowSelection.value,
+    enableMultiRowSelection: draftEnableMultiRowSelection.value,
+    cellStyles: draftCellStyles.value,
+    paginationLeft: normalizeOptionalText(draftPaginationLeft.value),
+    paginationRight: normalizeOptionalText(draftPaginationRight.value),
+    columns: materializeTableConfiguratorColumnTree(draftColumnTree.value).map(normalizeColumn),
+    props: {
+      ...draftBaseConfig.value.props,
+      initialState: {
+        ...draftBaseConfig.value.props?.initialState,
+        columnPinning: {
+          ...draftBaseConfig.value.props?.initialState?.columnPinning,
+          left: buildInitialStateLeafColumnIds(leftPinnedRootItemIds.value),
+          right: buildInitialStateLeafColumnIds(rightPinnedRootItemIds.value)
+        },
+        columnOrder: buildInitialStateLeafColumnIds(centerRootItemIds.value),
+        pagination: buildNextPaginationState()
+      }
+    }
+  });
+}
+function triggerImport() {
+  importInputRef.value?.click();
+}
+function showImportError(message) {
+  $toast.error(message);
+}
+function showExportError() {
+  $toast.error(t("export-config-failed"));
+}
+async function handleImportChange(event) {
+  const target = event.target;
+  if (!(target instanceof HTMLInputElement)) {
+    return;
+  }
+  const file = target.files?.[0];
+  try {
+    if (!file) {
+      return;
+    }
+    const source = await file.text();
+    let parsedValue;
+    try {
+      parsedValue = JSON.parse(source);
+    } catch {
+      showImportError(t("import-config-invalid-json"));
+      return;
+    }
+    const result = TableConfigC.safeParse(parsedValue);
+    if (!result.success) {
+      showImportError(t("import-config-invalid-schema"));
+      return;
+    }
+    resetDraftState(result.data);
+    await nextTick();
+    await refreshSortable();
+  } finally {
+    target.value = "";
+  }
+}
+function exportConfig() {
+  if (!validateExpressionEditors()) {
+    showExportError();
+    return;
+  }
+  const result = buildDraftConfig();
+  if (!result.success) {
+    showExportError();
+    return;
+  }
+  try {
+    const blob = new Blob([JSON.stringify(result.data, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "table-config.json";
+    document.body.append(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+  } catch {
+    showExportError();
+  }
+}
+function confirmChanges() {
+  if (!validateExpressionEditors()) {
+    return;
+  }
+  const result = buildDraftConfig();
+  if (!result.success) {
+    return;
+  }
+  emit("confirm", result.data);
+  search.value = "";
+  open.value = false;
+}
+</script>
+
+<template>
+  <Dialog
+    :open="open"
+    @update:open="handleOpenChange"
+  >
+    <DialogContent
+      class="flex h-[min(42rem,calc(100vh-4rem))] w-[calc(100%-2rem)] max-h-[calc(100vh-4rem)] max-w-[calc(100%-2rem)] flex-col overflow-hidden p-0 sm:w-[80vw] sm:max-w-[80vw]"
+      :show-close-button="true"
+    >
+      <DialogHeader class="gap-1 border-b border-zinc-200 px-6 py-5">
+        <div class="flex items-center gap-3">
+          <DialogTitle class="text-xl font-semibold text-zinc-800">
+            {{ t("configure-table") }}
+          </DialogTitle>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            data-slot="table-configurator-import"
+            class="shrink-0"
+            @click="triggerImport"
+          >
+            <Icon icon="fluent:arrow-upload-20-regular" />
+            {{ t("import-config") }}
+          </Button>
+          <input
+            ref="importInputRef"
+            data-slot="table-configurator-import-input"
+            class="hidden"
+            type="file"
+            accept="application/json,.json"
+            @change="handleImportChange"
+          >
+        </div>
+        <DialogDescription class="text-sm text-zinc-500">
+          {{ t("configure-table-description") }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="grid min-h-0 flex-1 grid-cols-[19rem_minmax(0,1fr)]">
+        <section class="flex min-h-0 flex-col border-r border-zinc-200 px-4 py-4">
+          <Input
+            v-model="search"
+            data-slot="table-configurator-search"
+            :placeholder="t('search-columns')"
+          />
+
+          <Button
+            type="button"
+            data-slot="table-configurator-add"
+            class="mt-3 w-full justify-center"
+            @click="addColumn"
+          >
+            <Icon icon="fluent:add-20-regular" />
+            {{ t("add-column") }}
+          </Button>
+
+          <div class="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden">
+            <div class="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto pr-1">
+              <button
+                type="button"
+                data-slot="table-configurator-item"
+                data-item-id="general"
+                :data-selected="selectedItemId === 'general' ? 'true' : 'false'"
+                :class="cn(
+  'flex w-full items-center rounded-md border p-1 text-left transition-colors',
+  selectedItemId === 'general' ? 'border-(--primary)/25 bg-[color-mix(in_srgb,var(--primary)_10%,white)]' : 'border-transparent hover:border-zinc-200 hover:bg-zinc-50'
+)"
+                @click="selectGeneral"
+              >
+                <span class="truncate px-2 py-2 text-sm font-medium text-zinc-800">{{ generalItem.label }}</span>
+              </button>
+
+              <div
+                data-slot="table-configurator-column-list"
+                class="flex flex-col gap-1"
+              >
+                <div
+                  v-for="item in filteredColumnItems"
+                  :key="item.itemId"
+                  data-slot="table-configurator-item"
+                  :data-item-id="item.itemId"
+                  :data-selected="selectedItemId === item.itemId ? 'true' : 'false'"
+                  :class="cn(
+  'flex w-full items-center gap-2 rounded-md border p-1 transition-colors',
+  selectedItemId === item.itemId ? 'border-(--primary)/25 bg-[color-mix(in_srgb,var(--primary)_10%,white)]' : 'border-transparent hover:border-zinc-200 hover:bg-zinc-50'
+)"
+                  @click="selectItem(item.itemId)"
+                >
+                  <button
+                    type="button"
+                    class="min-w-0 flex-1 px-2 py-2 text-left"
+                  >
+                    <span class="block truncate text-sm font-medium text-zinc-800">{{ item.label }}</span>
+                  </button>
+
+                  <button
+                    type="button"
+                    data-slot="table-configurator-delete"
+                    class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                    :aria-label="t('delete-column', { column: item.label })"
+                    @click.stop="deleteColumn(item.itemId)"
+                  >
+                    <Icon icon="fluent:delete-20-regular" />
+                  </button>
+                </div>
+              </div>
+
+              <p
+                v-if="normalizedSearch && filteredColumnItems.length === 0"
+                data-slot="table-configurator-empty"
+                class="px-1 pt-2 text-xs text-zinc-400"
+              >
+                {{ t("no-matches") }}
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <section class="flex min-h-0 flex-col overflow-y-auto px-6 py-6">
+          <div class="flex items-center gap-2">
+            <h3
+              data-slot="table-configurator-detail-title"
+              class="text-lg font-semibold text-zinc-800"
+            >
+              {{ selectedItemLabel }}
+            </h3>
+            <Button
+              v-if="selectedColumnTechnicalKey"
+              type="button"
+              variant="ghost"
+              size="sm"
+              data-slot="table-configurator-copy-id"
+              class="size-7 p-0 text-zinc-400 hover:text-zinc-700"
+              :aria-label="t('copy-column-id', { column: selectedItemLabel })"
+              :title="selectedColumnTechnicalKey"
+              @click="copySelectedColumnId"
+            >
+              <Icon icon="fluent:copy-20-regular" />
+            </Button>
+          </div>
+          <p
+            v-if="selectedItemId === 'general'"
+            data-slot="table-configurator-detail-description"
+            class="mt-2 text-sm text-zinc-500"
+          >
+            {{ t("general-placeholder") }}
+          </p>
+
+          <div
+            v-if="selectedItemId === 'general'"
+            data-slot="table-configurator-general-fields"
+            class="mt-6 flex flex-col gap-4"
+          >
+            <ExpressionEditor
+              ref="getRowIdEditor"
+              v-model="draftGetRowId"
+              data-field-key="getRowId"
+              :label="t('get-row-id')"
+              :description="t('get-row-id-description')"
+              :placeholder="t('expression-placeholder')"
+              :schema="TableConfigGetRowIdC"
+            />
+
+            <ExpressionEditor
+              ref="getSubRowsEditor"
+              v-model="draftGetSubRows"
+              data-field-key="getSubRows"
+              :label="t('get-sub-rows')"
+              :description="t('get-sub-rows-description')"
+              :placeholder="t('expression-placeholder')"
+              :schema="TableConfigGetSubRowsC"
+            />
+
+            <ExpressionEditor
+              ref="enableRowSelectionEditor"
+              v-model="draftEnableRowSelection"
+              data-field-key="enableRowSelection"
+              :label="t('enable-row-selection')"
+              :description="t('enable-row-selection-description')"
+              :placeholder="t('expression-placeholder')"
+              :schema="TableConfigEnableRowSelectionC"
+            />
+
+            <ExpressionEditor
+              ref="enableMultiRowSelectionEditor"
+              v-model="draftEnableMultiRowSelection"
+              data-field-key="enableMultiRowSelection"
+              :label="t('enable-multi-row-selection')"
+              :description="t('enable-multi-row-selection-description')"
+              :placeholder="t('expression-placeholder')"
+              :schema="TableConfigEnableMultiRowSelectionC"
+            />
+
+            <ExpressionEditor
+              ref="cellStylesEditor"
+              v-model="draftCellStyles"
+              data-field-key="cellStyles"
+              :label="t('cell-styles')"
+              :description="t('cell-styles-description')"
+              :placeholder="t('expression-placeholder')"
+              :schema="TableConfigCellStylesC"
+            />
+
+            <section
+              data-slot="table-configurator-pagination"
+              class="rounded-lg border border-zinc-200 p-4"
+            >
+              <h4 class="text-sm font-semibold text-zinc-800">
+                {{ t("pagination") }}
+              </h4>
+
+              <div class="mt-3 flex flex-col gap-4">
+                <label
+                  data-field-key="paginationLeft"
+                  class="flex flex-col gap-1"
+                >
+                  <span class="text-xs font-medium text-zinc-500">{{ t("pagination-left") }}</span>
+                  <Textarea
+                    class="min-h-20"
+                    :model-value="draftPaginationLeft ?? ''"
+                    :placeholder="t('pagination-left-placeholder')"
+                    @update:model-value="updateDraftPaginationLeft"
+                  />
+                </label>
+
+                <label
+                  data-field-key="paginationRight"
+                  class="flex flex-col gap-1"
+                >
+                  <span class="text-xs font-medium text-zinc-500">{{ t("pagination-right") }}</span>
+                  <Textarea
+                    class="min-h-20"
+                    :model-value="draftPaginationRight ?? ''"
+                    :placeholder="t('pagination-right-placeholder')"
+                    @update:model-value="updateDraftPaginationRight"
+                  />
+                </label>
+
+                <label
+                  data-field-key="pageSize"
+                  class="flex flex-col gap-1"
+                >
+                  <span class="text-xs font-medium text-zinc-500">{{ t("pagination-page-size") }}</span>
+                  <NumberField
+                    :model-value="draftPageSize"
+                    :min="1"
+                    @update:model-value="updateDraftPageSize"
+                  >
+                    <NumberFieldInput class="w-full text-left" />
+                  </NumberField>
+                </label>
+              </div>
+            </section>
+
+            <section
+              data-slot="table-configurator-initial-state"
+              class="rounded-lg border border-zinc-200 p-4"
+            >
+              <h4 class="text-sm font-semibold text-zinc-800">
+                {{ t("initial-state") }}
+              </h4>
+
+              <div class="mt-3 flex flex-col gap-4">
+                <section
+                  data-slot="table-configurator-initial-state-left"
+                  class="rounded-md border border-zinc-200/80 p-3"
+                >
+                  <p class="text-xs font-medium text-zinc-500">
+                    {{ t("pinned-left-group") }}
+                  </p>
+
+                  <div
+                    v-if="leftPinnedInitialStateItems.length > 0"
+                    ref="leftPinnedSortableListRef"
+                    class="mt-3 flex flex-col gap-1"
+                  >
+                    <div
+                      v-for="item in leftPinnedInitialStateItems"
+                      :key="item.itemId"
+                      data-slot="table-configurator-initial-state-left-item"
+                      class="flex items-center gap-2 rounded-md border border-transparent p-1"
+                    >
+                      <button
+                        type="button"
+                        data-slot="table-configurator-initial-state-left-drag-handle"
+                        class="flex size-8 shrink-0 cursor-grab items-center justify-center rounded-sm text-zinc-400 active:cursor-grabbing"
+                        :aria-label="t('drag-left-column', { column: item.label })"
+                      >
+                        <Icon icon="fluent:re-order-dots-vertical-20-regular" />
+                      </button>
+
+                      <span class="min-w-0 flex-1 truncate px-1 text-sm font-medium text-zinc-800">{{ item.label }}</span>
+
+                      <button
+                        v-if="item.canManage"
+                        type="button"
+                        data-slot="table-configurator-unpin-from-left"
+                        class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700"
+                        :aria-label="t('unpin-left-column', { column: item.label })"
+                        @click="moveRootItemToGroup(item.itemId, 'center')"
+                      >
+                        <Icon icon="fluent:padding-right-20-regular" />
+                      </button>
+                    </div>
+                  </div>
+
+                  <p
+                    v-else
+                    data-slot="table-configurator-initial-state-left-empty"
+                    class="mt-3 text-xs text-zinc-400"
+                  >
+                    {{ t("no-pinned-left-columns") }}
+                  </p>
+                </section>
+
+                <section
+                  data-slot="table-configurator-initial-state-center"
+                  class="rounded-md border border-zinc-200/80 p-3"
+                >
+                  <p class="text-xs font-medium text-zinc-500">
+                    {{ t("pinned-center-group") }}
+                  </p>
+
+                  <div
+                    v-if="centerInitialStateItems.length > 0"
+                    ref="centerSortableListRef"
+                    class="mt-3 flex flex-col gap-1"
+                  >
+                    <div
+                      v-for="item in centerInitialStateItems"
+                      :key="item.itemId"
+                      data-slot="table-configurator-initial-state-center-item"
+                      class="flex items-center gap-2 rounded-md border border-transparent p-1"
+                    >
+                      <button
+                        type="button"
+                        data-slot="table-configurator-initial-state-center-drag-handle"
+                        class="flex size-8 shrink-0 cursor-grab items-center justify-center rounded-sm text-zinc-400 active:cursor-grabbing"
+                        :aria-label="t('drag-center-column', { column: item.label })"
+                      >
+                        <Icon icon="fluent:re-order-dots-vertical-20-regular" />
+                      </button>
+
+                      <span class="min-w-0 flex-1 truncate px-1 text-sm font-medium text-zinc-800">{{ item.label }}</span>
+
+                      <div
+                        v-if="item.canManage"
+                        class="flex items-center gap-1"
+                      >
+                        <button
+                          type="button"
+                          data-slot="table-configurator-pin-left"
+                          class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700"
+                          :aria-label="t('pin-left-column', { column: item.label })"
+                          @click="moveRootItemToGroup(item.itemId, 'left')"
+                        >
+                          <Icon icon="fluent:padding-left-20-regular" />
+                        </button>
+
+                        <button
+                          type="button"
+                          data-slot="table-configurator-pin-right"
+                          class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700"
+                          :aria-label="t('pin-right-column', { column: item.label })"
+                          @click="moveRootItemToGroup(item.itemId, 'right')"
+                        >
+                          <Icon icon="fluent:padding-right-20-regular" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <p
+                    v-else
+                    data-slot="table-configurator-initial-state-center-empty"
+                    class="mt-3 text-xs text-zinc-400"
+                  >
+                    {{ t("no-pinned-center-columns") }}
+                  </p>
+                </section>
+
+                <section
+                  data-slot="table-configurator-initial-state-right"
+                  class="rounded-md border border-zinc-200/80 p-3"
+                >
+                  <p class="text-xs font-medium text-zinc-500">
+                    {{ t("pinned-right-group") }}
+                  </p>
+
+                  <div
+                    v-if="rightPinnedInitialStateItems.length > 0"
+                    ref="rightPinnedSortableListRef"
+                    class="mt-3 flex flex-col gap-1"
+                  >
+                    <div
+                      v-for="item in rightPinnedInitialStateItems"
+                      :key="item.itemId"
+                      data-slot="table-configurator-initial-state-right-item"
+                      class="flex items-center gap-2 rounded-md border border-transparent p-1"
+                    >
+                      <button
+                        type="button"
+                        data-slot="table-configurator-initial-state-right-drag-handle"
+                        class="flex size-8 shrink-0 cursor-grab items-center justify-center rounded-sm text-zinc-400 active:cursor-grabbing"
+                        :aria-label="t('drag-right-column', { column: item.label })"
+                      >
+                        <Icon icon="fluent:re-order-dots-vertical-20-regular" />
+                      </button>
+
+                      <span class="min-w-0 flex-1 truncate px-1 text-sm font-medium text-zinc-800">{{ item.label }}</span>
+
+                      <button
+                        v-if="item.canManage"
+                        type="button"
+                        data-slot="table-configurator-unpin-from-right"
+                        class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700"
+                        :aria-label="t('unpin-right-column', { column: item.label })"
+                        @click="moveRootItemToGroup(item.itemId, 'center')"
+                      >
+                        <Icon icon="fluent:padding-left-20-regular" />
+                      </button>
+                    </div>
+                  </div>
+
+                  <p
+                    v-else
+                    data-slot="table-configurator-initial-state-right-empty"
+                    class="mt-3 text-xs text-zinc-400"
+                  >
+                    {{ t("no-pinned-right-columns") }}
+                  </p>
+                </section>
+              </div>
+            </section>
+          </div>
+
+          <div
+            v-else-if="selectedColumn"
+            class="mt-6 flex flex-col gap-6"
+          >
+            <section
+              data-slot="table-configurator-column-main"
+              class="flex flex-col gap-6"
+            >
+              <h4 class="text-sm font-semibold text-zinc-800">
+                {{ t("column-main") }}
+              </h4>
+
+              <div
+                data-slot="table-configurator-locale-field"
+                class="flex flex-col gap-2"
+              >
+                <p class="text-xs font-medium text-zinc-500">
+                  {{ t("column-title") }}
+                </p>
+
+                <Locale
+                  data-slot="table-configurator-locale"
+                  :model-value="selectedColumnLocaleValue"
+                  @update:model-value="updateSelectedColumnTitle"
+                />
+              </div>
+
+              <div
+                data-slot="table-configurator-column-options"
+                class="flex flex-col gap-3"
+              >
+                <label
+                  data-field-key="columnSize"
+                  class="flex flex-col gap-1"
+                >
+                  <span class="text-xs font-medium text-zinc-500">{{ t("column-size") }}</span>
+                  <InputGroup class="overflow-hidden">
+                    <InputGroupNumberField
+                      class="flex-1"
+                      :model-value="selectedColumn.size"
+                      :min="1"
+                      @update:model-value="updateSelectedColumnSize"
+                    />
+
+                    <div class="flex h-full items-stretch border-l border-zinc-200">
+                      <Toggle
+                        class="h-full rounded-none border-0 px-3 text-xs shadow-none"
+                        :model-value="selectedColumn.grow ?? false"
+                        @update:model-value="updateSelectedColumnGrow"
+                      >
+                        <Icon icon="fluent:arrow-fit-20-regular" />
+                        {{ t("column-grow") }}
+                      </Toggle>
+                    </div>
+                  </InputGroup>
+                </label>
+
+                <label class="flex items-center justify-between gap-3 py-1">
+                  <div class="flex flex-col gap-1">
+                    <span class="text-sm font-medium text-zinc-800">{{ t("column-enable-sorting") }}</span>
+                    <span class="text-xs text-zinc-500">{{ t("column-enable-sorting-description") }}</span>
+                  </div>
+                  <Switch
+                    :model-value="selectedColumn.enableSorting ?? false"
+                    @update:model-value="updateSelectedColumnEnableSorting"
+                  />
+                </label>
+              </div>
+
+              <div
+                data-slot="table-configurator-accessor"
+                class="flex flex-col gap-3"
+              >
+                <p class="text-xs font-medium text-zinc-500">
+                  {{ t("accessor") }}
+                </p>
+
+                <Tabs
+                  v-model="selectedColumnAccessorMode"
+                  data-slot="table-configurator-accessor-tabs"
+                  class="gap-4"
+                >
+                  <TabsList>
+                    <TabsTrigger value="path">
+                      {{ t("accessor-path-tab") }}
+                    </TabsTrigger>
+                    <TabsTrigger value="expression">
+                      {{ t("accessor-expression-tab") }}
+                    </TabsTrigger>
+                  </TabsList>
+
+                  <TabsContent
+                    value="path"
+                    class="flex flex-col gap-4"
+                  >
+                    <ExpressionEditor
+                      ref="accessorPathEditor"
+                      data-field-key="accessorPath"
+                      :model-value="selectedColumnAccessorPath"
+                      :label="t('accessor-path')"
+                      :description="t('accessor-path-description')"
+                      :placeholder="t('accessor-path-placeholder')"
+                      :schema="dotPropC"
+                      @update:model-value="updateSelectedColumnAccessorPath"
+                    />
+                  </TabsContent>
+
+                  <TabsContent
+                    value="expression"
+                    class="flex flex-col gap-4"
+                  >
+                    <ExpressionEditor
+                      ref="accessorReadEditor"
+                      data-field-key="accessorRead"
+                      :model-value="selectedColumnAccessorExpression.read"
+                      :label="t('accessor-read')"
+                      :description="t('accessor-read-description')"
+                      :placeholder="t('accessor-read-placeholder')"
+                      :schema="TableConfiguratorColumnAccessorReadC"
+                      @update:model-value="updateSelectedColumnAccessorRead"
+                    />
+
+                    <ExpressionEditor
+                      ref="accessorWriteEditor"
+                      data-field-key="accessorWrite"
+                      :model-value="selectedColumnAccessorExpression.write"
+                      :label="t('accessor-write')"
+                      :description="t('accessor-write-description')"
+                      :placeholder="t('accessor-write-placeholder')"
+                      :schema="TableConfiguratorColumnAccessorWriteC"
+                      @update:model-value="updateSelectedColumnAccessorWrite"
+                    />
+                  </TabsContent>
+                </Tabs>
+              </div>
+
+              <div
+                v-if="!selectedColumnHasChildren"
+                data-slot="table-configurator-renderer"
+                class="flex flex-col gap-3"
+              >
+                <div class="flex items-center justify-between gap-3">
+                  <p class="text-xs font-medium text-zinc-500">
+                    {{ t("renderer") }}
+                  </p>
+
+                  <label
+                    data-field-key="rendererId"
+                    class="min-w-32 max-w-40"
+                  >
+                    <NativeSelect
+                      v-model="selectedColumnRendererModel"
+                      class="w-full"
+                    >
+                      <NativeSelectOption
+                        v-for="item in rendererOptions"
+                        :key="item.id"
+                        :value="item.id"
+                      >
+                        {{ item.label }}
+                      </NativeSelectOption>
+                    </NativeSelect>
+                  </label>
+                </div>
+
+                <component
+                  :is="selectedColumnRendererConfigComponent"
+                  v-if="selectedColumnRendererConfigComponent"
+                  ref="selectedRendererConfigRef"
+                  data-slot="table-configurator-renderer-config"
+                  :model-value="selectedColumnRendererOptions"
+                  @update:model-value="updateSelectedColumnRendererProps"
+                />
+              </div>
+
+              <div
+                data-slot="table-configurator-tooltip"
+                class="flex flex-col gap-3"
+              >
+                <div class="flex flex-col gap-1">
+                  <p class="text-xs font-medium text-zinc-500">
+                    {{ t("tooltip") }}
+                  </p>
+
+                  <p class="text-sm text-zinc-500">
+                    {{ t("tooltip-description", { expression: TOOLTIP_EXPRESSION_EXAMPLE }) }}
+                  </p>
+                </div>
+
+                <Locale
+                  data-slot="table-configurator-tooltip-locale"
+                  :model-value="selectedColumnTooltipValue"
+                  :multiline="true"
+                  @update:model-value="updateSelectedColumnTooltip"
+                />
+              </div>
+            </section>
+
+            <section
+              data-slot="table-configurator-children"
+              class="flex flex-col gap-3"
+            >
+              <h4 class="text-sm font-semibold text-zinc-800">
+                {{ t("child-columns") }}
+              </h4>
+
+              <div
+                data-slot="table-configurator-selected-children"
+              >
+                <p class="text-xs font-medium text-zinc-500">
+                  {{ t("selected-children") }}
+                </p>
+
+                <div
+                  v-if="selectedChildItems.length > 0"
+                  ref="selectedChildSortableListRef"
+                  class="mt-2 flex flex-col gap-1"
+                >
+                  <div
+                    v-for="item in selectedChildItems"
+                    :key="item.itemId"
+                    data-slot="table-configurator-child-item"
+                    class="flex items-center gap-2 rounded-md border border-transparent p-1"
+                  >
+                    <button
+                      type="button"
+                      data-slot="table-configurator-child-drag-handle"
+                      class="flex size-8 shrink-0 cursor-grab items-center justify-center rounded-sm text-zinc-400 active:cursor-grabbing"
+                      :aria-label="t('drag-child-column', { column: item.label })"
+                    >
+                      <Icon icon="fluent:re-order-dots-vertical-20-regular" />
+                    </button>
+
+                    <span class="min-w-0 flex-1 truncate px-1 text-sm font-medium text-zinc-800">{{ item.label }}</span>
+
+                    <button
+                      type="button"
+                      data-slot="table-configurator-child-remove"
+                      class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                      :aria-label="t('remove-child-column', { column: item.label })"
+                      @click="removeSelectedChild(item.itemId)"
+                    >
+                      <Icon icon="fluent:dismiss-20-regular" />
+                    </button>
+                  </div>
+                </div>
+
+                <p
+                  v-else
+                  data-slot="table-configurator-child-empty"
+                  class="mt-2 text-xs text-zinc-400"
+                >
+                  {{ t("no-selected-children") }}
+                </p>
+              </div>
+
+              <div
+                data-slot="table-configurator-child-candidates"
+                class="border-t border-zinc-200 pt-3"
+              >
+                <p class="text-xs font-medium text-zinc-500">
+                  {{ t("available-columns") }}
+                </p>
+
+                <Input
+                  v-model="childSearch"
+                  data-slot="table-configurator-child-search"
+                  class="mt-2"
+                  :placeholder="t('search-child-columns')"
+                />
+
+                <div
+                  v-if="filteredChildCandidateItems.length > 0"
+                  class="mt-3 flex flex-col gap-1"
+                >
+                  <label
+                    v-for="item in filteredChildCandidateItems"
+                    :key="item.itemId"
+                    data-slot="table-configurator-child-candidate"
+                    class="flex items-center gap-3 rounded-md border border-transparent p-1 text-sm text-zinc-700"
+                  >
+                    <Checkbox
+                      :model-value="false"
+                      @update:model-value="(value) => toggleChildSelection(item.itemId, value)"
+                    />
+                    <span class="min-w-0 truncate font-medium text-zinc-800">{{ item.label }}</span>
+                  </label>
+                </div>
+
+                <p
+                  v-else-if="normalizedChildSearch"
+                  data-slot="table-configurator-candidate-empty"
+                  class="mt-3 text-xs text-zinc-400"
+                >
+                  {{ t("no-child-matches") }}
+                </p>
+
+                <p
+                  v-else
+                  data-slot="table-configurator-candidate-empty"
+                  class="mt-3 text-xs text-zinc-400"
+                >
+                  {{ t("no-available-columns") }}
+                </p>
+              </div>
+            </section>
+          </div>
+        </section>
+      </div>
+
+      <DialogFooter class="border-t border-zinc-200 px-6 py-4">
+        <Button
+          type="button"
+          data-slot="table-configurator-export"
+          variant="ghost"
+          @click="exportConfig"
+        >
+          <Icon icon="fluent:arrow-download-20-regular" />
+          {{ t("export-config") }}
+        </Button>
+        <Button
+          type="button"
+          data-slot="table-configurator-cancel"
+          variant="default"
+          @click="discardChanges"
+        >
+          <Icon icon="fluent:dismiss-20-regular" />
+          {{ t("cancel") }}
+        </Button>
+        <Button
+          type="button"
+          data-slot="table-configurator-confirm"
+          variant="primary"
+          @click="confirmChanges"
+        >
+          <Icon icon="fluent:checkmark-20-regular" />
+          {{ t("confirm") }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "configure-table": "配置表格",
+    "configure-table-description": "在这里浏览表格和列配置项。",
+    "import-config": "导入",
+    "export-config": "导出",
+    "import-config-invalid-json": "导入失败，文件不是有效的 JSON。",
+    "import-config-invalid-schema": "导入失败，配置格式无效。",
+    "export-config-failed": "导出失败，请先修正当前配置中的错误。",
+    "search-columns": "搜索列名称……",
+    "general": "通用",
+    "no-matches": "没有匹配的列。",
+    "general-placeholder": "配置当前表格的通用 CEL 表达式。",
+    "expression-placeholder": "输入 CEL 表达式",
+    "accessor": "取值配置",
+    "accessor-path-tab": "路径",
+    "accessor-expression-tab": "表达式",
+    "accessor-path": "路径",
+    "accessor-path-description": "使用 dot-prop 路径从 row 读取值，如 foo.bar 或 foo[0].bar。",
+    "accessor-path-placeholder": "输入 dot-prop 路径",
+    "accessor-read": "读取表达式",
+    "accessor-read-description": "返回列值的 CEL 表达式，可使用 row、index 变量。",
+    "accessor-read-placeholder": "输入读取用 CEL 表达式",
+    "accessor-write": "写入表达式",
+    "accessor-write-description": "保存列值时使用的表达式。",
+    "accessor-write-placeholder": "输入写入表达式",
+    "tooltip": "提示",
+    "tooltip-description": "列提示支持 Markdown 编辑，并支持在 {expression} 中求值。",
+    "get-row-id": "行 ID",
+    "get-row-id-description": "返回 string 的 CEL 表达式，可使用 row、index、parent 变量。",
+    "get-sub-rows": "子行",
+    "get-sub-rows-description": "返回子行数据的 CEL 表达式，可使用 row、index 变量。",
+    "enable-row-selection": "启用行选择",
+    "enable-row-selection-description": "返回 bool 的 CEL 表达式，可使用 row、index、id 变量。",
+    "enable-multi-row-selection": "启用多选",
+    "enable-multi-row-selection-description": "返回 bool 的 CEL 表达式，可使用 row、index、id 变量。",
+    "cell-styles": "单元格样式",
+    "cell-styles-description": "返回样式对象的 CEL 表达式，可使用 row、index、id、selected、pinned 变量。",
+    "pagination": "分页",
+    "pagination-left": "左侧文案",
+    "pagination-left-placeholder": "输入分页左侧 Markdown",
+    "pagination-right": "右侧文案",
+    "pagination-right-placeholder": "输入分页右侧 Markdown",
+    "pagination-page-size": "每页条数",
+    "initial-state": "初始状态",
+    "column-options": "列配置",
+    "column-main": "基本",
+    "column-title": "标题",
+    "column-size": "列宽",
+    "column-grow": "自适应增长",
+    "column-grow-description": "启用后该列会占据剩余空间。",
+    "column-enable-sorting": "启用排序",
+    "column-enable-sorting-description": "启用后表头会显示排序操作。",
+    "renderer": "渲染器",
+    "renderer-type": "渲染器类型",
+    "renderer-name-text": "文本",
+    "renderer-name-selection": "选择",
+    "renderer-name-expand": "展开",
+    "renderer-name-money": "金额",
+    "renderer-name-date": "日期",
+    "renderer-name-markdown": "Markdown",
+    "pinned-left-group": "左侧组",
+    "pinned-center-group": "中间组",
+    "pinned-right-group": "右侧组",
+    "child-columns": "子列",
+    "selected-children": "已选子列",
+    "available-columns": "可选列",
+    "search-child-columns": "搜索可选列……",
+    "no-child-matches": "没有匹配的可选列。",
+    "no-pinned-left-columns": "左侧组暂无列。",
+    "no-pinned-center-columns": "中间组暂无列。",
+    "no-pinned-right-columns": "右侧组暂无列。",
+    "no-selected-children": "当前列还没有子列。",
+    "no-available-columns": "没有可添加的列。",
+    "add-column": "新增列",
+    "drag-left-column": "拖拽调整左侧组顺序：{column}",
+    "drag-center-column": "拖拽调整中间组顺序：{column}",
+    "drag-right-column": "拖拽调整右侧组顺序：{column}",
+    "pin-left-column": "固定到左侧组：{column}",
+    "pin-right-column": "固定到右侧组：{column}",
+    "unpin-left-column": "从左侧组释放到中间组：{column}",
+    "unpin-right-column": "从右侧组释放到中间组：{column}",
+    "drag-child-column": "拖拽调整子列顺序：{column}",
+    "delete-column": "删除列：{column}",
+    "remove-child-column": "移出子列：{column}",
+    "copy-column-id": "复制列 ID：{column}",
+    "untitled-column": "未命名列",
+    "cancel": "取消",
+    "confirm": "确认"
+  },
+  "ja": {
+    "configure-table": "テーブルを設定",
+    "configure-table-description": "ここではテーブルと列の設定項目を確認できます。",
+    "search-columns": "列名を検索…",
+    "general": "共通",
+    "no-matches": "一致する列がありません。",
+    "general-placeholder": "このテーブルの共通 CEL 式を設定します。",
+    "expression-placeholder": "CEL 式を入力",
+    "accessor": "アクセサ",
+    "accessor-path-tab": "パス",
+    "accessor-expression-tab": "式",
+    "accessor-path": "パス",
+    "accessor-path-description": "foo.bar や foo[0].bar のような dot-prop パスで row から値を読み取ります。",
+    "accessor-path-placeholder": "dot-prop パスを入力",
+    "accessor-read": "読み取り式",
+    "accessor-read-description": "列値を返す CEL 式です。row、index を利用できます。",
+    "accessor-read-placeholder": "読み取り用 CEL 式を入力",
+    "accessor-write": "書き込み式",
+    "accessor-write-description": "列値を書き戻すときに使う式です。",
+    "accessor-write-placeholder": "書き込み式を入力",
+    "tooltip": "ツールチップ",
+    "tooltip-description": "列ツールチップは Markdown で編集でき、{expression} も利用できます。",
+    "get-row-id": "行 ID",
+    "get-row-id-description": "string を返す CEL 式です。row、index、parent を利用できます。",
+    "get-sub-rows": "子行",
+    "get-sub-rows-description": "子行データを返す CEL 式です。row、index を利用できます。",
+    "enable-row-selection": "行選択を有効化",
+    "enable-row-selection-description": "bool を返す CEL 式です。row、index、id を利用できます。",
+    "enable-multi-row-selection": "複数選択を有効化",
+    "enable-multi-row-selection-description": "bool を返す CEL 式です。row、index、id を利用できます。",
+    "cell-styles": "セルスタイル",
+    "cell-styles-description": "スタイルオブジェクトを返す CEL 式です。row、index、id、selected、pinned を利用できます。",
+    "pagination": "ページネーション",
+    "pagination-left": "左側テキスト",
+    "pagination-left-placeholder": "左側の Markdown を入力",
+    "pagination-right": "右側テキスト",
+    "pagination-right-placeholder": "右側の Markdown を入力",
+    "pagination-page-size": "1ページあたりの件数",
+    "initial-state": "初期状態",
+    "column-options": "列設定",
+    "column-main": "基本",
+    "column-title": "タイトル",
+    "column-size": "列幅",
+    "column-grow": "可変幅",
+    "column-grow-description": "有効にすると余白を埋めるように広がります。",
+    "column-enable-sorting": "ソートを有効化",
+    "column-enable-sorting-description": "有効にするとヘッダーにソート操作を表示します。",
+    "renderer": "レンダラー",
+    "renderer-type": "レンダラー種別",
+    "renderer-name-text": "テキスト",
+    "renderer-name-selection": "選択",
+    "renderer-name-expand": "展開",
+    "renderer-name-money": "金額",
+    "renderer-name-date": "日付",
+    "renderer-name-markdown": "Markdown",
+    "pinned-left-group": "左側グループ",
+    "pinned-center-group": "中央グループ",
+    "pinned-right-group": "右側グループ",
+    "child-columns": "子列",
+    "selected-children": "選択済みの子列",
+    "available-columns": "追加可能な列",
+    "search-child-columns": "追加可能な列を検索…",
+    "no-child-matches": "一致する追加可能な列がありません。",
+    "no-pinned-left-columns": "左側グループに列がありません。",
+    "no-pinned-center-columns": "中央グループに列がありません。",
+    "no-pinned-right-columns": "右側グループに列がありません。",
+    "no-selected-children": "この列にはまだ子列がありません。",
+    "no-available-columns": "追加できる列がありません。",
+    "add-column": "列を追加",
+    "drag-left-column": "{column} の左側グループ順をドラッグで変更",
+    "drag-center-column": "{column} の中央グループ順をドラッグで変更",
+    "drag-right-column": "{column} の右側グループ順をドラッグで変更",
+    "pin-left-column": "{column} を左側グループに固定",
+    "pin-right-column": "{column} を右側グループに固定",
+    "unpin-left-column": "{column} を左側グループから中央グループに戻す",
+    "unpin-right-column": "{column} を右側グループから中央グループに戻す",
+    "drag-child-column": "{column} の子列順をドラッグで変更",
+    "delete-column": "{column} を削除",
+    "remove-child-column": "{column} を子列から外す",
+    "copy-column-id": "{column} の列 ID をコピー",
+    "untitled-column": "未設定の列",
+    "cancel": "キャンセル",
+    "confirm": "確認"
+  },
+  "en": {
+    "configure-table": "Configure Table",
+    "configure-table-description": "Browse the table and column settings here.",
+    "search-columns": "Search columns…",
+    "general": "General",
+    "no-matches": "No matching columns.",
+    "general-placeholder": "Configure the shared CEL expressions for this table.",
+    "expression-placeholder": "Enter a CEL expression",
+    "accessor": "Accessor",
+    "accessor-path-tab": "Path",
+    "accessor-expression-tab": "Expression",
+    "accessor-path": "Path",
+    "accessor-path-description": "Read from row with a dot-prop path such as foo.bar or foo[0].bar.",
+    "accessor-path-placeholder": "Enter a dot-prop path",
+    "accessor-read": "Read expression",
+    "accessor-read-description": "CEL expression that returns the column value. Variables: row, index.",
+    "accessor-read-placeholder": "Enter a read CEL expression",
+    "accessor-write": "Write expression",
+    "accessor-write-description": "Expression used when writing the column value back.",
+    "accessor-write-placeholder": "Enter a write expression",
+    "tooltip": "Tooltip",
+    "tooltip-description": "Column tooltips support Markdown and can evaluate {expression}.",
+    "get-row-id": "Row ID",
+    "get-row-id-description": "CEL expression that returns a string. Variables: row, index, parent.",
+    "get-sub-rows": "Sub rows",
+    "get-sub-rows-description": "CEL expression that returns sub-row data. Variables: row, index.",
+    "enable-row-selection": "Enable row selection",
+    "enable-row-selection-description": "CEL expression that returns a bool. Variables: row, index, id.",
+    "enable-multi-row-selection": "Enable multi row selection",
+    "enable-multi-row-selection-description": "CEL expression that returns a bool. Variables: row, index, id.",
+    "cell-styles": "Cell styles",
+    "cell-styles-description": "CEL expression that returns a style map. Variables: row, index, id, selected, pinned.",
+    "pagination": "Pagination",
+    "pagination-left": "Left content",
+    "pagination-left-placeholder": "Enter left pagination markdown",
+    "pagination-right": "Right content",
+    "pagination-right-placeholder": "Enter right pagination markdown",
+    "pagination-page-size": "Page size",
+    "initial-state": "Initial State",
+    "column-options": "Column options",
+    "column-main": "Basics",
+    "column-title": "Title",
+    "column-size": "Column size",
+    "column-grow": "Grow",
+    "column-grow-description": "Allow this column to fill remaining horizontal space.",
+    "column-enable-sorting": "Enable sorting",
+    "column-enable-sorting-description": "Show sorting controls in the header.",
+    "renderer": "Renderer",
+    "renderer-type": "Renderer type",
+    "renderer-name-text": "Text",
+    "renderer-name-selection": "Selection",
+    "renderer-name-expand": "Expand",
+    "renderer-name-money": "Money",
+    "renderer-name-date": "Date",
+    "renderer-name-markdown": "Markdown",
+    "pinned-left-group": "Left group",
+    "pinned-center-group": "Center group",
+    "pinned-right-group": "Right group",
+    "child-columns": "Child columns",
+    "selected-children": "Selected child columns",
+    "available-columns": "Available columns",
+    "search-child-columns": "Search available columns…",
+    "no-child-matches": "No matching available columns.",
+    "no-pinned-left-columns": "No columns in the left group.",
+    "no-pinned-center-columns": "No columns in the center group.",
+    "no-pinned-right-columns": "No columns in the right group.",
+    "no-selected-children": "This column has no child columns yet.",
+    "no-available-columns": "No columns can be added here.",
+    "add-column": "Add column",
+    "drag-left-column": "Drag to reorder left group column {column}",
+    "drag-center-column": "Drag to reorder center group column {column}",
+    "drag-right-column": "Drag to reorder right group column {column}",
+    "pin-left-column": "Pin {column} to the left group",
+    "pin-right-column": "Pin {column} to the right group",
+    "unpin-left-column": "Move {column} from the left group to the center group",
+    "unpin-right-column": "Move {column} from the right group to the center group",
+    "drag-child-column": "Drag to reorder child column {column}",
+    "delete-column": "Delete {column}",
+    "remove-child-column": "Remove child column {column}",
+    "untitled-column": "Untitled column",
+    "cancel": "Cancel",
+    "confirm": "Confirm"
+  }
+}
+</i18n>