@nswds/app 1.83.6 → 1.85.0

package/dist/index.d.cts

@@ -18,7 +18,7 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { Command as Command$1 } from 'cmdk';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
-import { Table as Table$1, ColumnDef, Column } from '@tanstack/react-table';
+import { Table as Table$1, ColumnDef, SortingState, Column } from '@tanstack/react-table';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as react_hook_form from 'react-hook-form';
@@ -964,14 +964,16 @@ interface DataTableProps<TData, TValue> {
     search?: {
         placeholder?: string;
     };
+    initialSorting?: SortingState;
 }
-declare function DataTable<TData, TValue>({ search, toolbar, columns, data, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData, TValue>({ search, toolbar, columns, data, initialSorting, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 
 interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
     column: Column<TData, TValue>;
     title: string;
+    sortType?: 'string' | 'number' | 'date';
 }
-declare function DataTableColumnHeader<TData, TValue>({ column, title, className, }: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTableColumnHeader<TData, TValue>({ column, title, className, sortType, }: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 
 interface DataTableFacetedFilterProps<TData, TValue> {
     column?: Column<TData, TValue>;

package/dist/index.d.ts

@@ -18,7 +18,7 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { Command as Command$1 } from 'cmdk';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
-import { Table as Table$1, ColumnDef, Column } from '@tanstack/react-table';
+import { Table as Table$1, ColumnDef, SortingState, Column } from '@tanstack/react-table';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as react_hook_form from 'react-hook-form';
@@ -964,14 +964,16 @@ interface DataTableProps<TData, TValue> {
     search?: {
         placeholder?: string;
     };
+    initialSorting?: SortingState;
 }
-declare function DataTable<TData, TValue>({ search, toolbar, columns, data, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData, TValue>({ search, toolbar, columns, data, initialSorting, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 
 interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
     column: Column<TData, TValue>;
     title: string;
+    sortType?: 'string' | 'number' | 'date';
 }
-declare function DataTableColumnHeader<TData, TValue>({ column, title, className, }: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTableColumnHeader<TData, TValue>({ column, title, className, sortType, }: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 
 interface DataTableFacetedFilterProps<TData, TValue> {
     column?: Column<TData, TValue>;

package/dist/index.js

@@ -16541,12 +16541,13 @@ function DataTable({
   search,
   toolbar,
   columns,
-  data
+  data,
+  initialSorting = []
 }) {
   const [rowSelection, setRowSelection] = React5.useState({});
   const [columnVisibility, setColumnVisibility] = React5.useState({});
   const [columnFilters, setColumnFilters] = React5.useState([]);
-  const [sorting, setSorting] = React5.useState([]);
+  const [sorting, setSorting] = React5.useState(initialSorting);
   const [globalFilter, setGlobalFilter] = React5.useState("");
   const table = useReactTable({
     data,
@@ -16594,11 +16595,23 @@ function DataTable({
 function DataTableColumnHeader({
   column,
   title,
-  className
+  className,
+  sortType = "string"
 }) {
   if (!column.getCanSort()) {
     return /* @__PURE__ */ jsx("div", { className: cn(className), children: title });
   }
+  const getSortLabels = () => {
+    switch (sortType) {
+      case "date":
+        return { asc: "Oldest First", desc: "Newest First" };
+      case "number":
+        return { asc: "Lowest First", desc: "Highest First" };
+      default:
+        return { asc: "Asc", desc: "Desc" };
+    }
+  };
+  const labels = getSortLabels();
   return /* @__PURE__ */ jsx("div", { className: cn("flex items-center space-x-2", className), children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button2, { variant: "ghost", size: "sm", className: "-ml-3 data-[state=open]:bg-accent", children: [
       /* @__PURE__ */ jsx("span", { children: title }),
@@ -16606,12 +16619,17 @@ function DataTableColumnHeader({
     ] }) }),
     /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
       /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => column.toggleSorting(false), children: [
-        /* @__PURE__ */ jsx(Icons.south, { className: "h-3.5 w-3.5 text-muted-foreground/70" }),
-        "Asc"
+        /* @__PURE__ */ jsx(Icons.north, { className: "h-3.5 w-3.5 text-muted-foreground/70" }),
+        labels.asc
       ] }),
       /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => column.toggleSorting(true), children: [
-        /* @__PURE__ */ jsx(Icons.north, { className: "h-3.5 w-3.5 text-muted-foreground/70" }),
-        "Desc"
+        /* @__PURE__ */ jsx(Icons.south, { className: "h-3.5 w-3.5 text-muted-foreground/70" }),
+        labels.desc
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => column.clearSorting(), children: [
+        /* @__PURE__ */ jsx(Icons.unfold_more, { className: "h-3.5 w-3.5 text-muted-foreground/70" }),
+        "Clear Sort"
       ] }),
       /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
       /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => column.toggleVisibility(false), children: [
@@ -17475,7 +17493,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.83.4"};
+  version: "1.83.6"};
 var SluggerContext = React5__default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";