@chumsinc/sortable-tables 2.0.6

package/src/DataTable.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import classNames from "classnames";
+import DataTableHead from "./DataTableHead";
+import DataTableTBody from "./DataTableTBody";
+import {DataTableProps} from "./types";
+import {noop} from "./utils";
+import Table from "./Table";
+
+
+function DataTable<T = unknown>({
+                                    fields,
+                                    data,
+                                    keyField,
+                                    size = '',
+                                    sticky,
+                                    responsive,
+                                    rowClassName,
+                                    renderRow,
+                                    onSelectRow = noop,
+                                    selected = '',
+                                    className = '',
+                                    tfoot,
+                                    children,
+                                    tableHeadProps,
+                                    ...rest
+                                }: DataTableProps<T>) {
+
+    const tableClassName = classNames('table', className, {
+        [`table-${size}`]: !!size,
+    })
+
+    return (
+        <Table sticky={sticky} responsive={responsive} className={tableClassName} {...rest}>
+            <DataTableHead {...tableHeadProps} fields={fields}/>
+            {!!data.length && (
+                <DataTableTBody fields={fields} data={data} keyField={keyField} rowClassName={rowClassName}
+                                renderRow={renderRow}
+                                onSelectRow={onSelectRow} selected={selected}/>
+            )}
+            {children}
+            {tfoot}
+        </Table>
+    )
+}
+
+DataTable.displayName = 'DataTable';
+export default DataTable;

package/src/DataTableCell.tsx

@@ -0,0 +1,28 @@
+import React, {ReactNode} from 'react';
+import {DataTableCellProps} from "./types";
+import classNames from "classnames";
+
+export default function DataTableCell<T = unknown>({field, row, className, as, ...rest}:DataTableCellProps<T>) {
+    const cellClassName = classNames(
+        {[`text-${field.align}`]: !!field.align},
+        className,
+        typeof field.className === 'function' ? field.className(row) : field.className
+    );
+    return React.createElement(
+        (as ?? field.as) ?? 'td',
+        {
+            className: cellClassName,
+            scope: (as ?? field.as) === 'th' ? 'row' : undefined,
+            colSpan: field.colSpan,
+            ...field.cellProps,
+            ...rest
+        },
+        row[field.field] === undefined
+            ? null
+            : (
+                typeof field.render === 'function'
+                    ? field.render(row)
+                    : row[field.field] as ReactNode
+            )
+    )
+}

package/src/DataTableHead.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import DataTableTH from "./DataTableTH";
+import classNames from "classnames";
+import {DataTableHeadProps} from "./types";
+
+
+function DataTableHead<T = unknown>({fields, ...rest}: DataTableHeadProps<T>) {
+    return (
+        <thead {...rest}>
+        <tr>
+            {fields.map((field, index) => (
+                <DataTableTH key={field.id ?? index}
+                             {...field.thProps}
+                             field={field}
+                             className={classNames(
+                                 typeof field.className === 'function'
+                                     ? {[`text-${field.align}`]: !!field.align}
+                                     : field.className
+                             )}/>
+            ))}
+        </tr>
+        </thead>
+    )
+}
+
+DataTableHead.displayName = 'DataTableHead';
+export default DataTableHead;

package/src/DataTableRow.tsx

@@ -0,0 +1,38 @@
+import React, {ReactNode} from 'react';
+import classNames from "classnames";
+import {noop} from "./utils";
+import {DataTableRowProps} from "./types";
+import DataTableCell from "./DataTableCell";
+
+
+function DataTableRow<T = unknown>({
+                                                      className,
+                                                      rowClassName,
+                                                      selected,
+                                                      fields,
+                                                      row,
+                                                      trRef,
+                                                      onClick = noop,
+                                                      ...rest
+                                                  }: DataTableRowProps<T>) {
+    const clickHandler = () => {
+        return onClick ? onClick() : noop();
+    }
+
+    const _className = typeof rowClassName === 'function' ? rowClassName(row) : rowClassName;
+    if (!row) {
+        return null;
+    }
+
+    return (
+        <tr ref={trRef}
+            className={classNames({'table-active': selected}, className, _className)}
+            onClick={clickHandler}
+            {...rest}>
+            {fields.map((field, index) => (<DataTableCell key={index} field={field} row={row} />))}
+        </tr>
+    )
+}
+
+DataTableRow.displayName = 'DataTableRow';
+export default DataTableRow;

package/src/DataTableTBody.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import DataTableRow from "./DataTableRow";
+import {noop} from "./utils";
+import {DataTableTBodyProps} from "./types";
+
+
+
+function DataTableTBody<T = unknown>({
+                            fields,
+                            data,
+                            keyField,
+                            rowClassName,
+                            renderRow,
+                            onSelectRow = noop,
+                            selected = '',
+                            children,
+                            ...rest
+                        }: DataTableTBodyProps<T>) {
+
+    return (
+        <tbody {...rest}>
+        {data.map(row => {
+            const keyValue = String(typeof keyField === "function" ? keyField(row) : row[keyField]);
+            const isSelected = typeof selected === 'function' ? selected(row) : keyValue === selected;
+            if (renderRow) {
+                return renderRow(row);
+            }
+            return (
+                <DataTableRow key={keyValue} onClick={() => onSelectRow(row)}
+                              rowClassName={rowClassName}
+                              fields={fields}
+                              row={row} selected={isSelected}/>
+            )
+        })}
+        {children}
+        </tbody>
+    )
+}
+DataTableTBody.displayName = 'DataTableTBody';
+export default DataTableTBody

package/src/DataTableTH.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import classNames from "classnames";
+import {DataTableTHProps} from "./types";
+
+
+function DataTableTH<T = unknown>({
+                                                     field,
+                                                     className,
+                                                     children,
+                                                     ...rest
+                                                 }: DataTableTHProps<T>) {
+    const thClassName = classNames({[`text-${field.align}`]: !!field.align}, className);
+    return (
+        <th className={thClassName} scope="col" {...rest}>
+            {children ?? field.title}
+        </th>
+    )
+}
+DataTableTH.displayName = 'DataTableTH';
+export default DataTableTH;

package/src/RowsPerPage.tsx

@@ -0,0 +1,38 @@
+import React, {ChangeEvent, useId} from 'react';
+import classNames from "classnames";
+import {RowsPerPageProps} from "./types";
+
+export const defaultRowsPerPageValues: number[] = [10, 25, 50, 100, 250, 500, 1000];
+
+
+function RowsPerPage({
+                         value,
+                         pageValues = defaultRowsPerPageValues,
+                         size,
+                         label,
+                         className,
+                         onChange,
+                         ...rest
+                     }: RowsPerPageProps) {
+    const id = useId();
+    const changeHandler = (ev: ChangeEvent<HTMLSelectElement>) => onChange(Number(ev.target.value));
+    const selectClassName = className ?? classNames('form-select', {[`form-select-${size}`]: !!size});
+    const inputGroupClassName = classNames('input-group', {
+        [`input-group-${size}`]: !!size,
+    })
+
+    return (
+        <div className={inputGroupClassName} key={value}>
+            <label className="input-group-text" htmlFor={id}>{label ?? 'Rows'}</label>
+            <select className={selectClassName} id={id}
+                    value={value} onChange={changeHandler} {...rest}>
+                {pageValues.map(value => (
+                    <option key={value} value={value}>{value}</option>
+                ))}
+            </select>
+        </div>
+    )
+}
+
+RowsPerPage.displayName = 'RowsPerPage';
+export default RowsPerPage;

package/src/SortableTable.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import classNames from "classnames";
+import SortableTableHead from "./SortableTableHead";
+import DataTableTBody from "./DataTableTBody";
+import {SortableTableProps} from "./types";
+import {noop} from "./utils";
+import Table from "./Table";
+
+
+function SortableTable<T = unknown>({
+                                        fields,
+                                        data,
+                                        currentSort,
+                                        onChangeSort,
+                                        keyField,
+                                        size = '',
+                                        sticky,
+                                        rowClassName,
+                                        renderRow,
+                                        onSelectRow = noop,
+                                        selected = '',
+                                        className = '',
+                                        tfoot,
+                                        children,
+                                        ...rest
+                                    }: SortableTableProps<T>) {
+    const tableClassName = classNames('table', className, {
+        [`table-${size}`]: !!size,
+    })
+
+    return (
+        <Table className={tableClassName} sticky={sticky} {...rest}>
+            <SortableTableHead currentSort={currentSort} fields={fields} onChangeSort={onChangeSort}/>
+            {!!data.length && (
+                <DataTableTBody fields={fields} data={data} keyField={keyField} rowClassName={rowClassName}
+                                renderRow={renderRow}
+                                onSelectRow={onSelectRow} selected={selected}/>
+            )}
+            {children}
+            {tfoot}
+        </Table>
+    )
+}
+
+SortableTable.displayName = 'SortableTable';
+export default SortableTable;

package/src/SortableTableHead.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import SortableTableTH from "./SortableTableTH";
+import classNames from "classnames";
+import {SortableTableHeadProps} from "./types";
+
+
+function SortableTableHead<T = unknown>({
+                                                           currentSort,
+                                                           fields,
+                                                           onChangeSort,
+                                                       }: SortableTableHeadProps<T>) {
+    const {field, ascending} = currentSort;
+    return (
+        <thead>
+        <tr>
+            {fields.map((tableField, index) => (
+                <SortableTableTH<T> key={index} field={tableField}
+                                 sorted={field === tableField.field} ascending={ascending}
+                                 className={classNames(
+                                typeof tableField.className === 'function'
+                                    ? {[`text-${tableField.align}`]: !!tableField.align}
+                                    : tableField.className
+                            )} onClick={onChangeSort}/>
+            ))}
+        </tr>
+        </thead>
+    )
+}
+
+SortableTableHead.displayName = 'SortableTableHead';
+export default SortableTableHead;

package/src/SortableTableTH.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import classNames from "classnames";
+import DataTableTH from "./DataTableTH";
+import {SortableTableTHProps, UIFlexAlign} from "./types";
+import styled from '@emotion/styled';
+
+const flexJustifyContent = (align?: UIFlexAlign) => {
+    if (!align) {
+        return 'flex-start';
+    }
+    switch (align) {
+        case 'end':
+            return 'flex-end';
+        default:
+            return 'center';
+    }
+}
+
+type FieldTitleProps = {
+    sorted?: boolean;
+    align?: UIFlexAlign;
+};
+const FieldTitle = styled.div<FieldTitleProps>`
+    display: flex;
+    width: 100%;
+    flex-direction: ${props => props.align === 'end' ? 'row-reverse' : 'row'};
+    justify-content: ${props => flexJustifyContent(props.align)};
+    .sort-icon {
+        flex-grow: ${props => props.align === 'end' ? '1' : '0'};
+        opacity: ${props => props.sorted ? 1 : 0};
+    }
+    &:hover .sort-icon {
+        color: ${props => props.sorted ? 'unset' : 'var(--bs-primary)'} ;
+        opacity: 0.75;
+        transition: opacity 0.2s;
+    }
+`
+
+function SortableTableTH<T = unknown>({
+                                          field,
+                                          sorted,
+                                          ascending,
+                                          className,
+                                          onClick
+                                      }: SortableTableTHProps<T>) {
+    if (!field.sortable) {
+        return (<DataTableTH field={field} className={className}/>)
+    }
+
+    const {className: _thClassName, ...thProps} = field.thProps ?? {};
+    const thClassName = classNames(
+        className,
+        _thClassName,
+        {[`text-${field.align}`]: !!field.align}
+    );
+
+    const clickHandler = () => {
+        onClick({field: field.field, ascending: !sorted ? true : !ascending});
+    }
+
+    const iconClassName = {
+        'bi-arrow-down': ascending,
+        'bi-arrow-up': !ascending,
+    }
+
+    return (
+        <th {...thProps} className={classNames("sortable", thClassName)} scope="col" onClick={clickHandler}>
+            <FieldTitle sorted={sorted} align={field.align}>
+                <div className="field-title">{field.title}</div>
+                <div className={classNames('me-1 sort-icon', iconClassName)}/>
+            </FieldTitle>
+        </th>
+    )
+}
+
+SortableTableTH.displayName = 'SortableTableTH';
+export default SortableTableTH;

package/src/Table.tsx

@@ -0,0 +1,43 @@
+import React, {TableHTMLAttributes} from 'react';
+import styled from "@emotion/styled";
+import {DataTableProps} from "./types";
+import classNames from "classnames";
+
+export type StyledTableProps = TableHTMLAttributes<HTMLTableElement> & Pick<DataTableProps, 'sticky'|'responsive'>
+
+const StyledTable = styled.table<StyledTableProps>`
+    --table-sticky-top: ${props => props.sticky ? '0' : undefined};
+
+    thead {
+        tr:nth-of-type(1) td,
+        tr:nth-of-type(1) th {
+            top: var(--table-sticky-top, unset);
+            position: ${props => props.sticky ? "sticky" : "unset"};
+            z-index: ${props => props.sticky ? 10 : "unset"};
+            background: ${props => props.sticky ? "linear-gradient(var(--bs-table-bg) 75%, rgba(var(--bs-secondary-bg-rgb), 0.9))" : "unset"};
+        }
+    }
+`
+
+export default React.forwardRef<HTMLTableElement, StyledTableProps>(
+    function Table({
+                       sticky,
+                       responsive,
+                       children,
+                       ...rest
+                   }, ref) {
+        if (responsive) {
+            const className = classNames({
+                'table-responsive': responsive === true,
+                [`table-responsive-${responsive}`]: responsive !== true,
+            })
+            return (
+                <div className={className}>
+                    <StyledTable ref={ref} {...rest}>{children}</StyledTable>
+                </div>
+            )
+        }
+        return (
+            <StyledTable sticky={sticky} ref={ref} {...rest}>{children}</StyledTable>
+        )
+    })

package/src/TablePagination.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import RowsPerPage from "./RowsPerPage";
+import classNames from "classnames";
+import {TablePaginationProps} from "./types";
+
+function TablePagination({
+                             page,
+                             rowsPerPage,
+                             onChangePage,
+                             count,
+                             size,
+                             showFirst,
+                             showLast,
+                             className,
+                             rowsPerPageProps,
+                             ...rest
+                         }: TablePaginationProps) {
+
+    const first = count === 0 ? 0 : (page * rowsPerPage) + 1;
+    const last = Math.min(page * rowsPerPage + rowsPerPage, count);
+    const lastPage = rowsPerPage === 0 ? 0 : Math.floor((count - 1) / rowsPerPage);
+
+    const buttonClassName = classNames("btn btn-link", {[`btn-${size}`]: !!size});
+
+    return (
+        <div className={classNames("row g-3 justify-content-end", className)} {...rest}>
+            {!!rowsPerPageProps && (
+                <div className="col-auto">
+                    <RowsPerPage {...rowsPerPageProps} value={rowsPerPage} size={size}/>
+                </div>
+            )}
+            <div className="col-auto">
+                <div className="row g-3 flex-nowrap align-items-baseline">
+                    <div className="col-auto">
+                        {first}-{last} of {count}
+                    </div>
+                    {showFirst && (
+                        <div className="col-auto">
+                            <button className={buttonClassName} disabled={page === 0}
+                                    onClick={() => onChangePage(0)} aria-label="First page">
+                                <span className="bi-chevron-bar-left" aria-hidden="true"/>
+                            </button>
+                        </div>
+                    )}
+                    <div className="col-auto">
+                        <button className={buttonClassName} disabled={page === 0}
+                                onClick={() => onChangePage(page - 1)} aria-label="Previous page">
+                            <span className="bi-chevron-left" aria-hidden="true"/>
+                        </button>
+                    </div>
+                    <div className="col-auto">
+                        <button className={buttonClassName} disabled={page >= lastPage}
+                                onClick={() => onChangePage(page + 1)} aria-label="Next page">
+                            <span className="bi-chevron-right" aria-hidden="true"/>
+                        </button>
+                    </div>
+                    {showLast && (
+                        <div className="col-auto">
+                            <button className={buttonClassName} disabled={page >= lastPage}
+                                    onClick={() => onChangePage(lastPage)} aria-label="Last page">
+                                <span className="bi-chevron-bar-right" aria-hidden="true"/>
+                            </button>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+TablePagination.displayname = 'TablePagination';
+export default TablePagination

package/src/index.tsx

@@ -0,0 +1,14 @@
+export {default as DataTable} from './DataTable';
+export {default as DataTableRow} from './DataTableRow';
+export {default as DataTableTBody} from './DataTableTBody';
+export {default as DataTableTH} from './DataTableTH';
+export {default as SortableTable} from './SortableTable';
+export {default as SortableTableHead} from './SortableTableHead';
+export {default as SortableTableTH} from './SortableTableTH';
+export {default as RowsPerPage, defaultRowsPerPageValues} from './RowsPerPage';
+export {default as TablePagination} from './TablePagination';
+export type {
+    DataTableHeadProps, DataTableField, DataTableTHProps, DataTableClassNames, DataTableProps,
+    SortableTableField, DataTableRowProps, DataTableTBodyProps, SortableTableTHProps, SortableTableHeadProps,
+    SortProps, SortableTableProps, UISize, UIFlexAlign, TablePaginationProps, RowsPerPageProps
+} from './types';

package/src/types.ts

@@ -0,0 +1,127 @@
+import React, {HTMLAttributes, ReactNode, TableHTMLAttributes} from 'react'
+import classNames from "classnames";
+
+
+export interface SortProps<T = unknown> {
+    field: keyof T;
+    ascending: boolean;
+}
+
+export type UISize = 'sm'|'lg'|'';
+export type UITableSize = UISize|'xs';
+
+export type DataTableClassNames<T = unknown> =
+    string
+    | classNames.Argument
+    | ((row: T) => (string | classNames.Argument));
+
+
+export type UIFlexAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+
+export interface DataTableField<T = unknown> {
+    id?: number | string;
+    field: keyof T;
+    title: ReactNode;
+    as?: 'td'|'th';
+    align?: 'start' | 'center' | 'end';
+    render?: (row: T) => ReactNode;
+    className?: DataTableClassNames<T>;
+    colSpan?: number;
+    thProps?: Omit<DataTableTHProps<T>, 'field'>;
+    cellProps?: TableHTMLAttributes<HTMLTableCellElement>
+}
+
+export interface SortableTableField<T = unknown> extends DataTableField<T> {
+    sortable?: boolean;
+}
+
+export interface DataTableProps<T = unknown> extends TableHTMLAttributes<HTMLTableElement> {
+    fields: DataTableField<T>[];
+    data: T[];
+    keyField: keyof T | ((row: T) => string|number);
+    size?: UITableSize;
+    sticky?: boolean;
+    responsive?: boolean|"sm" | "md" | "lg" | "xl" | 'xxl';
+    rowClassName?: DataTableClassNames<T>;
+    renderRow?: (row: T) => React.ReactNode;
+    onSelectRow?: (row: T) => T | void;
+    selected?: string | number | ((row: T) => boolean);
+    tfoot?: React.ReactElement<HTMLTableSectionElement>;
+    tableHeadProps?: DataTableHeadProps<T>;
+    children?: ReactNode;
+}
+
+export interface DataTableCellProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableCellElement>, 'className'> {
+    field: DataTableField<T>;
+    row: T;
+    as?: 'td'|'th',
+    className?: string | classNames.Argument;
+    children?: React.ReactNode;
+}
+
+export interface DataTableTHProps<T = unknown> extends Omit<DataTableCellProps<T>, 'row'> {
+    as?: 'th',
+}
+
+export interface DataTableHeadProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
+    fields: DataTableField<T>[];
+}
+
+export interface DataTableTBodyProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
+    fields: DataTableField<T>[];
+    data: T[];
+    keyField: keyof T | ((row: T) => string|number);
+    rowClassName?: DataTableClassNames<T>;
+    renderRow?: (row: T) => React.ReactNode;
+    onSelectRow?: (row: T) => T | void;
+    selected?: string | number | ((row: T) => boolean);
+    children?: ReactNode;
+}
+
+export interface DataTableRowProps<T = unknown> extends Omit <TableHTMLAttributes<HTMLTableRowElement>, 'onClick'> {
+    rowClassName?: string | classNames.Argument | ((row: T) => string | classNames.Argument);
+    selected?: boolean;
+    fields: DataTableField<T>[];
+    row: T;
+    trRef?: React.Ref<HTMLTableRowElement>;
+    onClick?: (row?: T) => T | void;
+}
+
+export interface SortableTableProps<T = unknown> extends DataTableProps<T> {
+    currentSort: SortProps<T>;
+    onChangeSort: (sort: SortProps<T>) => void;
+}
+
+export interface SortableTableHeadProps<T = unknown> extends DataTableHeadProps<T> {
+    currentSort: SortProps<T>;
+    fields: SortableTableField<T>[];
+    onChangeSort: (sort: SortProps<T>) => void;
+}
+
+export interface SortableTableTHProps<T = unknown> extends Omit<DataTableTHProps<T>, 'onClick'> {
+    field: SortableTableField<T>;
+    sorted?: boolean;
+    ascending?: boolean;
+    onClick: (sort: SortProps<T>) => void;
+}
+
+export interface RowsPerPageProps extends Omit<HTMLAttributes<HTMLSelectElement>, 'onChange'> {
+    value: number;
+    pageValues?: number[];
+    label?: string;
+    size?: UISize;
+    className?: string;
+    onChange: (value: number) => void;
+}
+
+export interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {
+    page: number;
+    rowsPerPage: number;
+    onChangePage: (page: number) => void;
+    count: number;
+    size?: UISize;
+    showFirst?: boolean;
+    showLast?: boolean;
+    rowsPerPageProps?: Omit<RowsPerPageProps, 'value'>;
+}
+

package/src/utils.ts

@@ -0,0 +1 @@
+export function noop(){}