jattac.libs.web.responsive-table 0.8.0 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,41 @@
1
+ import React, { ReactNode } from 'react';
2
+ import { IResponsiveTableColumnDefinition } from '../Data/IResponsiveTableColumnDefinition';
3
+ import { IResponsiveTablePlugin } from '../Plugins/IResponsiveTablePlugin';
4
+ export type ColumnDefinition<TData> = IResponsiveTableColumnDefinition<TData> | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
5
+ interface TableContextValue<TData> {
6
+ data: TData[];
7
+ processedData: TData[];
8
+ currentData: TData[];
9
+ visibleColumns: ColumnDefinition<TData>[];
10
+ originalColumnDefinitions: ColumnDefinition<TData>[];
11
+ activePlugins: IResponsiveTablePlugin<TData>[];
12
+ onRowClick?: (item: TData) => void;
13
+ selectionProps?: {
14
+ onSelectionChange: (selectedItems: TData[]) => void;
15
+ rowIdKey: keyof TData;
16
+ mode?: 'single' | 'multiple';
17
+ selectedItems?: TData[];
18
+ selectedRowClassName?: string;
19
+ };
20
+ animationProps?: {
21
+ isLoading?: boolean;
22
+ animateOnLoad?: boolean;
23
+ };
24
+ getRawColumnDefinition: (colDef: ColumnDefinition<TData>) => IResponsiveTableColumnDefinition<TData>;
25
+ getColumnDefinition: (colDef: ColumnDefinition<TData>, rowIndex: number) => IResponsiveTableColumnDefinition<TData>;
26
+ onHeaderClickCallback: (colDef: ColumnDefinition<TData>) => ((id: string) => void) | undefined;
27
+ getClickableHeaderClassName: (onHeaderClick: ((id: string) => void) | undefined, colDef: ColumnDefinition<TData>) => string;
28
+ getHeaderProps: (colDef: ColumnDefinition<TData>) => React.HTMLAttributes<HTMLElement> & {
29
+ className?: string;
30
+ };
31
+ getRowProps: (row: TData) => React.HTMLAttributes<HTMLElement>;
32
+ getRowId: (row: TData, index: number) => string | number;
33
+ renderCell: (content: React.ReactNode, row: TData, colDef: IResponsiveTableColumnDefinition<TData>) => React.ReactNode;
34
+ }
35
+ export declare const useTableContext: <TData>() => TableContextValue<TData>;
36
+ interface TableProviderProps<TData> {
37
+ children: ReactNode;
38
+ value: Omit<TableContextValue<TData>, 'currentData' | 'getRawColumnDefinition' | 'getColumnDefinition' | 'onHeaderClickCallback' | 'getClickableHeaderClassName' | 'getHeaderProps' | 'getRowProps' | 'getRowId' | 'renderCell'>;
39
+ }
40
+ export declare function TableProvider<TData>({ children, value }: TableProviderProps<TData>): React.JSX.Element;
41
+ export {};
@@ -1,42 +1,15 @@
1
1
  import React from 'react';
2
- import { IResponsiveTableColumnDefinition } from '../Data/IResponsiveTableColumnDefinition';
3
2
  import IFooterColumnDefinition from '../Data/IFooterColumnDefinition';
4
- import { ColumnDefinition } from './ResponsiveTable';
5
- interface DesktopViewProps<TData> {
6
- columnDefinitions: ColumnDefinition<TData>[];
7
- originalColumnDefinitions: ColumnDefinition<TData>[];
8
- currentData: TData[];
3
+ interface DesktopViewProps {
9
4
  maxHeight?: string;
10
5
  isHeaderSticky: boolean;
11
6
  tableContainerRef: React.RefObject<HTMLDivElement>;
12
7
  headerRef: React.RefObject<HTMLTableSectionElement>;
13
- getRowProps: (row: TData) => React.HTMLAttributes<HTMLElement>;
14
- getHeaderProps: (colDef: ColumnDefinition<TData>) => React.HTMLAttributes<HTMLElement> & {
15
- className?: string;
16
- };
17
- onHeaderClickCallback: (colDef: ColumnDefinition<TData>) => ((id: string) => void) | undefined;
18
- getClickableHeaderClassName: (onHeaderClick: ((id: string) => void) | undefined, colDef: ColumnDefinition<TData>) => string;
19
- getRawColumnDefinition: (colDef: ColumnDefinition<TData>) => IResponsiveTableColumnDefinition<TData>;
20
- getColumnDefinition: (colDef: ColumnDefinition<TData>, rowIndex: number) => IResponsiveTableColumnDefinition<TData>;
21
- renderCell: (content: React.ReactNode, row: TData, colDef: IResponsiveTableColumnDefinition<TData>) => React.ReactNode;
22
- rowClickFunction: (item: TData) => void;
23
8
  footerRows?: {
24
9
  columns: IFooterColumnDefinition[];
25
10
  }[];
26
11
  renderPluginFooters: () => React.ReactNode;
27
12
  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
28
- animationProps?: {
29
- isLoading?: boolean;
30
- animateOnLoad?: boolean;
31
- };
32
- selectionProps?: {
33
- onSelectionChange: (selectedItems: TData[]) => void;
34
- rowIdKey: keyof TData;
35
- mode?: 'single' | 'multiple';
36
- selectedItems?: TData[];
37
- selectedRowClassName?: string;
38
- };
39
- onRowClick?: (item: TData) => void;
40
13
  }
41
- declare function DesktopView<TData>(props: DesktopViewProps<TData>): React.JSX.Element;
14
+ declare function DesktopView<TData>(props: DesktopViewProps): React.JSX.Element;
42
15
  export default DesktopView;
@@ -1,8 +1,8 @@
1
1
  import React, { ReactNode } from 'react';
2
- import { IResponsiveTableColumnDefinition, SortDirection } from '../Data/IResponsiveTableColumnDefinition';
2
+ import { SortDirection } from '../Data/IResponsiveTableColumnDefinition';
3
3
  import IFooterRowDefinition from '../Data/IFooterRowDefinition';
4
4
  import { IResponsiveTablePlugin } from '../Plugins/IResponsiveTablePlugin';
5
- export type ColumnDefinition<TData> = IResponsiveTableColumnDefinition<TData> | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
5
+ import { ColumnDefinition } from '../Context/TableContext';
6
6
  interface IInfiniteScrollProps<TData> {
7
7
  onLoadMore: (currentData: TData[]) => Promise<TData[] | null>;
8
8
  hasMore?: boolean;
@@ -1,29 +1,6 @@
1
1
  import React from 'react';
2
- import { IResponsiveTableColumnDefinition } from '../Data/IResponsiveTableColumnDefinition';
3
- import { ColumnDefinition } from './ResponsiveTable';
4
- interface MobileViewProps<TData> {
5
- currentData: TData[];
6
- columnDefinitions: ColumnDefinition<TData>[];
7
- onRowClick?: (item: TData) => void;
8
- selectionProps?: {
9
- onSelectionChange: (selectedItems: TData[]) => void;
10
- rowIdKey: keyof TData;
11
- mode?: 'single' | 'multiple';
12
- selectedItems?: TData[];
13
- selectedRowClassName?: string;
14
- };
15
- animationProps?: {
16
- isLoading?: boolean;
17
- animateOnLoad?: boolean;
18
- };
19
- getRowProps: (row: TData) => React.HTMLAttributes<HTMLElement>;
20
- getRowId: (row: TData, index: number) => string | number;
21
- getColumnDefinition: (colDef: ColumnDefinition<TData>, rowIndex: number) => IResponsiveTableColumnDefinition<TData>;
22
- onHeaderClickCallback: (colDef: ColumnDefinition<TData>) => ((id: string) => void) | undefined;
23
- getClickableHeaderClassName: (onHeaderClick: ((id: string) => void) | undefined, colDef: ColumnDefinition<TData>) => string;
24
- renderCell: (content: React.ReactNode, row: TData, colDef: IResponsiveTableColumnDefinition<TData>) => React.ReactNode;
25
- rowClickFunction: (item: TData) => void;
2
+ interface MobileViewProps {
26
3
  mobileFooter: React.ReactNode;
27
4
  }
28
- declare function MobileView<TData>(props: MobileViewProps<TData>): React.JSX.Element;
5
+ declare function MobileView<TData>(props: MobileViewProps): React.JSX.Element;
29
6
  export default MobileView;
@@ -1,8 +1,9 @@
1
1
  import React, { ReactNode } from 'react';
2
- import { IResponsiveTableColumnDefinition, SortDirection } from '../Data/IResponsiveTableColumnDefinition';
2
+ import { SortDirection } from '../Data/IResponsiveTableColumnDefinition';
3
3
  import IFooterRowDefinition from '../Data/IFooterRowDefinition';
4
4
  import { IResponsiveTablePlugin } from '../Plugins/IResponsiveTablePlugin';
5
- export type ColumnDefinition<TData> = IResponsiveTableColumnDefinition<TData> | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
5
+ import { ColumnDefinition } from '../Context/TableContext';
6
+ export { ColumnDefinition };
6
7
  interface IInfiniteScrollProps<TData> {
7
8
  onLoadMore: (currentData: TData[]) => Promise<TData[] | null>;
8
9
  hasMore?: boolean;
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { ColumnDefinition } from '../Context/TableContext';
3
+ interface TableBodyCellProps<TData> {
4
+ row: TData;
5
+ rowIndex: number;
6
+ columnDefinition: ColumnDefinition<TData>;
7
+ }
8
+ export declare function TableBodyCell<TData>(props: TableBodyCellProps<TData>): React.JSX.Element;
9
+ export {};
@@ -0,0 +1,21 @@
1
+ import React from 'react';
2
+ import { ColumnDefinition } from '../Context/TableContext';
3
+ interface TableBodyRowProps<TData> {
4
+ row: TData;
5
+ rowIndex: number;
6
+ columnDefinitions: ColumnDefinition<TData>[];
7
+ onRowClick?: (item: TData) => void;
8
+ selectionProps?: {
9
+ onSelectionChange: (selectedItems: TData[]) => void;
10
+ rowIdKey: keyof TData;
11
+ mode?: 'single' | 'multiple';
12
+ selectedItems?: TData[];
13
+ selectedRowClassName?: string;
14
+ };
15
+ animationProps?: {
16
+ isLoading?: boolean;
17
+ animateOnLoad?: boolean;
18
+ };
19
+ }
20
+ export declare function TableBodyRow<TData>(props: TableBodyRowProps<TData>): React.JSX.Element;
21
+ export {};
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import { ColumnDefinition } from '../Context/TableContext';
3
+ interface TableHeaderCellProps<TData> {
4
+ columnDefinition: ColumnDefinition<TData>;
5
+ colIndex: number;
6
+ }
7
+ export declare function TableHeaderCell<TData>(props: TableHeaderCellProps<TData>): React.JSX.Element;
8
+ export {};
package/dist/index.css ADDED
@@ -0,0 +1 @@
1
+ .ResponsiveTable-module_responsiveTable__4y-Od{--table-border-color:#e0e0e0;--table-header-bg:#f8f9fa;--table-row-hover-bg:#e9ecef;--table-row-stripe-bg:#f2f2f2;--card-bg:#fff;--card-border-color:#e0e0e0;--card-shadow:0 2px 8px rgba(0,0,0,.06);--text-color:#212529;--text-color-muted:#6c757d;--interactive-color:#0056b3}.ResponsiveTable-module_card__b-U2v{transition:box-shadow .2s ease-in-out}.ResponsiveTable-module_card__b-U2v:hover{box-shadow:0 4px 12px rgba(0,0,0,.1)}.ResponsiveTable-module_card-header__Ttk51{background-color:var(--table-header-bg);border-bottom:1px solid var(--table-border-color);font-weight:600;padding:.75rem 1rem}.ResponsiveTable-module_card-body__XIy0h{font-size:.9rem;padding:1rem}.ResponsiveTable-module_card-body__XIy0h p{display:flex;justify-content:space-between;margin:0 0 .75rem}.ResponsiveTable-module_card-body__XIy0h p:last-child{margin-bottom:0}.ResponsiveTable-module_card-label__v9L71{color:var(--text-color);font-weight:600;margin-right:.5rem}.ResponsiveTable-module_responsiveTable__4y-Od{border-collapse:collapse;color:var(--text-color);width:100%}.ResponsiveTable-module_responsiveTable__4y-Od thead th{background-color:var(--table-header-bg);border-bottom:2px solid var(--table-border-color);font-weight:600;padding:1rem;text-align:left;z-index:1}.ResponsiveTable-module_headerInnerWrapper__3VAhD{align-items:center;display:flex;justify-content:space-between;position:relative;width:100%}.ResponsiveTable-module_headerContent__ODMzS{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ResponsiveTable-module_responsiveTable__4y-Od td{border-bottom:1px solid var(--table-border-color);padding:1rem;text-align:left}.ResponsiveTable-module_responsiveTable__4y-Od tr{background-color:var(--card-bg);transition:background-color .2s ease-in-out}.ResponsiveTable-module_card__b-U2v{background-color:var(--card-bg);border:1px solid var(--card-border-color);border-left:5px solid transparent;border-radius:8px;box-shadow:var(--card-shadow);margin-bottom:1rem;overflow:hidden;transition:box-shadow .2s ease-in-out,background-color .2s ease-in-out}.ResponsiveTable-module_selectedRow__-JyNW{--table-row-selected-bg:#ddeaff;background-color:var(--table-row-selected-bg)!important}.ResponsiveTable-module_card__b-U2v.ResponsiveTable-module_selectedRow__-JyNW{background-color:var(--table-row-selected-bg);border-left:5px solid var(--interactive-color)}.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(2n){background-color:var(--table-row-stripe-bg)}.ResponsiveTable-module_responsiveTable__4y-Od tr:hover{background-color:var(--table-row-hover-bg)}.ResponsiveTable-module_clickableRow__0kjWm{cursor:pointer}.ResponsiveTable-module_clickableHeader__xHQhF{color:var(--interactive-color);cursor:pointer}.ResponsiveTable-module_clickableHeader__xHQhF:hover{text-decoration:underline}.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60,.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa,.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK{cursor:pointer;transition:transform .2s ease-in-out}.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60:hover,.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa:hover,.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK:hover{transform:scale(1.01)}.ResponsiveTable-module_responsiveTable__4y-Od th .ResponsiveTable-module_sortIcon__A9WtD{background-position:50%;background-repeat:no-repeat;background-size:contain;height:1rem;margin-left:.5rem;opacity:.4;transition:opacity .2s ease-in-out;width:1rem}.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M10 18h4v-2h-4v2zm-6-8v2h16V8H4zm3-6h10v2H7V2z'/%3E%3C/svg%3E")}.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60:hover .ResponsiveTable-module_sortIcon__A9WtD{opacity:1}.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60>*{cursor:inherit}.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa .ResponsiveTable-module_sortIcon__A9WtD{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='m7 14 5-5 5 5z'/%3E%3C/svg%3E");opacity:1}.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK .ResponsiveTable-module_sortIcon__A9WtD{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='m7 10 5 5 5-5z'/%3E%3C/svg%3E");opacity:1}.ResponsiveTable-module_responsiveTable__4y-Od tfoot{background-color:var(--table-header-bg);border-top:2px solid var(--table-border-color);font-weight:600}.ResponsiveTable-module_footerCell__8H-uG{font-weight:600;padding:1rem;text-align:right}.ResponsiveTable-module_clickableFooterCell__WB9Ss{color:var(--interactive-color);cursor:pointer}.ResponsiveTable-module_clickableFooterCell__WB9Ss:hover{text-decoration:underline}.ResponsiveTable-module_footerCard__-NE2M{background-color:var(--table-header-bg);border:1px solid var(--card-border-color);border-radius:8px;border-top:2px solid var(--table-border-color);box-shadow:none;margin-bottom:1rem;overflow:hidden}.ResponsiveTable-module_footer-card-body__CtBMv{font-size:.9rem;padding:1rem}.ResponsiveTable-module_footer-card-row__Vv6Ur{display:flex;font-weight:600;justify-content:space-between;margin:0 0 .75rem}.ResponsiveTable-module_animatedRow__SFjrJ{animation:ResponsiveTable-module_fadeInUp__jMCS7 .5s ease-out forwards;opacity:0}@keyframes ResponsiveTable-module_fadeInUp__jMCS7{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.ResponsiveTable-module_skeleton__XxsXW{background-color:#e0e0e0;border-radius:4px;overflow:hidden;position:relative}.ResponsiveTable-module_skeleton__XxsXW:after{animation:ResponsiveTable-module_shimmer__H8PhC 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.4),transparent);content:"";height:100%;left:-150%;position:absolute;top:0;width:150%}.ResponsiveTable-module_skeletonText__T-Lgq{height:1.2em;width:100%}.ResponsiveTable-module_skeletonCard__AYVwL{background-color:var(--card-bg);border:1px solid var(--card-border-color);border-radius:8px;margin-bottom:1rem;overflow:hidden;padding:1rem}@keyframes ResponsiveTable-module_shimmer__H8PhC{0%{transform:translateX(0)}to{transform:translateX(100%)}}.ResponsiveTable-module_noDataWrapper__Rj-k3{align-items:center;background-color:var(--table-header-bg);border:1px dashed var(--table-border-color);border-radius:8px;color:var(--text-color-muted);display:flex;gap:10px;height:100%;justify-content:center;padding:40px}.ResponsiveTable-module_noData__IpwNq{font-size:1rem;font-weight:500;text-align:center}.ResponsiveTable-module_row-exit__EVX6T{opacity:0;transform:scaleY(0);transition:transform .3s ease-out,opacity .3s ease-out}.ResponsiveTable-module_row-enter__YKgI4{opacity:0;transform:translateY(20px);transition:transform .5s ease-out,opacity .5s ease-out}.ResponsiveTable-module_row-flash__a4NOm{animation:ResponsiveTable-module_flash__nxeAX .5s ease-out}@keyframes ResponsiveTable-module_flash__nxeAX{0%{background-color:var(--table-row-hover-bg)}to{background-color:transparent}}.ResponsiveTable-module_stickyHeader__-jjN- th{box-shadow:0 2px 4px rgba(0,0,0,.1);position:sticky;top:0;z-index:1}.ResponsiveTable-module_internalStickyHeader__idiJY th{position:sticky;top:0;z-index:1}.ResponsiveTable-module_spinner__Pn-3D{animation:ResponsiveTable-module_spin__i3NHn 1s linear infinite;border:4px solid rgba(0,0,0,.1);border-left:4px solid var(--interactive-color);border-radius:50%;display:inline-block;height:24px;margin-right:8px;vertical-align:middle;width:24px}@keyframes ResponsiveTable-module_spin__i3NHn{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ResponsiveTable-module_infoContainer__b9IF5{align-items:center;background-color:var(--table-header-bg);border-top:1px solid var(--table-border-color);color:var(--text-color-muted);display:flex;font-size:.9rem;gap:8px;justify-content:center;padding:20px}.ResponsiveTable-module_infoContainer__b9IF5.ResponsiveTable-module_noMoreData__he1rZ{font-weight:500}.LoadingSpinner-module_spinner__F9V3x{animation:LoadingSpinner-module_spin__VkBDO 1s linear infinite;border:4px solid rgba(0,0,0,.1);border-left:4px solid var(--interactive-color);border-radius:50%;display:inline-block;height:24px;margin-right:8px;vertical-align:middle;width:24px}@keyframes LoadingSpinner-module_spin__VkBDO{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.NoMoreDataMessage-module_infoContainer__dk1r5{align-items:center;background-color:var(--table-header-bg);border-top:1px solid var(--table-border-color);color:var(--text-color-muted);display:flex;font-size:.9rem;gap:8px;justify-content:center;padding:20px}.NoMoreDataMessage-module_infoContainer__dk1r5.NoMoreDataMessage-module_noMoreData__ATuIg{font-weight:500}