@dmsi/wedgekit-react 0.0.4

package/dist/components/DataGrid.js

@@ -0,0 +1,639 @@
+"use client";
+import {
+  Tooltip
+} from "../chunk-2G2E2JMA.js";
+import {
+  useInfiniteScroll
+} from "../chunk-AWQSSKCK.js";
+import {
+  Subheader
+} from "../chunk-5GOBP2JS.js";
+import {
+  Select
+} from "../chunk-UEN5BURK.js";
+import {
+  DataGridCell,
+  DragAlongCell,
+  DraggableCellHeader
+} from "../chunk-YD462QK7.js";
+import {
+  Search
+} from "../chunk-TBHTISFW.js";
+import {
+  Menu
+} from "../chunk-CABAANHQ.js";
+import "../chunk-Z4UCFUF7.js";
+import {
+  MenuOption
+} from "../chunk-E5ALT5W7.js";
+import "../chunk-SEKKGFM6.js";
+import "../chunk-WVUIIBRR.js";
+import "../chunk-4T7F5BZZ.js";
+import {
+  Input
+} from "../chunk-UGXT677T.js";
+import {
+  Label
+} from "../chunk-4C66DLIJ.js";
+import {
+  Button
+} from "../chunk-KENSVWOY.js";
+import {
+  Checkbox
+} from "../chunk-VFWFORJJ.js";
+import {
+  Paragraph
+} from "../chunk-K3IKUSZW.js";
+import {
+  Icon
+} from "../chunk-IGQVA7SC.js";
+import {
+  componentGap,
+  componentPadding
+} from "../chunk-KX3O6GJ6.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+
+// src/components/DataGrid.tsx
+import React, { useId, useState } from "react";
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import {
+  useVirtualizer
+} from "@tanstack/react-virtual";
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext
+} from "@dnd-kit/sortable";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
+var NO_RESULTS_HEIGHT = "h-[120px]";
+function adaptTableStateSetter(setter) {
+  return (valueOrFn) => {
+    setter(
+      (prev) => typeof valueOrFn === "function" ? valueOrFn(prev) : valueOrFn
+    );
+  };
+}
+function DataGrid({
+  data,
+  columns,
+  status,
+  isLoadingMore = false,
+  onLoadMore,
+  pagination,
+  showFilterRow = false,
+  hasMore = false,
+  sorting: externalSorting,
+  onSortingChange,
+  columnFilters: externalColumnFilters,
+  onColumnFiltersChange,
+  rowSelection: externalRowSelection,
+  onRowSelectionChange,
+  filteredSortedData,
+  totalRowCount,
+  hideStatusBar,
+  centerHeader
+}) {
+  var _a, _b, _c, _d, _e;
+  const [columnOrder, setColumnOrder] = useState(
+    () => columns.map((c) => c.id)
+  );
+  const [localSorting, setLocalSorting] = useState([]);
+  const [localColumnFilters, setLocalColumnFilters] = useState([]);
+  const [localRowSelection, setLocalRowSelection] = useState({});
+  const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
+  const setSortingState = pagination ? (updaterOrValue) => {
+    const value = typeof updaterOrValue === "function" ? updaterOrValue(
+      externalSorting != null ? externalSorting : []
+    ) : updaterOrValue;
+    (onSortingChange != null ? onSortingChange : setLocalSorting)(value);
+  } : setLocalSorting;
+  const columnFilterState = pagination ? externalColumnFilters != null ? externalColumnFilters : localColumnFilters : localColumnFilters;
+  const setColumnFilterState = pagination ? (updaterOrValue) => {
+    const value = typeof updaterOrValue === "function" ? updaterOrValue(externalColumnFilters != null ? externalColumnFilters : []) : updaterOrValue;
+    (onColumnFiltersChange != null ? onColumnFiltersChange : setLocalColumnFilters)(value);
+  } : setLocalColumnFilters;
+  const rowSelection = pagination ? externalRowSelection != null ? externalRowSelection : localRowSelection : localRowSelection;
+  const setRowSelection = pagination ? (updaterOrValue) => {
+    const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
+    (onRowSelectionChange != null ? onRowSelectionChange : setLocalRowSelection)(value);
+  } : setLocalRowSelection;
+  const id = useId();
+  const containerRef = React.useRef(null);
+  const table = useReactTable({
+    columns,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    columnResizeMode: "onChange",
+    getRowId: (row, index) => {
+      var _a2;
+      return String((_a2 = row.id) != null ? _a2 : index + 1);
+    },
+    state: {
+      columnOrder,
+      sorting: sortingState,
+      columnFilters: columnFilterState,
+      rowSelection
+    },
+    onColumnOrderChange: setColumnOrder,
+    onSortingChange: adaptTableStateSetter(setSortingState),
+    onColumnFiltersChange: adaptTableStateSetter(setColumnFilterState),
+    onRowSelectionChange: adaptTableStateSetter(setRowSelection),
+    filterFns: {
+      startsWith: (row, columnId, filterValue) => {
+        var _a2;
+        return (_a2 = row.getValue(columnId)) == null ? void 0 : _a2.toLowerCase().startsWith(filterValue.toLowerCase());
+      },
+      endsWith: (row, columnId, filterValue) => {
+        var _a2;
+        return (_a2 = row.getValue(columnId)) == null ? void 0 : _a2.toLowerCase().endsWith(filterValue.toLowerCase());
+      }
+    }
+  });
+  const allRowIds = pagination ? (_a = filteredSortedData == null ? void 0 : filteredSortedData.map((row) => String(row.id))) != null ? _a : [] : Array.from(
+    { length: totalRowCount != null ? totalRowCount : data.length },
+    (_, i) => String(i + 1)
+  );
+  const allSelectedAcrossPages = allRowIds.every((id2) => rowSelection[id2]);
+  const someSelectedAcrossPages = !allSelectedAcrossPages && allRowIds.some((id2) => rowSelection[id2]);
+  const toggleSelectAllAcrossPages = () => {
+    setRowSelection((prev) => {
+      const isSelecting = !allSelectedAcrossPages;
+      if (isSelecting) {
+        const newSelection = {};
+        for (const id2 of allRowIds) {
+          newSelection[id2] = true;
+        }
+        return __spreadValues(__spreadValues({}, prev), newSelection);
+      } else {
+        const updatedSelection = __spreadValues({}, prev);
+        for (const id2 of allRowIds) {
+          delete updatedSelection[id2];
+        }
+        return updatedSelection;
+      }
+    });
+  };
+  useInfiniteScroll({
+    containerRef,
+    onLoadMore: onLoadMore != null ? onLoadMore : () => {
+    },
+    isLoading: isLoadingMore,
+    enabled: !pagination
+  });
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (active && over && active.id !== over.id) {
+      setColumnOrder((prev) => {
+        const oldIndex = prev.indexOf(active.id);
+        const newIndex = prev.indexOf(over.id);
+        return arrayMove(prev, oldIndex, newIndex);
+      });
+    }
+  };
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor)
+  );
+  const visibleColumns = table.getVisibleLeafColumns();
+  const columnVirtualizer = useVirtualizer({
+    count: visibleColumns.length,
+    estimateSize: (index) => visibleColumns[index].getSize(),
+    //estimate width of each column for accurate scrollbar dragging
+    getScrollElement: () => containerRef.current,
+    horizontal: true,
+    overscan: 3
+    //how many columns to render on each side off screen each way
+  });
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  let virtualPaddingLeft;
+  let virtualPaddingRight;
+  if (columnVirtualizer && (virtualColumns == null ? void 0 : virtualColumns.length)) {
+    virtualPaddingLeft = (_c = (_b = virtualColumns[0]) == null ? void 0 : _b.start) != null ? _c : 0;
+    virtualPaddingRight = columnVirtualizer.getTotalSize() - ((_e = (_d = virtualColumns[virtualColumns.length - 1]) == null ? void 0 : _d.end) != null ? _e : 0);
+  }
+  return /* @__PURE__ */ jsx(
+    DndContext,
+    {
+      id,
+      collisionDetection: closestCenter,
+      modifiers: [restrictToHorizontalAxis],
+      onDragEnd: handleDragEnd,
+      sensors,
+      children: /* @__PURE__ */ jsx(
+        SortableContext,
+        {
+          items: columnOrder,
+          strategy: horizontalListSortingStrategy,
+          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 max-h-screen m-4 rounded border border-border-primary-normal overflow-hidden text-text-primary-normal", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "overflow-auto scrollbar-thin max-h-full relative contain-paint will-change-transform",
+                ref: containerRef,
+                children: /* @__PURE__ */ jsxs("table", { className: "min-w-full grid", children: [
+                  /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 grid", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs("tr", { className: "flex w-full", children: [
+                    virtualPaddingLeft ? (
+                      // fake empty column to the left for virtualization scroll padding
+                      /* @__PURE__ */ jsx(
+                        "th",
+                        {
+                          style: { display: "flex", width: virtualPaddingLeft }
+                        }
+                      )
+                    ) : null,
+                    virtualColumns.map((virtualColumn) => {
+                      var _a2, _b2, _c2, _d2, _e2;
+                      const header = headerGroup.headers[virtualColumn.index];
+                      if (typeof header.column.columnDef.header === "string") {
+                        const customHeaderWidth = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth;
+                        return /* @__PURE__ */ jsxs(
+                          DraggableCellHeader,
+                          {
+                            header,
+                            locked: (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked,
+                            center: centerHeader,
+                            width: customHeaderWidth,
+                            className: clsx(
+                              header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                              "group"
+                            ),
+                            children: [
+                              /* @__PURE__ */ jsx(Subheader, { tall: true, children: header.column.columnDef.header }),
+                              getSortIcon(header.column.getIsSorted()),
+                              !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
+                                header.column.getNextSortingOrder(),
+                                true
+                              ),
+                              header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                              !((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked) && /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  onDoubleClick: (e) => {
+                                    e.stopPropagation();
+                                    header.column.resetSize();
+                                  },
+                                  onMouseDown: (e) => {
+                                    e.stopPropagation();
+                                    header.getResizeHandler()(e);
+                                  },
+                                  onTouchStart: (e) => {
+                                    e.stopPropagation();
+                                    header.getResizeHandler()(e);
+                                  },
+                                  className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
+                                }
+                              )
+                            ]
+                          },
+                          header.id
+                        );
+                      }
+                      return /* @__PURE__ */ jsx(React.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ jsx(
+                        DataGridCell,
+                        {
+                          type: "header",
+                          component: "checkbox",
+                          locked: (_e2 = header.column.columnDef.meta) == null ? void 0 : _e2.locked,
+                          children: /* @__PURE__ */ jsx(
+                            Checkbox,
+                            {
+                              checked: allSelectedAcrossPages,
+                              indeterminate: someSelectedAcrossPages,
+                              onChange: toggleSelectAllAcrossPages
+                            }
+                          )
+                        }
+                      ) : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      ) }, header.id);
+                    }),
+                    virtualPaddingRight ? (
+                      //fake empty column to the right for virtualization scroll padding
+                      /* @__PURE__ */ jsx(
+                        "th",
+                        {
+                          style: { display: "flex", width: virtualPaddingRight }
+                        }
+                      )
+                    ) : null
+                  ] }, headerGroup.id)) }),
+                  /* @__PURE__ */ jsx(
+                    TableBody,
+                    {
+                      columnVirtualizer,
+                      table,
+                      tableContainerRef: containerRef,
+                      virtualPaddingLeft,
+                      virtualPaddingRight,
+                      pagination,
+                      isLoadingMore,
+                      hasMore,
+                      showFilterRow
+                    }
+                  )
+                ] })
+              }
+            ),
+            table.getRowModel().rows.length === 0 && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: clsx(
+                  NO_RESULTS_HEIGHT,
+                  "flex flex-col items-center justify-center",
+                  componentGap,
+                  componentPadding
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Subheader, { color: "text-secondary-normal", children: "No Results" }),
+                  /* @__PURE__ */ jsx(Paragraph, { color: "text-secondary-normal", children: "To view results, enter or update your search criteria." })
+                ]
+              }
+            ),
+            !hideStatusBar && /* @__PURE__ */ jsxs("div", { className: "p-2 pt-[7px] border-t border-border-primary-normal h-full min-h-[34px]", children: [
+              pagination && /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 w-min", children: [
+                  /* @__PURE__ */ jsx(
+                    Select,
+                    {
+                      wrapperClassName: "!w-20",
+                      value: pagination.pageSize.toString(),
+                      onChange: (e) => {
+                        var _a2;
+                        return (_a2 = pagination.onPageSizeChange) == null ? void 0 : _a2.call(pagination, Number(e.target.value));
+                      },
+                      renderMenu: (props) => /* @__PURE__ */ jsx(Menu, __spreadProps(__spreadValues({}, props), { onClick: () => props.setShow(false), children: PAGE_SIZE_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+                        MenuOption,
+                        {
+                          selected: pagination.pageSize === option,
+                          onClick: () => {
+                            var _a2;
+                            return (_a2 = pagination.onPageSizeChange) == null ? void 0 : _a2.call(pagination, option);
+                          },
+                          children: option
+                        },
+                        option
+                      )) }))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Label, { className: "whitespace-nowrap", children: "Per Page" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      iconOnly: true,
+                      leftIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" }),
+                      onClick: () => pagination.onPageChange(pagination.pageIndex - 1),
+                      variant: "tertiary",
+                      disabled: pagination.pageIndex === 0
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Paragraph, { children: [
+                    pagination.pageIndex * pagination.pageSize + 1,
+                    " -",
+                    " ",
+                    Math.min(
+                      (pagination.pageIndex + 1) * pagination.pageSize,
+                      pagination.total
+                    ),
+                    " ",
+                    "of ",
+                    pagination.total
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      iconOnly: true,
+                      leftIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" }),
+                      onClick: () => pagination.onPageChange(pagination.pageIndex + 1),
+                      variant: "tertiary",
+                      disabled: (pagination.pageIndex + 1) * pagination.pageSize >= pagination.total
+                    }
+                  )
+                ] })
+              ] }),
+              status && /* @__PURE__ */ jsx(Paragraph, { children: status })
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}
+DataGrid.displayName = "DataGrid";
+function TableBody({
+  columnVirtualizer,
+  table,
+  tableContainerRef,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  pagination,
+  isLoadingMore,
+  hasMore,
+  showFilterRow
+}) {
+  const { rows } = table.getRowModel();
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    estimateSize: () => 40,
+    getScrollElement: () => tableContainerRef.current,
+    overscan: 8
+  });
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  return /* @__PURE__ */ jsxs(
+    "tbody",
+    {
+      style: {
+        display: "grid",
+        height: `${showFilterRow ? rowVirtualizer.getTotalSize() + 40 : rowVirtualizer.getTotalSize()}px`,
+        // tells scrollbar how big the table is
+        position: "relative"
+        // needed for absolute positioning of rows
+      },
+      children: [
+        showFilterRow && /* @__PURE__ */ jsx(
+          "tr",
+          {
+            style: {
+              display: "flex",
+              position: "sticky",
+              top: "40px",
+              width: "100%",
+              height: "40px",
+              zIndex: 10
+            },
+            className: "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal",
+            children: table.getHeaderGroups().flatMap(
+              (x) => x.headers.map((header) => {
+                var _a, _b, _c, _d, _e;
+                return /* @__PURE__ */ jsx(
+                  DragAlongCell,
+                  {
+                    noPadding: true,
+                    cell: header,
+                    width: (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerWidth,
+                    children: header.column.getCanFilter() && ((_e = (_c = (_b = header.column.columnDef.meta) == null ? void 0 : _b.filterRowCell) == null ? void 0 : _c.call(_b, {
+                      header,
+                      table
+                    })) != null ? _e : /* @__PURE__ */ jsx(
+                      Search,
+                      {
+                        removeRoundness: true,
+                        onChange: (e) => header.column.setFilterValue(e.target.value),
+                        value: (_d = header.column.getFilterValue()) != null ? _d : "",
+                        placeholder: "",
+                        removeSearchIcon: true
+                      }
+                    ))
+                  },
+                  header.id
+                );
+              })
+            )
+          }
+        ),
+        virtualRows.map((virtualRow) => {
+          const row = rows[virtualRow.index];
+          return /* @__PURE__ */ jsx(
+            TableBodyRow,
+            {
+              columnVirtualizer,
+              row,
+              rowVirtualizer,
+              virtualPaddingLeft,
+              virtualPaddingRight,
+              virtualRow,
+              showFilterRow
+            },
+            row.id
+          );
+        }),
+        !pagination && isLoadingMore && hasMore && /* @__PURE__ */ jsx(
+          "tr",
+          {
+            style: {
+              display: "flex",
+              position: "absolute",
+              width: "100%",
+              transform: `translateY(${virtualRows[virtualRows.length - 1].start + 40}px)`
+            },
+            className: "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
+            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsx(LoadingCell, { column: column.columnDef }, column.id))
+          }
+        )
+      ]
+    }
+  );
+}
+function TableBodyRow({
+  columnVirtualizer,
+  row,
+  // rowVirtualizer,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  virtualRow,
+  showFilterRow
+}) {
+  const visibleCells = row.getVisibleCells();
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  const isError = typeof row.original === "object" && row.original !== null && "rowState" in row.original && row.original.rowState === "error";
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      className: clsx(
+        "transition-colors hover:bg-background-action-secondary-hover",
+        row.getIsSelected() && "!bg-background-action-secondary-hover",
+        isError && "!bg-background-action-critical-secondary-hover",
+        showFilterRow ? "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal" : "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal"
+      ),
+      style: {
+        display: "flex",
+        position: "absolute",
+        transform: `translateY(${showFilterRow ? virtualRow.start + 40 : virtualRow.start}px)`,
+        width: "100%"
+      },
+      children: [
+        virtualPaddingLeft ? (
+          // fake empty column to the left for virtualization scroll padding
+          /* @__PURE__ */ jsx("td", { style: { display: "flex", width: virtualPaddingLeft } })
+        ) : null,
+        virtualColumns.map((virtualColumn) => {
+          var _a;
+          const cell = visibleCells[virtualColumn.index];
+          return ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.useCustomRenderer) ? /* @__PURE__ */ jsx(React.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ jsx(DragAlongCell, { cell, children: /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              showOnTruncation: true,
+              message: cell.getValue(),
+              position: "bottom",
+              children: /* @__PURE__ */ jsx(Paragraph, { addOverflow: true, tall: true, children: cell.getValue() })
+            }
+          ) }, cell.id);
+        }),
+        virtualPaddingRight ? (
+          // fake empty column to the right for virtualization scroll padding
+          /* @__PURE__ */ jsx("td", { style: { display: "flex", width: virtualPaddingRight } })
+        ) : null
+      ]
+    },
+    row.id
+  );
+}
+var LoadingCell = ({
+  column
+}) => {
+  const key = `loading-${column.id}`;
+  if (column.cell === "checkbox") {
+    return /* @__PURE__ */ jsx(DataGridCell, { children: /* @__PURE__ */ jsx(Checkbox, { disabled: true }) }, key);
+  }
+  if (column.cell === "input") {
+    return /* @__PURE__ */ jsx(DataGridCell, { component: "input", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        align: "left",
+        disabled: true,
+        wrapperClassName: "!rounded-none !border-0"
+      }
+    ) }, key);
+  }
+  return /* @__PURE__ */ jsx(DataGridCell, { children: /* @__PURE__ */ jsx("div", { className: "bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6" }) }, key);
+};
+function getSortIcon(sort, nextSort = false) {
+  const iconClassName = clsx(
+    "text-icon-on-action-primary-normal",
+    nextSort && "hidden group-hover:block"
+  );
+  if (sort === "asc")
+    return /* @__PURE__ */ jsx(Icon, { size: 16, className: iconClassName, name: "arrow_upward" });
+  if (sort === "desc")
+    return /* @__PURE__ */ jsx(Icon, { size: 16, className: iconClassName, name: "arrow_downward" });
+  return null;
+}
+export {
+  DataGrid
+};