@chumsinc/sortable-tables 2.0.14 → 2.1.1

package/CHANGELOG.md

@@ -7,7 +7,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v2.0.14](https://github.com/ChumsInc/sortable-tables/compare/v2.0.13...v2.0.14)
+#### [v2.1.1](https://github.com/ChumsInc/sortable-tables/compare/v2.1.0...v2.1.1)
+
+> 2025-11-04
+
+
+
+
+### Commits
+
+- [`be79047`](https://github.com/ChumsInc/sortable-tables/commit/be79047541456eee2006706438b55aa61aed4fc1)  chore: update types and dependencies
+
+#### [v2.1.0](https://github.com/ChumsInc/sortable-tables/compare/v2.0.14...v2.1.0) - 2025-11-03
+
+> 2025-11-03
+
+
+
+
+### Commits
+
+- [`7b2a057`](https://github.com/ChumsInc/sortable-tables/commit/7b2a057454d2b46affe2cccfce060c7812065a23)  migrate to vite library build
+- [`ae562e9`](https://github.com/ChumsInc/sortable-tables/commit/ae562e9c631b94c367f87ff5df70e849ee0405a2)  migrate to vite library build
+
+#### [v2.0.14](https://github.com/ChumsInc/sortable-tables/compare/v2.0.13...v2.0.14) - 2025-08-06
 
 > 2025-08-06
 

package/dist/DataTable.d.ts

@@ -1,4 +1,4 @@
-import { DataTableProps } from "./types";
+import { DataTableProps } from './types';
 declare function DataTable<T = unknown>({ fields, data, keyField, size, sticky, responsive, rowClassName, renderRow, onSelectRow, selected, className, tfoot, children, tableHeadProps, ...rest }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTable {
     var displayName: string;

package/dist/DataTableCell.d.ts

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { DataTableCellProps } from "./types";
+import { default as React, ReactNode } from 'react';
+import { DataTableCellProps } from './types';
 export default function DataTableCell<T = unknown>({ field, row, className, as, ...rest }: DataTableCellProps<T>): React.DetailedReactHTMLElement<{
     children?: ReactNode | undefined;
     align?: "left" | "center" | "right" | undefined;
@@ -57,7 +57,7 @@ export default function DataTableCell<T = unknown>({ field, row, className, as,
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    popover?: "" | "auto" | "manual" | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
     popoverTarget?: string | undefined;
     inert?: boolean | undefined;

package/dist/DataTableHead.d.ts

@@ -1,4 +1,4 @@
-import { DataTableHeadProps } from "./types";
+import { DataTableHeadProps } from './types';
 declare function DataTableHead<T = unknown>({ fields, ...rest }: DataTableHeadProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTableHead {
     var displayName: string;

package/dist/DataTableRow.d.ts

@@ -1,4 +1,4 @@
-import { DataTableRowProps } from "./types";
+import { DataTableRowProps } from './types';
 declare function DataTableRow<T = unknown>({ className, rowClassName, selected, fields, row, trRef, onClick, ...rest }: DataTableRowProps<T>): import("react/jsx-runtime").JSX.Element | null;
 declare namespace DataTableRow {
     var displayName: string;

package/dist/DataTableTBody.d.ts

@@ -1,4 +1,4 @@
-import { DataTableTBodyProps } from "./types";
+import { DataTableTBodyProps } from './types';
 declare function DataTableTBody<T = unknown>({ fields, data, keyField, rowClassName, renderRow, onSelectRow, selected, children, ...rest }: DataTableTBodyProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTableTBody {
     var displayName: string;

package/dist/DataTableTH.d.ts

@@ -1,4 +1,4 @@
-import { DataTableTHProps } from "./types";
+import { DataTableTHProps } from './types';
 declare function DataTableTH<T = unknown>({ field, className, children, ...rest }: DataTableTHProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTableTH {
     var displayName: string;

package/dist/RowsPerPage.d.ts

@@ -1,4 +1,4 @@
-import { RowsPerPageProps } from "./types";
+import { RowsPerPageProps } from './types';
 export declare const defaultRowsPerPageValues: number[];
 declare function RowsPerPage({ value, pageValues, size, label, className, onChange, ...rest }: RowsPerPageProps): import("react/jsx-runtime").JSX.Element;
 declare namespace RowsPerPage {

package/dist/SortableTable.d.ts

@@ -1,4 +1,4 @@
-import { SortableTableProps } from "./types";
+import { SortableTableProps } from './types';
 declare function SortableTable<T = unknown>({ fields, data, currentSort, onChangeSort, keyField, size, sticky, rowClassName, renderRow, onSelectRow, selected, className, tfoot, children, ...rest }: SortableTableProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace SortableTable {
     var displayName: string;

package/dist/SortableTableHead.d.ts

@@ -1,4 +1,4 @@
-import { SortableTableHeadProps } from "./types";
+import { SortableTableHeadProps } from './types';
 declare function SortableTableHead<T = unknown>({ currentSort, fields, onChangeSort, }: SortableTableHeadProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace SortableTableHead {
     var displayName: string;

package/dist/SortableTableTH.d.ts

@@ -1,4 +1,4 @@
-import { SortableTableTHProps } from "./types";
+import { SortableTableTHProps } from './types';
 declare function SortableTableTH<T = unknown>({ field, sorted, ascending, className, onClick }: SortableTableTHProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace SortableTableTH {
     var displayName: string;

package/dist/Table.d.ts

@@ -1,5 +1,5 @@
-import React, { TableHTMLAttributes } from 'react';
-import { DataTableProps } from "./types";
+import { default as React, TableHTMLAttributes } from 'react';
+import { DataTableProps } from './types';
 export type StyledTableProps = TableHTMLAttributes<HTMLTableElement> & Pick<DataTableProps, 'sticky' | 'responsive'>;
 declare const _default: React.ForwardRefExoticComponent<React.TableHTMLAttributes<HTMLTableElement> & Pick<DataTableProps<unknown>, "sticky" | "responsive"> & React.RefAttributes<HTMLTableElement>>;
 export default _default;

package/dist/TablePagination.d.ts

@@ -1,4 +1,4 @@
-import { TablePaginationProps } from "./types";
+import { TablePaginationProps } from './types';
 declare function TablePagination({ page, rowsPerPage, onChangePage, count, size, showFirst, showLast, className, rowsPerPageProps, ...rest }: TablePaginationProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TablePagination {
     var displayname: string;

package/dist/index.cjs.js

@@ -0,0 +1,28 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("classnames"),T=require("react"),C=require("@emotion/styled");function N({field:a,className:s,children:e,...n}){const l=b({[`text-${a.align}`]:!!a.align},s);return t.jsx("th",{className:l,scope:"col",...n,children:e??a.title})}N.displayName="DataTableTH";function S({fields:a,...s}){return t.jsx("thead",{...s,children:t.jsx("tr",{children:a.map((e,n)=>t.jsx(N,{...e.thProps,field:e,className:b(typeof e.className=="function"?{[`text-${e.align}`]:!!e.align}:e.className)},e.id??n))})})}S.displayName="DataTableHead";function w({field:a,row:s,className:e,as:n,...l}){const c=b({[`text-${a.align}`]:!!a.align},e,typeof a.className=="function"?a.className(s):a.className);return T.createElement(n??a.as??"td",{className:c,scope:(n??a.as)==="th"?"row":void 0,colSpan:a.colSpan,...a.cellProps,...l},s[a.field]===void 0&&!a.render?null:typeof a.render=="function"?a.render(s):s[a.field])}function f({className:a,rowClassName:s,selected:e,fields:n,row:l,trRef:c,onClick:r,...i}){const d=m=>{r?.(l,m)},o=typeof s=="function"?s(l):s;return l?t.jsx("tr",{ref:c,className:b({"table-active":e},a,o),onClick:d,...i,children:n.map((m,u)=>t.jsx(w,{field:m,row:l},u))}):null}f.displayName="DataTableRow";function p({fields:a,data:s,keyField:e,rowClassName:n,renderRow:l,onSelectRow:c,selected:r="",children:i,...d}){return t.jsxs("tbody",{...d,children:[s.map(o=>{const m=String(typeof e=="function"?e(o):o[e]),u=typeof r=="function"?r(o):m===r;return l?l(o):t.jsx(f,{onClick:c,rowClassName:n,fields:a,row:o,selected:u},m)}),i]})}p.displayName="DataTableTBody";const k=C.table`
+    --table-sticky-top: ${a=>a.sticky?"0":void 0};
+
+    thead {
+        tr:nth-of-type(1) td,
+        tr:nth-of-type(1) th {
+            top: var(--table-sticky-top, unset);
+            position: ${a=>a.sticky?"sticky":"unset"};
+            z-index: ${a=>a.sticky?10:"unset"};
+            background: ${a=>a.sticky?"linear-gradient(var(--bs-table-bg) 75%, rgba(var(--bs-secondary-bg-rgb), 0.9))":"unset"};
+        }
+    }
+`,D=T.forwardRef(function({sticky:s,responsive:e,children:n,className:l,...c},r){if(e){const i=b(l,{"table-responsive":e===!0,[`table-responsive-${e}`]:e!==!0});return t.jsx("div",{className:i,children:t.jsx(k,{ref:r,...c,children:n})})}return t.jsx(k,{className:l,sticky:s,ref:r,...c,children:n})});function H({fields:a,data:s,keyField:e,size:n="",sticky:l,responsive:c,rowClassName:r,renderRow:i,onSelectRow:d,selected:o="",className:m="",tfoot:u,children:h,tableHeadProps:x,...j}){const y=b("table",m,{[`table-${n}`]:!!n});return t.jsxs(D,{sticky:l,responsive:c,className:y,...j,children:[t.jsx(S,{...x,fields:a}),!!s.length&&t.jsx(p,{fields:a,data:s,keyField:e,rowClassName:r,renderRow:i,onSelectRow:d,selected:o}),h,u]})}H.displayName="DataTable";const B=a=>{if(!a)return"flex-start";switch(a){case"end":return"flex-end";default:return"center"}},M=C.div`
+    display: flex;
+    width: 100%;
+    flex-direction: ${a=>a.align==="end"?"row-reverse":"row"};
+    justify-content: ${a=>B(a.align)};
+    .sort-icon {
+        flex-grow: ${a=>a.align==="end"?"1":"0"};
+        opacity: ${a=>a.sorted?1:0};
+    }
+    &:hover .sort-icon {
+        color: ${a=>a.sorted?"unset":"var(--bs-primary)"} ;
+        opacity: 0.75;
+        transition: opacity 0.2s;
+    }
+`;function g({field:a,sorted:s,ascending:e,className:n,onClick:l}){if(!a.sortable)return t.jsx(N,{field:a,className:n});const{className:c,...r}=a.thProps??{},i=b(n,c,{[`text-${a.align}`]:!!a.align}),d=()=>{l({field:a.field,ascending:s?!e:!0})},o={"bi-arrow-down":e,"bi-arrow-up":!e};return t.jsx("th",{...r,className:b("sortable",i),scope:"col",onClick:d,children:t.jsxs(M,{sorted:s,align:a.align,children:[t.jsx("div",{className:"field-title",children:a.title}),t.jsx("div",{className:b("me-1 sort-icon",o)})]})})}g.displayName="SortableTableTH";function v({currentSort:a,fields:s,onChangeSort:e}){const{field:n,ascending:l}=a;return t.jsx("thead",{children:t.jsx("tr",{children:s.map((c,r)=>t.jsx(g,{field:c,sorted:n===c.field,ascending:l,className:b(typeof c.className=="function"?{[`text-${c.align}`]:!!c.align}:c.className),onClick:e},r))})})}v.displayName="SortableTableHead";function R({fields:a,data:s,currentSort:e,onChangeSort:n,keyField:l,size:c="",sticky:r,rowClassName:i,renderRow:d,onSelectRow:o,selected:m="",className:u="",tfoot:h,children:x,...j}){const y=b("table",u,{[`table-${c}`]:!!c});return t.jsxs(D,{className:y,sticky:r,...j,children:[t.jsx(v,{currentSort:e,fields:a,onChangeSort:n}),!!s.length&&t.jsx(p,{fields:a,data:s,keyField:l,rowClassName:i,renderRow:d,onSelectRow:o,selected:m}),x,h]})}R.displayName="SortableTable";const q=[10,25,50,100,250,500,1e3];function $({value:a,pageValues:s=q,size:e,label:n,className:l,onChange:c,...r}){const i=T.useId(),d=u=>c(Number(u.target.value)),o=l??b("form-select",{[`form-select-${e}`]:!!e}),m=b("input-group",{[`input-group-${e}`]:!!e});return t.jsxs("div",{className:m,children:[t.jsx("label",{className:"input-group-text",htmlFor:i,children:n??"Rows"}),t.jsx("select",{className:o,id:i,value:a,onChange:d,...r,children:s.map(u=>t.jsx("option",{value:u,children:u},u))})]},a)}$.displayName="RowsPerPage";function P({page:a,rowsPerPage:s,onChangePage:e,count:n,size:l,showFirst:c,showLast:r,className:i,rowsPerPageProps:d,...o}){const m=n===0?0:a*s+1,u=Math.min(a*s+s,n),h=s===0?0:Math.floor((n-1)/s),x=b("btn btn-link",{[`btn-${l}`]:!!l});return t.jsxs("div",{className:b("row g-3 justify-content-end",i),...o,children:[!!d&&t.jsx("div",{className:"col-auto",children:t.jsx($,{...d,value:s,size:l})}),t.jsx("div",{className:"col-auto",children:t.jsxs("div",{className:"row g-3 flex-nowrap align-items-baseline",children:[t.jsxs("div",{className:"col-auto",children:[m,"-",u," of ",n]}),c&&t.jsx("div",{className:"col-auto",children:t.jsx("button",{className:x,disabled:a===0,onClick:()=>e(0),"aria-label":"First page",children:t.jsx("span",{className:"bi-chevron-bar-left","aria-hidden":"true"})})}),t.jsx("div",{className:"col-auto",children:t.jsx("button",{className:x,disabled:a===0,onClick:()=>e(a-1),"aria-label":"Previous page",children:t.jsx("span",{className:"bi-chevron-left","aria-hidden":"true"})})}),t.jsx("div",{className:"col-auto",children:t.jsx("button",{className:x,disabled:a>=h,onClick:()=>e(a+1),"aria-label":"Next page",children:t.jsx("span",{className:"bi-chevron-right","aria-hidden":"true"})})}),r&&t.jsx("div",{className:"col-auto",children:t.jsx("button",{className:x,disabled:a>=h,onClick:()=>e(h),"aria-label":"Last page",children:t.jsx("span",{className:"bi-chevron-bar-right","aria-hidden":"true"})})})]})})]})}P.displayname="TablePagination";exports.DataTable=H;exports.DataTableRow=f;exports.DataTableTBody=p;exports.DataTableTH=N;exports.RowsPerPage=$;exports.SortableTable=R;exports.SortableTableHead=v;exports.SortableTableTH=g;exports.TablePagination=P;exports.defaultRowsPerPageValues=q;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../src/DataTableTH.tsx","../src/DataTableHead.tsx","../src/DataTableCell.tsx","../src/DataTableRow.tsx","../src/DataTableTBody.tsx","../src/Table.tsx","../src/DataTable.tsx","../src/SortableTableTH.tsx","../src/SortableTableHead.tsx","../src/SortableTable.tsx","../src/RowsPerPage.tsx","../src/TablePagination.tsx"],"sourcesContent":["import React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport type {DataTableTHProps} from \"./types\";\r\n\r\n\r\nfunction DataTableTH<T = unknown>({\r\n                                                     field,\r\n                                                     className,\r\n                                                     children,\r\n                                                     ...rest\r\n                                                 }: DataTableTHProps<T>) {\r\n    const thClassName = classNames({[`text-${field.align}`]: !!field.align}, className);\r\n    return (\r\n        <th className={thClassName} scope=\"col\" {...rest}>\r\n            {children ?? field.title}\r\n        </th>\r\n    )\r\n}\r\nDataTableTH.displayName = 'DataTableTH';\r\nexport default DataTableTH;\r\n","import React from \"react\";\r\nimport DataTableTH from \"./DataTableTH\";\r\nimport classNames from \"classnames\";\r\nimport type {DataTableHeadProps} from \"./types\";\r\n\r\n\r\nfunction DataTableHead<T = unknown>({fields, ...rest}: DataTableHeadProps<T>) {\r\n    return (\r\n        <thead {...rest}>\r\n        <tr>\r\n            {fields.map((field, index) => (\r\n                <DataTableTH key={field.id ?? index}\r\n                             {...field.thProps}\r\n                             field={field}\r\n                             className={classNames(\r\n                                 typeof field.className === 'function'\r\n                                     ? {[`text-${field.align}`]: !!field.align}\r\n                                     : field.className\r\n                             )}/>\r\n            ))}\r\n        </tr>\r\n        </thead>\r\n    )\r\n}\r\n\r\nDataTableHead.displayName = 'DataTableHead';\r\nexport default DataTableHead;\r\n","import React, {ReactNode} from 'react';\nimport type {DataTableCellProps} from \"./types\";\nimport classNames from \"classnames\";\n\nexport default function DataTableCell<T = unknown>({field, row, className, as, ...rest}:DataTableCellProps<T>) {\n    const cellClassName = classNames(\n        {[`text-${field.align}`]: !!field.align},\n        className,\n        typeof field.className === 'function' ? field.className(row) : field.className\n    );\n    return React.createElement(\n        (as ?? field.as) ?? 'td',\n        {\n            className: cellClassName,\n            scope: (as ?? field.as) === 'th' ? 'row' : undefined,\n            colSpan: field.colSpan,\n            ...field.cellProps,\n            ...rest\n        },\n        (row[field.field] === undefined && !field.render)\n            ? null\n            : (\n                typeof field.render === 'function'\n                    ? field.render(row)\n                    : row[field.field] as ReactNode\n            )\n    )\n}\n","import React, {MouseEvent} from 'react';\r\nimport classNames from \"classnames\";\r\nimport type {DataTableRowProps} from \"./types\";\r\nimport DataTableCell from \"./DataTableCell\";\r\n\r\n\r\nfunction DataTableRow<T = unknown>({\r\n                                       className,\r\n                                       rowClassName,\r\n                                       selected,\r\n                                       fields,\r\n                                       row,\r\n                                       trRef,\r\n                                       onClick,\r\n                                       ...rest\r\n                                   }: DataTableRowProps<T>) {\r\n    const clickHandler = (ev: MouseEvent<HTMLTableRowElement>) => {\r\n        onClick?.(row, ev)\r\n    }\r\n\r\n    const _className = typeof rowClassName === 'function' ? rowClassName(row) : rowClassName;\r\n    if (!row) {\r\n        return null;\r\n    }\r\n\r\n    return (\r\n        <tr ref={trRef}\r\n            className={classNames({'table-active': selected}, className, _className)}\r\n            onClick={clickHandler}\r\n            {...rest}>\r\n            {fields.map((field, index) => (<DataTableCell key={index} field={field} row={row}/>))}\r\n        </tr>\r\n    )\r\n}\r\n\r\nDataTableRow.displayName = 'DataTableRow';\r\nexport default DataTableRow;\r\n","import React from 'react';\r\nimport DataTableRow from \"./DataTableRow\";\r\nimport type {DataTableTBodyProps} from \"./types\";\r\n\r\n\r\nfunction DataTableTBody<T = unknown>({\r\n                                         fields,\r\n                                         data,\r\n                                         keyField,\r\n                                         rowClassName,\r\n                                         renderRow,\r\n                                         onSelectRow,\r\n                                         selected = '',\r\n                                         children,\r\n                                         ...rest\r\n                                     }: DataTableTBodyProps<T>) {\r\n    return (\r\n        <tbody {...rest}>\r\n        {data.map(row => {\r\n            const keyValue = String(typeof keyField === \"function\" ? keyField(row) : row[keyField]);\r\n            const isSelected = typeof selected === 'function' ? selected(row) : keyValue === selected;\r\n            if (renderRow) {\r\n                return renderRow(row);\r\n            }\r\n            return (\r\n                <DataTableRow key={keyValue} onClick={onSelectRow}\r\n                              rowClassName={rowClassName}\r\n                              fields={fields}\r\n                              row={row} selected={isSelected}/>\r\n            )\r\n        })}\r\n        {children}\r\n        </tbody>\r\n    )\r\n}\r\n\r\nDataTableTBody.displayName = 'DataTableTBody';\r\nexport default DataTableTBody\r\n","import React, {TableHTMLAttributes} from 'react';\nimport styled from \"@emotion/styled\";\nimport type {DataTableProps} from \"./types\";\nimport classNames from \"classnames\";\n\nexport type StyledTableProps = TableHTMLAttributes<HTMLTableElement> & Pick<DataTableProps, 'sticky' | 'responsive'>\n\nconst StyledTable = styled.table<StyledTableProps>`\n    --table-sticky-top: ${props => props.sticky ? '0' : undefined};\n\n    thead {\n        tr:nth-of-type(1) td,\n        tr:nth-of-type(1) th {\n            top: var(--table-sticky-top, unset);\n            position: ${props => props.sticky ? \"sticky\" : \"unset\"};\n            z-index: ${props => props.sticky ? 10 : \"unset\"};\n            background: ${props => props.sticky ? \"linear-gradient(var(--bs-table-bg) 75%, rgba(var(--bs-secondary-bg-rgb), 0.9))\" : \"unset\"};\n        }\n    }\n`\n\nexport default React.forwardRef<HTMLTableElement, StyledTableProps>(\n    function Table({\n                       sticky,\n                       responsive,\n                       children,\n                       className,\n                       ...rest\n                   }, ref) {\n        if (responsive) {\n            const _className = classNames(className, {\n                'table-responsive': responsive === true,\n                [`table-responsive-${responsive}`]: responsive !== true,\n            })\n            return (\n                <div className={_className}>\n                    <StyledTable ref={ref} {...rest}>{children}</StyledTable>\n                </div>\n            )\n        }\n        return (\n            <StyledTable className={className} sticky={sticky} ref={ref} {...rest}>{children}</StyledTable>\n        )\n    })\n","import React from 'react';\r\nimport classNames from \"classnames\";\r\nimport DataTableHead from \"./DataTableHead\";\r\nimport DataTableTBody from \"./DataTableTBody\";\r\nimport type {DataTableProps} from \"./types\";\r\nimport Table from \"./Table\";\r\n\r\n\r\nfunction DataTable<T = unknown>({\r\n                                    fields,\r\n                                    data,\r\n                                    keyField,\r\n                                    size = '',\r\n                                    sticky,\r\n                                    responsive,\r\n                                    rowClassName,\r\n                                    renderRow,\r\n                                    onSelectRow,\r\n                                    selected = '',\r\n                                    className = '',\r\n                                    tfoot,\r\n                                    children,\r\n                                    tableHeadProps,\r\n                                    ...rest\r\n                                }: DataTableProps<T>) {\r\n\r\n    const tableClassName = classNames('table', className, {\r\n        [`table-${size}`]: !!size,\r\n    })\r\n\r\n    return (\r\n        <Table sticky={sticky} responsive={responsive} className={tableClassName} {...rest}>\r\n            <DataTableHead {...tableHeadProps} fields={fields}/>\r\n            {!!data.length && (\r\n                <DataTableTBody fields={fields} data={data} keyField={keyField} rowClassName={rowClassName}\r\n                                renderRow={renderRow}\r\n                                onSelectRow={onSelectRow} selected={selected}/>\r\n            )}\r\n            {children}\r\n            {tfoot}\r\n        </Table>\r\n    )\r\n}\r\n\r\nDataTable.displayName = 'DataTable';\r\nexport default DataTable;\r\n","import React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport DataTableTH from \"./DataTableTH\";\r\nimport type {SortableTableTHProps, UIFlexAlign} from \"./types\";\r\nimport styled from '@emotion/styled';\r\n\r\nconst flexJustifyContent = (align?: UIFlexAlign) => {\r\n    if (!align) {\r\n        return 'flex-start';\r\n    }\r\n    switch (align) {\r\n        case 'end':\r\n            return 'flex-end';\r\n        default:\r\n            return 'center';\r\n    }\r\n}\r\n\r\ntype FieldTitleProps = {\r\n    sorted?: boolean;\r\n    align?: UIFlexAlign;\r\n};\r\nconst FieldTitle = styled.div<FieldTitleProps>`\r\n    display: flex;\r\n    width: 100%;\r\n    flex-direction: ${props => props.align === 'end' ? 'row-reverse' : 'row'};\r\n    justify-content: ${props => flexJustifyContent(props.align)};\r\n    .sort-icon {\r\n        flex-grow: ${props => props.align === 'end' ? '1' : '0'};\r\n        opacity: ${props => props.sorted ? 1 : 0};\r\n    }\r\n    &:hover .sort-icon {\r\n        color: ${props => props.sorted ? 'unset' : 'var(--bs-primary)'} ;\r\n        opacity: 0.75;\r\n        transition: opacity 0.2s;\r\n    }\r\n`\r\n\r\nfunction SortableTableTH<T = unknown>({\r\n                                          field,\r\n                                          sorted,\r\n                                          ascending,\r\n                                          className,\r\n                                          onClick\r\n                                      }: SortableTableTHProps<T>) {\r\n    if (!field.sortable) {\r\n        return (<DataTableTH field={field} className={className}/>)\r\n    }\r\n\r\n    const {className: _thClassName, ...thProps} = field.thProps ?? {};\r\n    const thClassName = classNames(\r\n        className,\r\n        _thClassName,\r\n        {[`text-${field.align}`]: !!field.align}\r\n    );\r\n\r\n    const clickHandler = () => {\r\n        onClick({field: field.field, ascending: !sorted ? true : !ascending});\r\n    }\r\n\r\n    const iconClassName = {\r\n        'bi-arrow-down': ascending,\r\n        'bi-arrow-up': !ascending,\r\n    }\r\n\r\n    return (\r\n        <th {...thProps} className={classNames(\"sortable\", thClassName)} scope=\"col\" onClick={clickHandler}>\r\n            <FieldTitle sorted={sorted} align={field.align}>\r\n                <div className=\"field-title\">{field.title}</div>\r\n                <div className={classNames('me-1 sort-icon', iconClassName)}/>\r\n            </FieldTitle>\r\n        </th>\r\n    )\r\n}\r\n\r\nSortableTableTH.displayName = 'SortableTableTH';\r\nexport default SortableTableTH;\r\n","import React from \"react\";\r\nimport SortableTableTH from \"./SortableTableTH\";\r\nimport classNames from \"classnames\";\r\nimport type {SortableTableHeadProps} from \"./types\";\r\n\r\n\r\nfunction SortableTableHead<T = unknown>({\r\n                                                           currentSort,\r\n                                                           fields,\r\n                                                           onChangeSort,\r\n                                                       }: SortableTableHeadProps<T>) {\r\n    const {field, ascending} = currentSort;\r\n    return (\r\n        <thead>\r\n        <tr>\r\n            {fields.map((tableField, index) => (\r\n                <SortableTableTH<T> key={index} field={tableField}\r\n                                 sorted={field === tableField.field} ascending={ascending}\r\n                                 className={classNames(\r\n                                typeof tableField.className === 'function'\r\n                                    ? {[`text-${tableField.align}`]: !!tableField.align}\r\n                                    : tableField.className\r\n                            )} onClick={onChangeSort}/>\r\n            ))}\r\n        </tr>\r\n        </thead>\r\n    )\r\n}\r\n\r\nSortableTableHead.displayName = 'SortableTableHead';\r\nexport default SortableTableHead;\r\n","import React from 'react';\r\nimport classNames from \"classnames\";\r\nimport SortableTableHead from \"./SortableTableHead\";\r\nimport DataTableTBody from \"./DataTableTBody\";\r\nimport type {SortableTableProps} from \"./types\";\r\nimport Table from \"./Table\";\r\n\r\n\r\nfunction SortableTable<T = unknown>({\r\n                                        fields,\r\n                                        data,\r\n                                        currentSort,\r\n                                        onChangeSort,\r\n                                        keyField,\r\n                                        size = '',\r\n                                        sticky,\r\n                                        rowClassName,\r\n                                        renderRow,\r\n                                        onSelectRow,\r\n                                        selected = '',\r\n                                        className = '',\r\n                                        tfoot,\r\n                                        children,\r\n                                        ...rest\r\n                                    }: SortableTableProps<T>) {\r\n    const tableClassName = classNames('table', className, {\r\n        [`table-${size}`]: !!size,\r\n    })\r\n\r\n    return (\r\n        <Table className={tableClassName} sticky={sticky} {...rest}>\r\n            <SortableTableHead currentSort={currentSort} fields={fields} onChangeSort={onChangeSort}/>\r\n            {!!data.length && (\r\n                <DataTableTBody fields={fields} data={data} keyField={keyField} rowClassName={rowClassName}\r\n                                renderRow={renderRow}\r\n                                onSelectRow={onSelectRow} selected={selected}/>\r\n            )}\r\n            {children}\r\n            {tfoot}\r\n        </Table>\r\n    )\r\n}\r\n\r\nSortableTable.displayName = 'SortableTable';\r\nexport default SortableTable;\r\n","import React, {ChangeEvent, useId} from 'react';\r\nimport classNames from \"classnames\";\r\nimport type {RowsPerPageProps} from \"./types\";\r\n\r\nexport const defaultRowsPerPageValues: number[] = [10, 25, 50, 100, 250, 500, 1000];\r\n\r\n\r\nfunction RowsPerPage({\r\n                         value,\r\n                         pageValues = defaultRowsPerPageValues,\r\n                         size,\r\n                         label,\r\n                         className,\r\n                         onChange,\r\n                         ...rest\r\n                     }: RowsPerPageProps) {\r\n    const id = useId();\r\n    const changeHandler = (ev: ChangeEvent<HTMLSelectElement>) => onChange(Number(ev.target.value));\r\n    const selectClassName = className ?? classNames('form-select', {[`form-select-${size}`]: !!size});\r\n    const inputGroupClassName = classNames('input-group', {\r\n        [`input-group-${size}`]: !!size,\r\n    })\r\n\r\n    return (\r\n        <div className={inputGroupClassName} key={value}>\r\n            <label className=\"input-group-text\" htmlFor={id}>{label ?? 'Rows'}</label>\r\n            <select className={selectClassName} id={id}\r\n                    value={value} onChange={changeHandler} {...rest}>\r\n                {pageValues.map(value => (\r\n                    <option key={value} value={value}>{value}</option>\r\n                ))}\r\n            </select>\r\n        </div>\r\n    )\r\n}\r\n\r\nRowsPerPage.displayName = 'RowsPerPage';\r\nexport default RowsPerPage;\r\n","import React from 'react';\r\nimport RowsPerPage from \"./RowsPerPage\";\r\nimport classNames from \"classnames\";\r\nimport type {TablePaginationProps} from \"./types\";\r\n\r\nfunction TablePagination({\r\n                             page,\r\n                             rowsPerPage,\r\n                             onChangePage,\r\n                             count,\r\n                             size,\r\n                             showFirst,\r\n                             showLast,\r\n                             className,\r\n                             rowsPerPageProps,\r\n                             ...rest\r\n                         }: TablePaginationProps) {\r\n\r\n    const first = count === 0 ? 0 : (page * rowsPerPage) + 1;\r\n    const last = Math.min(page * rowsPerPage + rowsPerPage, count);\r\n    const lastPage = rowsPerPage === 0 ? 0 : Math.floor((count - 1) / rowsPerPage);\r\n\r\n    const buttonClassName = classNames(\"btn btn-link\", {[`btn-${size}`]: !!size});\r\n\r\n    return (\r\n        <div className={classNames(\"row g-3 justify-content-end\", className)} {...rest}>\r\n            {!!rowsPerPageProps && (\r\n                <div className=\"col-auto\">\r\n                    <RowsPerPage {...rowsPerPageProps} value={rowsPerPage} size={size}/>\r\n                </div>\r\n            )}\r\n            <div className=\"col-auto\">\r\n                <div className=\"row g-3 flex-nowrap align-items-baseline\">\r\n                    <div className=\"col-auto\">\r\n                        {first}-{last} of {count}\r\n                    </div>\r\n                    {showFirst && (\r\n                        <div className=\"col-auto\">\r\n                            <button className={buttonClassName} disabled={page === 0}\r\n                                    onClick={() => onChangePage(0)} aria-label=\"First page\">\r\n                                <span className=\"bi-chevron-bar-left\" aria-hidden=\"true\"/>\r\n                            </button>\r\n                        </div>\r\n                    )}\r\n                    <div className=\"col-auto\">\r\n                        <button className={buttonClassName} disabled={page === 0}\r\n                                onClick={() => onChangePage(page - 1)} aria-label=\"Previous page\">\r\n                            <span className=\"bi-chevron-left\" aria-hidden=\"true\"/>\r\n                        </button>\r\n                    </div>\r\n                    <div className=\"col-auto\">\r\n                        <button className={buttonClassName} disabled={page >= lastPage}\r\n                                onClick={() => onChangePage(page + 1)} aria-label=\"Next page\">\r\n                            <span className=\"bi-chevron-right\" aria-hidden=\"true\"/>\r\n                        </button>\r\n                    </div>\r\n                    {showLast && (\r\n                        <div className=\"col-auto\">\r\n                            <button className={buttonClassName} disabled={page >= lastPage}\r\n                                    onClick={() => onChangePage(lastPage)} aria-label=\"Last page\">\r\n                                <span className=\"bi-chevron-bar-right\" aria-hidden=\"true\"/>\r\n                            </button>\r\n                        </div>\r\n                    )}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n\r\nTablePagination.displayname = 'TablePagination';\r\nexport default TablePagination\r\n"],"names":["DataTableTH","field","className","children","rest","thClassName","classNames","jsx","DataTableHead","fields","index","DataTableCell","row","as","cellClassName","React","DataTableRow","rowClassName","selected","trRef","onClick","clickHandler","ev","_className","DataTableTBody","data","keyField","renderRow","onSelectRow","jsxs","keyValue","isSelected","StyledTable","styled","props","Table","sticky","responsive","ref","DataTable","size","tfoot","tableHeadProps","tableClassName","flexJustifyContent","align","FieldTitle","SortableTableTH","sorted","ascending","_thClassName","thProps","iconClassName","SortableTableHead","currentSort","onChangeSort","tableField","SortableTable","defaultRowsPerPageValues","RowsPerPage","value","pageValues","label","onChange","id","useId","changeHandler","selectClassName","inputGroupClassName","TablePagination","page","rowsPerPage","onChangePage","count","showFirst","showLast","rowsPerPageProps","first","last","lastPage","buttonClassName"],"mappings":"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"}

package/dist/index.es.js

@@ -0,0 +1,388 @@
+import { jsx as e, jsxs as N } from "react/jsx-runtime";
+import u from "classnames";
+import $, { useId as j } from "react";
+import k from "@emotion/styled";
+function T({
+  field: a,
+  className: n,
+  children: t,
+  ...l
+}) {
+  const s = u({ [`text-${a.align}`]: !!a.align }, n);
+  return /* @__PURE__ */ e("th", { className: s, scope: "col", ...l, children: t ?? a.title });
+}
+T.displayName = "DataTableTH";
+function x({ fields: a, ...n }) {
+  return /* @__PURE__ */ e("thead", { ...n, children: /* @__PURE__ */ e("tr", { children: a.map((t, l) => /* @__PURE__ */ e(
+    T,
+    {
+      ...t.thProps,
+      field: t,
+      className: u(
+        typeof t.className == "function" ? { [`text-${t.align}`]: !!t.align } : t.className
+      )
+    },
+    t.id ?? l
+  )) }) });
+}
+x.displayName = "DataTableHead";
+function _({ field: a, row: n, className: t, as: l, ...s }) {
+  const c = u(
+    { [`text-${a.align}`]: !!a.align },
+    t,
+    typeof a.className == "function" ? a.className(n) : a.className
+  );
+  return $.createElement(
+    l ?? a.as ?? "td",
+    {
+      className: c,
+      scope: (l ?? a.as) === "th" ? "row" : void 0,
+      colSpan: a.colSpan,
+      ...a.cellProps,
+      ...s
+    },
+    n[a.field] === void 0 && !a.render ? null : typeof a.render == "function" ? a.render(n) : n[a.field]
+  );
+}
+function C({
+  className: a,
+  rowClassName: n,
+  selected: t,
+  fields: l,
+  row: s,
+  trRef: c,
+  onClick: r,
+  ...i
+}) {
+  const m = (b) => {
+    r?.(s, b);
+  }, o = typeof n == "function" ? n(s) : n;
+  return s ? /* @__PURE__ */ e(
+    "tr",
+    {
+      ref: c,
+      className: u({ "table-active": t }, a, o),
+      onClick: m,
+      ...i,
+      children: l.map((b, d) => /* @__PURE__ */ e(_, { field: b, row: s }, d))
+    }
+  ) : null;
+}
+C.displayName = "DataTableRow";
+function v({
+  fields: a,
+  data: n,
+  keyField: t,
+  rowClassName: l,
+  renderRow: s,
+  onSelectRow: c,
+  selected: r = "",
+  children: i,
+  ...m
+}) {
+  return /* @__PURE__ */ N("tbody", { ...m, children: [
+    n.map((o) => {
+      const b = String(typeof t == "function" ? t(o) : o[t]), d = typeof r == "function" ? r(o) : b === r;
+      return s ? s(o) : /* @__PURE__ */ e(
+        C,
+        {
+          onClick: c,
+          rowClassName: l,
+          fields: a,
+          row: o,
+          selected: d
+        },
+        b
+      );
+    }),
+    i
+  ] });
+}
+v.displayName = "DataTableTBody";
+const g = k.table`
+    --table-sticky-top: ${(a) => a.sticky ? "0" : void 0};
+
+    thead {
+        tr:nth-of-type(1) td,
+        tr:nth-of-type(1) th {
+            top: var(--table-sticky-top, unset);
+            position: ${(a) => a.sticky ? "sticky" : "unset"};
+            z-index: ${(a) => a.sticky ? 10 : "unset"};
+            background: ${(a) => a.sticky ? "linear-gradient(var(--bs-table-bg) 75%, rgba(var(--bs-secondary-bg-rgb), 0.9))" : "unset"};
+        }
+    }
+`, D = $.forwardRef(
+  function({
+    sticky: n,
+    responsive: t,
+    children: l,
+    className: s,
+    ...c
+  }, r) {
+    if (t) {
+      const i = u(s, {
+        "table-responsive": t === !0,
+        [`table-responsive-${t}`]: t !== !0
+      });
+      return /* @__PURE__ */ e("div", { className: i, children: /* @__PURE__ */ e(g, { ref: r, ...c, children: l }) });
+    }
+    return /* @__PURE__ */ e(g, { className: s, sticky: n, ref: r, ...c, children: l });
+  }
+);
+function B({
+  fields: a,
+  data: n,
+  keyField: t,
+  size: l = "",
+  sticky: s,
+  responsive: c,
+  rowClassName: r,
+  renderRow: i,
+  onSelectRow: m,
+  selected: o = "",
+  className: b = "",
+  tfoot: d,
+  children: p,
+  tableHeadProps: h,
+  ...y
+}) {
+  const f = u("table", b, {
+    [`table-${l}`]: !!l
+  });
+  return /* @__PURE__ */ N(D, { sticky: s, responsive: c, className: f, ...y, children: [
+    /* @__PURE__ */ e(x, { ...h, fields: a }),
+    !!n.length && /* @__PURE__ */ e(
+      v,
+      {
+        fields: a,
+        data: n,
+        keyField: t,
+        rowClassName: r,
+        renderRow: i,
+        onSelectRow: m,
+        selected: o
+      }
+    ),
+    p,
+    d
+  ] });
+}
+B.displayName = "DataTable";
+const M = (a) => {
+  if (!a)
+    return "flex-start";
+  switch (a) {
+    case "end":
+      return "flex-end";
+    default:
+      return "center";
+  }
+}, V = k.div`
+    display: flex;
+    width: 100%;
+    flex-direction: ${(a) => a.align === "end" ? "row-reverse" : "row"};
+    justify-content: ${(a) => M(a.align)};
+    .sort-icon {
+        flex-grow: ${(a) => a.align === "end" ? "1" : "0"};
+        opacity: ${(a) => a.sorted ? 1 : 0};
+    }
+    &:hover .sort-icon {
+        color: ${(a) => a.sorted ? "unset" : "var(--bs-primary)"} ;
+        opacity: 0.75;
+        transition: opacity 0.2s;
+    }
+`;
+function H({
+  field: a,
+  sorted: n,
+  ascending: t,
+  className: l,
+  onClick: s
+}) {
+  if (!a.sortable)
+    return /* @__PURE__ */ e(T, { field: a, className: l });
+  const { className: c, ...r } = a.thProps ?? {}, i = u(
+    l,
+    c,
+    { [`text-${a.align}`]: !!a.align }
+  ), m = () => {
+    s({ field: a.field, ascending: n ? !t : !0 });
+  }, o = {
+    "bi-arrow-down": t,
+    "bi-arrow-up": !t
+  };
+  return /* @__PURE__ */ e("th", { ...r, className: u("sortable", i), scope: "col", onClick: m, children: /* @__PURE__ */ N(V, { sorted: n, align: a.align, children: [
+    /* @__PURE__ */ e("div", { className: "field-title", children: a.title }),
+    /* @__PURE__ */ e("div", { className: u("me-1 sort-icon", o) })
+  ] }) });
+}
+H.displayName = "SortableTableTH";
+function S({
+  currentSort: a,
+  fields: n,
+  onChangeSort: t
+}) {
+  const { field: l, ascending: s } = a;
+  return /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { children: n.map((c, r) => /* @__PURE__ */ e(
+    H,
+    {
+      field: c,
+      sorted: l === c.field,
+      ascending: s,
+      className: u(
+        typeof c.className == "function" ? { [`text-${c.align}`]: !!c.align } : c.className
+      ),
+      onClick: t
+    },
+    r
+  )) }) });
+}
+S.displayName = "SortableTableHead";
+function E({
+  fields: a,
+  data: n,
+  currentSort: t,
+  onChangeSort: l,
+  keyField: s,
+  size: c = "",
+  sticky: r,
+  rowClassName: i,
+  renderRow: m,
+  onSelectRow: o,
+  selected: b = "",
+  className: d = "",
+  tfoot: p,
+  children: h,
+  ...y
+}) {
+  const f = u("table", d, {
+    [`table-${c}`]: !!c
+  });
+  return /* @__PURE__ */ N(D, { className: f, sticky: r, ...y, children: [
+    /* @__PURE__ */ e(S, { currentSort: t, fields: a, onChangeSort: l }),
+    !!n.length && /* @__PURE__ */ e(
+      v,
+      {
+        fields: a,
+        data: n,
+        keyField: s,
+        rowClassName: i,
+        renderRow: m,
+        onSelectRow: o,
+        selected: b
+      }
+    ),
+    h,
+    p
+  ] });
+}
+E.displayName = "SortableTable";
+const G = [10, 25, 50, 100, 250, 500, 1e3];
+function R({
+  value: a,
+  pageValues: n = G,
+  size: t,
+  label: l,
+  className: s,
+  onChange: c,
+  ...r
+}) {
+  const i = j(), m = (d) => c(Number(d.target.value)), o = s ?? u("form-select", { [`form-select-${t}`]: !!t }), b = u("input-group", {
+    [`input-group-${t}`]: !!t
+  });
+  return /* @__PURE__ */ N("div", { className: b, children: [
+    /* @__PURE__ */ e("label", { className: "input-group-text", htmlFor: i, children: l ?? "Rows" }),
+    /* @__PURE__ */ e(
+      "select",
+      {
+        className: o,
+        id: i,
+        value: a,
+        onChange: m,
+        ...r,
+        children: n.map((d) => /* @__PURE__ */ e("option", { value: d, children: d }, d))
+      }
+    )
+  ] }, a);
+}
+R.displayName = "RowsPerPage";
+function I({
+  page: a,
+  rowsPerPage: n,
+  onChangePage: t,
+  count: l,
+  size: s,
+  showFirst: c,
+  showLast: r,
+  className: i,
+  rowsPerPageProps: m,
+  ...o
+}) {
+  const b = l === 0 ? 0 : a * n + 1, d = Math.min(a * n + n, l), p = n === 0 ? 0 : Math.floor((l - 1) / n), h = u("btn btn-link", { [`btn-${s}`]: !!s });
+  return /* @__PURE__ */ N("div", { className: u("row g-3 justify-content-end", i), ...o, children: [
+    !!m && /* @__PURE__ */ e("div", { className: "col-auto", children: /* @__PURE__ */ e(R, { ...m, value: n, size: s }) }),
+    /* @__PURE__ */ e("div", { className: "col-auto", children: /* @__PURE__ */ N("div", { className: "row g-3 flex-nowrap align-items-baseline", children: [
+      /* @__PURE__ */ N("div", { className: "col-auto", children: [
+        b,
+        "-",
+        d,
+        " of ",
+        l
+      ] }),
+      c && /* @__PURE__ */ e("div", { className: "col-auto", children: /* @__PURE__ */ e(
+        "button",
+        {
+          className: h,
+          disabled: a === 0,
+          onClick: () => t(0),
+          "aria-label": "First page",
+          children: /* @__PURE__ */ e("span", { className: "bi-chevron-bar-left", "aria-hidden": "true" })
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "col-auto", children: /* @__PURE__ */ e(
+        "button",
+        {
+          className: h,
+          disabled: a === 0,
+          onClick: () => t(a - 1),
+          "aria-label": "Previous page",
+          children: /* @__PURE__ */ e("span", { className: "bi-chevron-left", "aria-hidden": "true" })
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "col-auto", children: /* @__PURE__ */ e(
+        "button",
+        {
+          className: h,
+          disabled: a >= p,
+          onClick: () => t(a + 1),
+          "aria-label": "Next page",
+          children: /* @__PURE__ */ e("span", { className: "bi-chevron-right", "aria-hidden": "true" })
+        }
+      ) }),
+      r && /* @__PURE__ */ e("div", { className: "col-auto", children: /* @__PURE__ */ e(
+        "button",
+        {
+          className: h,
+          disabled: a >= p,
+          onClick: () => t(p),
+          "aria-label": "Last page",
+          children: /* @__PURE__ */ e("span", { className: "bi-chevron-bar-right", "aria-hidden": "true" })
+        }
+      ) })
+    ] }) })
+  ] });
+}
+I.displayname = "TablePagination";
+export {
+  B as DataTable,
+  C as DataTableRow,
+  v as DataTableTBody,
+  T as DataTableTH,
+  R as RowsPerPage,
+  E as SortableTable,
+  S as SortableTableHead,
+  H as SortableTableTH,
+  I as TablePagination,
+  G as defaultRowsPerPageValues
+};
+//# sourceMappingURL=index.es.js.map