@jamsrui/data-grid 0.0.26 → 0.0.28

package/dist/data-grid-body.mjs

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as y}from"react/jsx-runtime";import{TableBody as n,TableCell as a,TableRow as m}from"@jamsrui/table";import{flexRender as d}from"@tanstack/react-table";import{useDataGridContext as l}from"./data-grid-context.mjs";import{DataGridEmpty as p}from"./data-grid-empty.mjs";import{getPinningStyles as s}from"./utils.mjs";const w=()=>{const{table:r,isEmpty:i}=l();return y(n,{children:[!!i&&t(p,{}),r.getRowModel().rows.map(o=>t(m,{children:o.getVisibleCells().map(e=>t(a,{"data-pinned":e.column.getIsPinned()||void 0,style:{width:e.column.getSize(),...s(e.column)},children:d(e.column.columnDef.cell,e.getContext())},e.id))},o.id))]})};export{w as DataGridBody};
+"use client";import{jsx as t,jsxs as y}from"react/jsx-runtime";import{TableBody as a,TableCell as i,TableRow as m}from"@jamsrui/table";import{flexRender as d}from"@tanstack/react-table";import{useDataGridContext as l}from"./data-grid-context.mjs";import{DataGridEmpty as p}from"./data-grid-empty.mjs";import{getPinningStyles as s}from"./utils.mjs";const w=()=>{const{table:r,isEmpty:n}=l();return y(a,{children:[n&&t(p,{}),r.getRowModel().rows.map(o=>t(m,{children:o.getVisibleCells().map(e=>t(i,{"data-pinned":e.column.getIsPinned()||void 0,style:{width:e.column.getSize(),...s(e.column)},children:d(e.column.columnDef.cell,e.getContext())},e.id))},o.id))]})};export{w as DataGridBody};

package/dist/data-grid-column-visibility.d.mts

@@ -1,9 +1,8 @@
-import * as react from 'react';
-import { UIProps } from '@jamsrui/utils';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare const DataGridColumnVisibility: (props: DataGridColumnVisibility.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare const DataGridColumnVisibility: () => react_jsx_runtime.JSX.Element;
 declare namespace DataGridColumnVisibility {
-    interface Props extends UIProps<"div"> {
+    interface Props {
     }
 }
 

package/dist/data-grid-column-visibility.mjs

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{Button as a}from"@jamsrui/button";import{useRenderElement as p}from"@jamsrui/hooks";import{Settings2Icon as d}from"@jamsrui/icons";import{AnimatedTickIcon as u}from"@jamsrui/icons/animated";import{Menu as r,MenuItem as c}from"@jamsrui/menu";import{useDataGridContext as f}from"./data-grid-context.mjs";const M=s=>{const{table:l}=f(),m=n(r,{children:[t(r.Trigger,{children:n(a,{size:"sm",variant:"flat",children:[t(d,{}),"Column Visibility"]})}),t(r.Content,{children:l.getAllLeafColumns().map(e=>{const i=e.columnDef.header,o=typeof i=="function"?i({}):i;return n(c,{preventCloseOnClick:!0,disabled:!e.getCanHide(),onClick:e.getToggleVisibilityHandler(),textValue:o,children:[t(u,{className:"text-primary",isSelected:e.getIsVisible()}),o]},e.id)})})]});return p("div",{props:[s,{children:m}]})};export{M as DataGridColumnVisibility};
+"use client";import{jsx as i,jsxs as r}from"react/jsx-runtime";import{Button as o}from"@jamsrui/button";import{Settings2Icon as l}from"@jamsrui/icons";import{Menu as t}from"@jamsrui/menu";import{AnimatedTickIcon as s}from"@jamsrui/icons/animated";import{useDataGridContext as m}from"./data-grid-context.mjs";const c=()=>{const{table:n}=m();return r(t,{children:[i(t.Trigger,{children:r(o,{size:"sm",variant:"flat",children:[i(l,{}),"Column Visibility"]})}),i(t.Content,{children:n.getAllLeafColumns().filter(e=>e.getCanHide()).map(e=>{const a=e.columnDef.meta?.headerTitle??e.id;return r(t.Item,{preventCloseOnClick:!0,disabled:!e.getCanHide(),onClick:e.getToggleVisibilityHandler(),textValue:a,className:"capitalize",children:[i(s,{className:"text-primary",isSelected:e.getIsVisible()}),a]},e.id)})})]})};export{c as DataGridColumnVisibility};

package/dist/data-grid-config.d.mts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { WithGlobalConfig } from '@jamsrui/core';
 import { DataGrid } from './data-grid.mjs';
-import './use-data-grid.mjs';
 import '@tanstack/react-table';
-import '@jamsrui/table';
+import 'react';
+import './use-data-grid.mjs';
 
 declare const useDataGridConfig: () => DataGridConfig.Props;
 declare const DataGridConfig: (props: Omit<Partial<DataGridConfig.Props>, "children"> & {

package/dist/data-grid-context.d.mts

@@ -1,7 +1,6 @@
 import * as react from 'react';
 import { useDataGrid } from './use-data-grid.mjs';
 import '@tanstack/react-table';
-import '@jamsrui/table';
 
 declare const useDataGridContext: () => DataGridContext.Props;
 declare const DataGridContext: react.Context<DataGridContext.Props | null>;

package/dist/data-grid-header.d.mts

@@ -1,9 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Header } from '@tanstack/react-table';
 
 declare const DataGridHeader: () => react_jsx_runtime.JSX.Element;
 declare namespace DataGridHeader {
     interface Props {
     }
 }
+declare const DataGridHeaderColumn: (props: {
+    header: Header<any, unknown>;
+    children: React.ReactNode;
+    hideResizer?: boolean;
+    hideDropdown?: boolean;
+}) => react_jsx_runtime.JSX.Element;
 
-export { DataGridHeader };
+export { DataGridHeader, DataGridHeaderColumn };

package/dist/data-grid-header.mjs

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{IconButton as u}from"@jamsrui/icon-button";import{ArrowDownIcon as r,ArrowLeftToLineIcon as m,ArrowRightToLineIcon as d,ArrowUpIcon as l,ChevronsUpDownIcon as p,EllipsisVerticalIcon as g,EyeClosedIcon as f}from"@jamsrui/icons";import{Menu as o}from"@jamsrui/menu";import{TableColumn as I,TableHeader as C,TableRow as R}from"@jamsrui/table";import{cn as s}from"@jamsrui/utils";import{flexRender as b}from"@tanstack/react-table";import{useDataGridContext as S}from"./data-grid-context.mjs";import{getPinningStyles as w}from"./utils.mjs";const v=({column:t})=>a(o,{children:[e(o.Trigger,{children:e(u,{label:"More",size:"sm",variant:"light",children:e(g,{className:"size-4"})})}),a(o.Content,{children:[e(o.Group,{children:a(o.RadioGroup,{value:t.getIsSorted()||"",children:[a(o.RadioItem,{disabled:!t.getCanSort(),preventCloseOnClick:!1,value:"asc",onClick:()=>{t.getIsSorted()==="asc"?t.clearSorting():t.toggleSorting(!1)},textValue:"Asc",children:[e(l,{}),"Asc",e(o.ItemIndicator,{className:"ml-auto"})]}),a(o.RadioItem,{disabled:!t.getCanSort(),preventCloseOnClick:!1,value:"desc",onClick:()=>{t.getIsSorted()==="desc"?t.clearSorting():t.toggleSorting(!0)},textValue:"Desc",children:[e(r,{}),"Desc",e(o.ItemIndicator,{className:"ml-auto"})]})]})}),e(o.Separator,{}),a(o.Item,{disabled:!t.getCanHide(),onClick:t.getToggleVisibilityHandler(),textValue:"Hide Column",children:[e(f,{}),"Hide Column"]}),e(o.Separator,{}),e(o.Group,{children:a(o.RadioGroup,{value:t.getIsPinned()||"",children:[a(o.RadioItem,{preventCloseOnClick:!1,value:"left",onClick:()=>{t.pin(t.getIsPinned()==="left"?!1:"left")},textValue:"Pin To Left",children:[e(m,{}),"Pin To Left",e(o.ItemIndicator,{className:"ml-auto"})]}),a(o.RadioItem,{preventCloseOnClick:!1,value:"right",onClick:()=>t.pin(t.getIsPinned()==="right"?!1:"right"),textValue:"Pin To Right",children:[e(d,{}),"Pin To Right",e(o.ItemIndicator,{className:"ml-auto"})]})]})})]})]}),N=()=>{const{table:t}=S(),c=t.getHeaderGroups();return e(C,{children:c.map(i=>e(R,{children:i.headers.map(n=>e(I,{className:"relative",colSpan:n.colSpan,"data-pinned":n.column.getIsPinned()||void 0,style:{width:n.getSize(),...w(n.column)},children:n.isPlaceholder?null:a("div",{className:"flex",children:[e("button",{onClick:n.column.getToggleSortingHandler(),type:"button",className:s("flex w-full cursor-pointer select-none gap-1 overflow-hidden pr-1 text-transform-inherit",{"":n.column.getCanSort()}),children:a("span",{className:"flex w-full  grow items-center overflow-hidden font-medium",children:[b(n.column.columnDef.header,n.getContext()),{asc:e(l,{className:"size-3 shrink-0"}),desc:e(r,{className:"size-3 shrink-0"}),empty:e(p,{className:"size-3 shrink-0"})}[n.column.getIsSorted()||"empty"]]})}),e(v,{column:n.column}),e("span",{"aria-label":"resize",onDoubleClick:()=>n.column.resetSize(),onMouseDown:n.getResizeHandler(),onTouchStart:n.getResizeHandler(),role:"presentation",className:s("absolute right-0 top-1/2  h-3/5 w-[2px] -translate-y-1/2 cursor-ew-resize bg-slate-300/30 opacity-0 transition-all duration-500 group-hover/table:opacity-100 select-none touch-none",{"isResizing cursor-ew-resize":n.column.getIsResizing()})})]})},n.id))},i.id))})};export{N as DataGridHeader};
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{IconButton as u}from"@jamsrui/icon-button";import{ArrowDownIcon as l,ArrowLeftToLineIcon as m,ArrowRightToLineIcon as g,ArrowUpIcon as s,ChevronsUpDownIcon as p,EllipsisVerticalIcon as f,EyeClosedIcon as I}from"@jamsrui/icons";import{Menu as o}from"@jamsrui/menu";import{TableColumn as C,TableHeader as b,TableRow as h}from"@jamsrui/table";import{cn as d}from"@jamsrui/utils";import{flexRender as R}from"@tanstack/react-table";import{useDataGridContext as v}from"./data-grid-context.mjs";import{getPinningStyles as w}from"./utils.mjs";const N=()=>{const{table:t}=v(),r=t.getHeaderGroups();return e(b,{children:r.map(i=>e(h,{children:i.headers.map(n=>e(C,{className:"relative",colSpan:n.colSpan,"data-pinned":n.column.getIsPinned()||void 0,style:{width:n.getSize(),...w(n.column)},children:n.isPlaceholder?null:R(n.column.columnDef.header,n.getContext())},n.id))},i.id))})},S=({column:t})=>a(o,{children:[e(o.Trigger,{children:e(u,{label:"More",size:"sm",variant:"light",className:"invisible group-hover/th:visible",children:e(f,{className:"size-4"})})}),a(o.Content,{children:[e(o.Group,{children:a(o.RadioGroup,{value:t.getIsSorted()||"",children:[a(o.RadioItem,{disabled:!t.getCanSort(),preventCloseOnClick:!1,value:"asc",onClick:()=>{t.getIsSorted()==="asc"?t.clearSorting():t.toggleSorting(!1)},textValue:"Asc",children:[e(s,{}),"Asc",e(o.ItemIndicator,{className:"ml-auto"})]}),a(o.RadioItem,{disabled:!t.getCanSort(),preventCloseOnClick:!1,value:"desc",onClick:()=>{t.getIsSorted()==="desc"?t.clearSorting():t.toggleSorting(!0)},textValue:"Desc",children:[e(l,{}),"Desc",e(o.ItemIndicator,{className:"ml-auto"})]})]})}),e(o.Separator,{}),a(o.Item,{disabled:!t.getCanHide(),onClick:t.getToggleVisibilityHandler(),textValue:"Hide Column",children:[e(I,{}),"Hide Column"]}),e(o.Separator,{}),e(o.Group,{children:a(o.RadioGroup,{value:t.getIsPinned()||"",children:[a(o.RadioItem,{preventCloseOnClick:!1,value:"left",onClick:()=>{t.pin(t.getIsPinned()==="left"?!1:"left")},textValue:"Pin To Left",children:[e(m,{}),"Pin To Left",e(o.ItemIndicator,{className:"ml-auto"})]}),a(o.RadioItem,{preventCloseOnClick:!1,value:"right",onClick:()=>t.pin(t.getIsPinned()==="right"?!1:"right"),textValue:"Pin To Right",children:[e(g,{}),"Pin To Right",e(o.ItemIndicator,{className:"ml-auto"})]})]})})]})]}),k=({header:t})=>e("span",{"data-slot":"data-grid-header-resizer","aria-label":"resize",onDoubleClick:()=>t.column.resetSize(),onMouseDown:t.getResizeHandler(),onTouchStart:t.getResizeHandler(),role:"presentation",className:d("absolute right-0 top-1/2  h-3/5 w-[2px] -translate-y-1/2 cursor-ew-resize bg-slate-300/30 transition-all duration-500 select-none touch-none","invisible group-hover/table:visible",{"isResizing cursor-ew-resize":t.column.getIsResizing()})}),P=t=>{const{header:r,children:i,hideResizer:n=!1,hideDropdown:c=!1}=t;return a("div",{className:"flex","data-slot":"data-grid-header-column","data-sort":r.column.getIsSorted(),children:[e("button",{onClick:r.column.getToggleSortingHandler(),type:"button",className:d("flex w-full cursor-default select-none gap-1 overflow-hidden pr-1 text-transform-inherit",{"":r.column.getCanSort()}),children:a("span",{className:"flex w-full  grow items-center overflow-hidden font-medium",children:[i,{asc:e(s,{className:"size-3 shrink-0"}),desc:e(l,{className:"size-3 shrink-0"}),empty:e(p,{className:"size-3 shrink-0"})}[r.column.getIsSorted()||"empty"]]})}),!c&&e(S,{column:r.column}),!n&&e(k,{header:r})]})};export{N as DataGridHeader,P as DataGridHeaderColumn};

package/dist/data-grid-pagination.d.mts

@@ -1,9 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Select } from '@jamsrui/select';
+import { UIProps } from '@jamsrui/utils';
 
-declare const DataGridPagination: () => react_jsx_runtime.JSX.Element | null;
+declare const DataGridPaginationSelector: (props: DataGridPaginationSelector.Props) => react_jsx_runtime.JSX.Element;
+declare namespace DataGridPaginationSelector {
+    interface Props extends Select.Props {
+    }
+}
+declare const DataGridPaginationControls: (props: DataGridPaginationControls.Props) => react_jsx_runtime.JSX.Element;
+declare namespace DataGridPaginationControls {
+    interface Props extends UIProps<"div"> {
+    }
+}
+declare const DataGridPagination: (props: DataGridPagination.Props) => react_jsx_runtime.JSX.Element | null;
 declare namespace DataGridPagination {
-    interface Props<T> {
+    interface Props extends UIProps<"div"> {
     }
 }
 
-export { DataGridPagination };
+export { DataGridPagination, DataGridPaginationControls, DataGridPaginationSelector };

package/dist/data-grid-pagination.mjs

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as v}from"react";import{IconButton as s}from"@jamsrui/icon-button";import{ChevronDoubleLeftIcon as h,ChevronDoubleRightIcon as x,ChevronLeftIcon as C,ChevronRightIcon as b}from"@jamsrui/icons";import{Label as I}from"@jamsrui/label";import{Select as o}from"@jamsrui/select";import{useDataGridContext as N}from"./data-grid-context.mjs";const L=()=>{const{table:t,isEmpty:r}=N(),[g,c]=v(10),u=()=>{t.nextPage()},m=()=>{t.previousPage()},d=()=>{t.setPageIndex(0)},p=()=>{t.setPageIndex(t.getPageCount()-1)},i=t.getPageCount(),P=i?t.getState().pagination.pageIndex+1:0,f=n=>{const l=Number(n);t.setPageSize(l),c(l)};return r?null:a("div",{className:"flex flex-col w-full justify-between gap-4 md:flex-row md:items-center","data-slot":"pagination",children:[a(o,{className:"flex flex-row items-center gap-2",onValueChange:f,returnFocus:!1,size:"sm",value:g,children:[e(I,{children:"Rows Per Page:"}),e(o.Trigger,{}),e(o.Popover,{children:e(o.Content,{children:[10,20,50,100,500].map(n=>e(o.Item,{textValue:n.toString(),value:n,children:n.toString()},n.toString()))})})]}),a("div",{className:"flex gap-1 md:gap-4",children:[a("div",{className:"flex items-center justify-center text-sm font-medium",children:["Page ",P," of ",i]}),a("div",{className:"flex items-center",children:[a(s,{disabled:!t.getCanPreviousPage(),label:"First Page",onClick:d,radius:"full",size:"sm",variant:"light",children:[e("span",{className:"sr-only",children:"Go to first page"}),e(h,{height:20,width:20})]}),a(s,{disabled:!t.getCanPreviousPage(),label:"Previous Page",onClick:m,radius:"full",size:"sm",variant:"light",children:[e("span",{className:"sr-only",children:"Go to previous page"}),e(C,{height:20,width:20})]}),a(s,{disabled:!t.getCanNextPage(),label:"Next Page",onClick:u,radius:"full",size:"sm",variant:"light",children:[e("span",{className:"sr-only",children:"Go to next page"}),e(b,{height:20,width:20})]}),a(s,{disabled:!t.getCanNextPage(),label:"Last Page",onClick:p,radius:"full",size:"sm",variant:"light",children:[e("span",{className:"sr-only",children:"Go to last page"}),e(x,{height:20,width:20})]})]})]})]})};export{L as DataGridPagination};
+"use client";import{Fragment as P,jsx as e,jsxs as c}from"react/jsx-runtime";import{useState as x}from"react";import{IconButton as g}from"@jamsrui/icon-button";import{ChevronDoubleLeftIcon as v,ChevronDoubleRightIcon as h,ChevronLeftIcon as C,ChevronRightIcon as b}from"@jamsrui/icons";import{Label as I}from"@jamsrui/label";import{Select as l}from"@jamsrui/select";import{useRenderElement as G}from"@jamsrui/hooks";import{cn as u}from"@jamsrui/utils";import{useDataGridContext as m}from"./data-grid-context.mjs";const N=a=>{const{className:n,...r}=a,{table:t}=m(),[s,d]=x(10),p=o=>{const i=Number(o);t.setPageSize(i),d(i)};return c(l,{className:u("flex flex-row items-center gap-2",n),onValueChange:p,returnFocus:!1,size:"sm",value:s,"data-slot":"pagination-selector",...r,children:[e(I,{children:"Rows Per Page:"}),e(l.Trigger,{className:"px-1"}),e(l.Popover,{children:e(l.Content,{children:[10,20,50,100,500].map(o=>e(l.Item,{textValue:o.toString(),value:o,children:o.toString()},o.toString()))})})]})},D=a=>{const{className:n,...r}=a,{table:t}=m(),s=()=>{t.nextPage()},d=()=>{t.previousPage()},p=()=>{t.setPageIndex(0)},o=()=>{t.setPageIndex(t.getPageCount()-1)},i=t.getPageCount(),f=i?t.getState().pagination.pageIndex+1:0;return c("div",{"data-slot":"pagination-controls",className:u("flex gap-1 md:gap-4",n),...r,children:[c("div",{className:"flex items-center justify-center text-sm font-medium",children:["Page ",f," of ",i]}),c("div",{className:"flex items-center",children:[e(g,{disabled:!t.getCanPreviousPage(),label:"Go to first page",onClick:p,radius:"full",size:"sm",variant:"light",children:e(v,{height:20,width:20})}),e(g,{disabled:!t.getCanPreviousPage(),label:"Go to previous page",onClick:d,radius:"full",size:"sm",variant:"light",children:e(C,{height:20,width:20})}),e(g,{disabled:!t.getCanNextPage(),label:"Go to next page",onClick:s,radius:"full",size:"sm",variant:"light",children:e(b,{height:20,width:20})}),e(g,{disabled:!t.getCanNextPage(),label:"Go to last page",onClick:o,radius:"full",size:"sm",variant:"light",children:e(h,{height:20,width:20})})]})]})},z=a=>{const{isEmpty:n}=m();if(n)return null;const{children:r=c(P,{children:[e(N,{}),e(D,{})]}),...t}=a,s=G("div",{props:[{className:"flex flex-col w-full justify-between gap-4 md:flex-row md:items-center mt-2","data-slot":"pagination",children:r},t]});return e(P,{children:s})};export{z as DataGridPagination,D as DataGridPaginationControls,N as DataGridPaginationSelector};

package/dist/data-grid-table.d.mts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Table } from '@jamsrui/table';
 
 declare const DataGridTable: (props: DataGridTable.Props) => react_jsx_runtime.JSX.Element;
 declare namespace DataGridTable {
-    interface Props {
-        children: React.ReactNode;
+    interface Props extends Table.Props {
     }
 }
 

package/dist/data-grid-table.mjs

@@ -1 +1 @@
-"use client";import{jsx as l}from"react/jsx-runtime";import{Table as r}from"@jamsrui/table";import{useDataGridContext as o}from"./data-grid-context.mjs";const s=e=>{const{children:a}=e,{rootProps:t}=o();return l(r,{className:"w-full table-fixed",...t,children:a})};export{s as DataGridTable};
+"use client";import{Fragment as d,jsx as a,jsxs as m}from"react/jsx-runtime";import{Table as l}from"@jamsrui/table";import{DataGridBody as s}from"./data-grid-body.mjs";import{DataGridHeader as i}from"./data-grid-header.mjs";import{cn as p}from"@jamsrui/utils";const T=e=>{const{children:r=m(d,{children:[a(i,{}),a(s,{})]}),className:o,...t}=e;return a(l,{className:p("w-full table-fixed",o),...t,children:r})};export{T as DataGridTable};

package/dist/data-grid.d.mts

@@ -1,11 +1,19 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { RowData } from '@tanstack/react-table';
+import { ReactNode } from 'react';
 import { useDataGrid } from './use-data-grid.mjs';
-import '@tanstack/react-table';
-import '@jamsrui/table';
 
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        headerTitle?: string;
+        headerClassName?: string;
+        cellClassName?: string;
+        expandedContent?: (row: TData) => ReactNode;
+    }
+}
 declare const DataGrid: (props: DataGrid.Props) => react_jsx_runtime.JSX.Element;
 declare namespace DataGrid {
-    interface Props extends useDataGrid.Props<any> {
+    interface Props extends useDataGrid.Props {
     }
 }
 

package/dist/data-grid.mjs

@@ -1 +1 @@
-"use client";import{Fragment as P,jsx as r,jsxs as a}from"react/jsx-runtime";import{useRenderElement as n}from"@jamsrui/hooks";import{mergeConfigProps as p}from"@jamsrui/utils";import{DataGridBody as s}from"./data-grid-body.mjs";import{DataGridColumnVisibility as f}from"./data-grid-column-visibility.mjs";import{useDataGridConfig as l}from"./data-grid-config.mjs";import{DataGridContext as D}from"./data-grid-context.mjs";import{DataGridHeader as G}from"./data-grid-header.mjs";import{DataGridLoading as c}from"./data-grid-loading.mjs";import{DataGridPagination as g}from"./data-grid-pagination.mjs";import{DataGridTable as x}from"./data-grid-table.mjs";import{useDataGrid as u}from"./use-data-grid.mjs";const R=t=>{const i=l(),e=p({},i,t),o=u(e),d=a(P,{children:[r(f,{}),!!o.isLoading&&r(c,{}),a(x,{children:[r(G,{}),r(s,{})]}),r(g,{})]}),m=n("div",{props:[{"data-component":"data-grid","data-slot":"root",className:"relative flex flex-col gap-2"},{children:d}]});return r(D,{value:o,children:m})};export{R as DataGrid};
+"use client";import{jsx as o}from"react/jsx-runtime";import{DataGridContext as t}from"./data-grid-context.mjs";import{useDataGrid as r}from"./use-data-grid.mjs";const m=a=>{const e=r(a);return o(t,{value:e,children:a.children})};export{m as DataGrid};

package/dist/index.d.mts

@@ -1,8 +1,42 @@
-export { DataGrid } from './data-grid.mjs';
-export { DataGridConfig, useDataGridConfig } from './data-grid-config.mjs';
+import * as _tanstack_react_table from '@tanstack/react-table';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { DataGridBody } from './data-grid-body.mjs';
+export { DataGridColumnVisibility } from './data-grid-column-visibility.mjs';
+import { DataGridConfig } from './data-grid-config.mjs';
+export { DataGridHeader, DataGridHeaderColumn } from './data-grid-header.mjs';
+import { DataGridPagination, DataGridPaginationSelector } from './data-grid-pagination.mjs';
 export { DataGridRowSelect, DataGridRowSelectAll } from './data-grid-row-select.mjs';
-import 'react/jsx-runtime';
-import './use-data-grid.mjs';
-import '@tanstack/react-table';
-import '@jamsrui/table';
+import { DataGridTable } from './data-grid-table.mjs';
+import { DataGrid as DataGrid$1 } from './data-grid.mjs';
+export { useDataGridTable } from './use-react-table.mjs';
 import '@jamsrui/core';
+import '@jamsrui/select';
+import '@jamsrui/utils';
+import '@jamsrui/table';
+import 'react';
+import './use-data-grid.mjs';
+
+declare const DataGrid: ((props: DataGrid$1.Props) => react_jsx_runtime.JSX.Element) & {
+    Body: () => react_jsx_runtime.JSX.Element;
+    ColumnVisibility: () => react_jsx_runtime.JSX.Element;
+    Config: (props: Omit<Partial<DataGridConfig.Props>, "children"> & {
+        merge?: boolean;
+        children: React.ReactNode;
+    }) => react_jsx_runtime.JSX.Element;
+    HeaderColumn: (props: {
+        header: _tanstack_react_table.Header<any, unknown>;
+        children: React.ReactNode;
+        hideResizer?: boolean;
+        hideDropdown?: boolean;
+    }) => react_jsx_runtime.JSX.Element;
+    Header: () => react_jsx_runtime.JSX.Element;
+    Pagination: (props: DataGridPagination.Props) => react_jsx_runtime.JSX.Element | null;
+    PaginationSelector: (props: DataGridPaginationSelector.Props) => react_jsx_runtime.JSX.Element;
+    RowSelect: ({ row }: {
+        row: _tanstack_react_table.Row<any>;
+    }) => react_jsx_runtime.JSX.Element;
+    RowSelectAll: () => react_jsx_runtime.JSX.Element;
+    Table: (props: DataGridTable.Props) => react_jsx_runtime.JSX.Element;
+};
+
+export { DataGrid, DataGridConfig, DataGridPagination, DataGridPaginationSelector, DataGridTable };

package/dist/index.mjs

@@ -1 +1 @@
-import{DataGrid as o}from"./data-grid.mjs";import{DataGridConfig as e,useDataGridConfig as i}from"./data-grid-config.mjs";import{DataGridRowSelect as f,DataGridRowSelectAll as D}from"./data-grid-row-select.mjs";export{o as DataGrid,e as DataGridConfig,f as DataGridRowSelect,D as DataGridRowSelectAll,i as useDataGridConfig};
+import{DataGridBody as a}from"./data-grid-body.mjs";import{DataGridColumnVisibility as i}from"./data-grid-column-visibility.mjs";import{DataGridConfig as o}from"./data-grid-config.mjs";import{DataGridHeader as r,DataGridHeaderColumn as t}from"./data-grid-header.mjs";import{DataGridPagination as e,DataGridPaginationSelector as m}from"./data-grid-pagination.mjs";import{DataGridRowSelect as d,DataGridRowSelectAll as l}from"./data-grid-row-select.mjs";import{DataGridTable as n}from"./data-grid-table.mjs";import{DataGrid as D}from"./data-grid.mjs";import{useDataGridTable as w}from"./use-react-table.mjs";const S=Object.assign(D,{Body:a,ColumnVisibility:i,Config:o,HeaderColumn:t,Header:r,Pagination:e,PaginationSelector:m,RowSelect:d,RowSelectAll:l,Table:n});export{S as DataGrid,a as DataGridBody,i as DataGridColumnVisibility,o as DataGridConfig,r as DataGridHeader,t as DataGridHeaderColumn,e as DataGridPagination,m as DataGridPaginationSelector,d as DataGridRowSelect,l as DataGridRowSelectAll,n as DataGridTable,w as useDataGridTable};

package/dist/use-data-grid.d.mts

@@ -1,23 +1,13 @@
-import * as _tanstack_react_table from '@tanstack/react-table';
-import { TableOptions } from '@tanstack/react-table';
-import { Table } from '@jamsrui/table';
+import { Table } from '@tanstack/react-table';
 
-declare const useDataGrid: <TData>(props: useDataGrid.Props<TData>) => {
-    table: _tanstack_react_table.Table<TData>;
-    isLoading: boolean | undefined;
+declare const useDataGrid: (props: useDataGrid.Props) => {
+    table: Table<any>;
     isEmpty: boolean;
-    rootProps: {
-        isHeaderSticky: boolean | undefined;
-        variant: "bordered" | "solid" | undefined;
-        radius: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "none" | undefined;
-        density: "compact" | "standard" | "comfortable" | undefined;
-        allowHover: boolean | undefined;
-        separateRows: boolean | undefined;
-    };
 };
 declare namespace useDataGrid {
-    interface Props<TData> extends Pick<TableOptions<TData>, "data" | "columns">, Partial<Omit<TableOptions<TData>, "data" | "columns">>, Pick<Table.Props, "isHeaderSticky" | "variant" | "radius" | "density" | "allowHover" | "separateRows"> {
-        isLoading?: boolean;
+    interface Props {
+        table: Table<any>;
+        children: React.ReactNode;
     }
 }
 

package/dist/use-data-grid.mjs

@@ -1 +1 @@
-"use client";import{useMemo as m,useState as t}from"react";import{getCoreRowModel as k,getExpandedRowModel as V,getFilteredRowModel as v,getPaginationRowModel as H,getSortedRowModel as z,useReactTable as E}from"@tanstack/react-table";const I=u=>{const{columns:S,data:e,state:p,isLoading:o,isHeaderSticky:n,variant:a,radius:i,density:s,allowHover:r,separateRows:l,...w}=u,[R,C]=t([]),[P,b]=t({pageSize:10,pageIndex:0}),[y,M]=t({}),[T,h]=t([]),[D,O]=t({}),[G,x]=t({bottom:[],top:[]}),[F,f]=t([]),d=e.length===0,g=E({columnResizeMode:"onChange",columnResizeDirection:"ltr",getCoreRowModel:k(),getPaginationRowModel:H(),getSortedRowModel:z(),getFilteredRowModel:v(),onSortingChange:C,onColumnFiltersChange:h,onColumnVisibilityChange:M,onRowSelectionChange:O,onPaginationChange:b,getExpandedRowModel:V(),onColumnOrderChange:f,onRowPinningChange:x,...w,state:{sorting:R,columnFilters:T,columnVisibility:y,rowSelection:D,pagination:P,columnOrder:F,...p},data:e,columns:S}),c=m(()=>({isHeaderSticky:n,variant:a,radius:i,density:s,allowHover:r,separateRows:l}),[r,s,n,i,l,a]);return m(()=>({table:g,isLoading:o,isEmpty:d,rootProps:c}),[d,o,c,g])};export{I as useDataGrid};
+"use client";import{useMemo as r}from"react";const s=a=>{const{table:e}=a,t=e.getCoreRowModel().rows.length===0;return r(()=>({table:e,isEmpty:t}),[t,e])};export{s as useDataGrid};

package/dist/use-react-table.d.mts

@@ -0,0 +1,6 @@
+import * as _tanstack_react_table from '@tanstack/react-table';
+import { TableOptions } from '@tanstack/react-table';
+
+declare const useDataGridTable: <TData>(props: Pick<TableOptions<TData>, "data" | "columns"> & Partial<Omit<TableOptions<TData>, "data" | "columns">>) => _tanstack_react_table.Table<TData>;
+
+export { useDataGridTable };

package/dist/use-react-table.mjs

@@ -0,0 +1 @@
+"use client";import{getCoreRowModel as p,getExpandedRowModel as P,getFilteredRowModel as M,getPaginationRowModel as O,getSortedRowModel as h,useReactTable as T}from"@tanstack/react-table";import{useState as t}from"react";const x=e=>{const{data:o,columns:n,state:i,...a}=e,[l,s]=t([]),[r,g]=t({pageSize:10,pageIndex:0}),[c,d]=t({}),[S,m]=t([]),[u,R]=t({}),[F,w]=t({bottom:[],top:[]}),[C,b]=t([]);return T({columnResizeMode:"onChange",columnResizeDirection:"ltr",getCoreRowModel:p(),getPaginationRowModel:O(),getSortedRowModel:h(),getFilteredRowModel:M(),onSortingChange:s,onColumnFiltersChange:m,onColumnVisibilityChange:d,onRowSelectionChange:R,onPaginationChange:g,getExpandedRowModel:P(),onColumnOrderChange:b,onRowPinningChange:w,...a,state:{sorting:l,columnFilters:S,columnVisibility:c,rowSelection:u,pagination:r,columnOrder:C,...i},data:o,columns:n})};export{x as useDataGridTable};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jamsrui/data-grid",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "peerDependencies": {
     "@tanstack/react-table": ">=8",
     "react": ">=19"
@@ -10,20 +10,20 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@jamsrui/button": "^0.0.20",
-    "@jamsrui/checkbox": "^0.0.19",
-    "@jamsrui/divider": "^0.0.18",
-    "@jamsrui/icon-button": "^0.0.18",
-    "@jamsrui/core": "^0.0.14",
-    "@jamsrui/icons": "^0.0.14",
-    "@jamsrui/input": "^0.0.21",
-    "@jamsrui/label": "^0.0.12",
-    "@jamsrui/hooks": "^0.0.18",
-    "@jamsrui/menu": "^0.0.20",
-    "@jamsrui/select": "^0.0.20",
-    "@jamsrui/linear-progress": "^0.0.18",
-    "@jamsrui/utils": "^0.0.18",
-    "@jamsrui/table": "^0.0.18"
+    "@jamsrui/button": "^0.0.21",
+    "@jamsrui/core": "^0.0.15",
+    "@jamsrui/hooks": "^0.0.19",
+    "@jamsrui/divider": "^0.0.19",
+    "@jamsrui/checkbox": "^0.0.20",
+    "@jamsrui/icon-button": "^0.0.19",
+    "@jamsrui/icons": "^0.0.16",
+    "@jamsrui/input": "^0.0.22",
+    "@jamsrui/label": "^0.0.13",
+    "@jamsrui/linear-progress": "^0.0.19",
+    "@jamsrui/table": "^0.0.20",
+    "@jamsrui/utils": "^0.0.19",
+    "@jamsrui/select": "^0.0.22",
+    "@jamsrui/menu": "^0.0.22"
   },
   "exports": {
     ".": {

package/dist/data-grid-loading.d.mts

@@ -1,9 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare const DataGridLoading: (props: DataGridLoading.Props) => react_jsx_runtime.JSX.Element;
-declare namespace DataGridLoading {
-    interface Props {
-    }
-}
-
-export { DataGridLoading };

package/dist/data-grid-loading.mjs

@@ -1 +0,0 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import{LinearProgress as r}from"@jamsrui/linear-progress";const t=a=>e(r,{className:"absolute inset-0",...a});export{t as DataGridLoading};