@jitera/jitera-web-ui-library 1.37.0 → 1.38.0

package/dist/index.d.ts

@@ -390,6 +390,11 @@ interface RichTextProps {
 
 declare const RichText: React.FC<RichTextProps>
 
+declare module '@tanstack/table-core' {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    action: boolean
+  }
+}
 interface TableColumnDefinition<DataModel extends RowData> {
   name: string
   path?: DeepKeys<DataModel>
@@ -403,6 +408,10 @@ interface TableProps<DataModel extends RowData> {
   columns: TableColumnDefinition<DataModel>[]
   actions?: TableColumnDefinition<DataModel>[]
   style?: CSSObject
+  tableStyle?: CSSObject
+  headerRowStyle?: CSSObject
+  bodyRowStyle?: CSSObject
+  footerRowStyle?: CSSObject
   styleWrapper?: CSSProperties
   styleTable?: CSSProperties
   styleThead?: CSSProperties
@@ -424,7 +433,7 @@ interface TableProps<DataModel extends RowData> {
   onPaginationChange?: (pagination: PaginationState) => void
 }
 interface TableRowProps<DataModel extends RowData>
-  extends Pick<TableProps<DataModel>, 'isRowSortable'> {
+  extends Pick<TableProps<DataModel>, 'isRowSortable' | 'bodyRowStyle'> {
   row: Row$1<DataModel>
 }
 interface TableHeaderProps<DataModel extends RowData>
@@ -445,6 +454,10 @@ declare const TableInner: <DataModel>(
     columns,
     actions,
     style,
+    tableStyle,
+    headerRowStyle,
+    bodyRowStyle,
+    footerRowStyle,
     isColumnResizeable,
     isHeaderVisible,
     isFooterVisible,

package/dist/index.esm.js

@@ -135,7 +135,7 @@ import{jsx as av,jsxs as aw}from"react/jsx-runtime";import a,{useMemo as ax,useS
   && {
     ${a=>a.style}
   }
-`;let cr=({header:a,isColumnResizeable:b,isColumnSortable:i,isDataSortable:d,ascendingIconProps:g,descendingIconProps:h})=>{var e;let{attributes:j,listeners:k,transform:c,isDragging:l,setNodeRef:m}=br({id:a.id}),n={transform:bE.Transform.toString({x:(null==c?void 0:c.x)||0,y:(null==c?void 0:c.y)||0,scaleX:1,scaleY:1})},f=ax(()=>i&&"Action"!==a.id,[a.id,i]),o=f?k:void 0,p=f?j:void 0;return aw(cp,{ref:m,className:`j-table__thead-th j-table__thead-th--${a.id} ${l?"j-table__thead-th--dragging":""}`,colSpan:a.colSpan,canSort:d?a.column.getCanSort():void 0,style:{...n,width:b?a.getSize():void 0},onClick:d?a.column.getToggleSortingHandler():void 0,onMouseDown:b?a.getResizeHandler():void 0,onTouchStart:b?a.getResizeHandler():void 0,...o,...p,children:[bm(a.column.columnDef.header,a.getContext()),f?av(G,{className:"j-table__thead-th-drag",iconName:"MdDragIndicator"}):void 0,d?null!==(e=({asc:g?av(G,{...g}):" \u{1F53C}",desc:h?av(G,{...h}):" \u{1F53D}"})[a.column.getIsSorted()])&& void 0!==e?e:null:void 0,b?av(cm,{className:"j-table__resizer",isResizing:a.column.getIsResizing(),onMouseDown:a.getResizeHandler(),onTouchStart:a.getResizeHandler()}):void 0]},a.id)},cs=({row:a,isRowSortable:c})=>{let{attributes:d,listeners:e,transform:b,isDragging:f,setNodeRef:g}=br({id:a.id}),h={transform:bE.Transform.toString({x:(null==b?void 0:b.x)||0,y:(null==b?void 0:b.y)||0,scaleX:1,scaleY:1})};return aw(co,{ref:g,className:`j-table__tbody-tr j-table__tbody-tr--${a.id} ${f?"j-table__tbody-tr--dragging":""}`,style:h,children:[c?av(cq,{...e,...d,children:av(G,{className:"j-table__tbody-td-drag",iconName:"MdDragIndicator"})}):void 0,a.getVisibleCells().map(a=>av(cq,{className:`j-table__tbody-td j-table__tbody-td--${a.id}`,style:{width:a.column.getSize()},children:bm(a.column.columnDef.cell,a.getContext())},a.id))]},a.id)},as=({className:h,data:i,columns:j,actions:k=[],style:l,isColumnResizeable:d,isHeaderVisible:m=!0,isFooterVisible:n,isColumnSortable:z,onColumnSortingChange:A,isRowSortable:B,onRowSortingChange:C,isDataSortable:e,ascendingIconProps:D,descendingIconProps:E,onDataSortingChange:o,isPaginationEnabled:b,totalPage:f,paginationProps:p,paginationStyle:q,onPaginationChange:r},s)=>{let[g,t]=ay([]),[c,u]=ay({pageIndex:0,pageSize:10}),v=ax(()=>[...j,...k].map(a=>({accessorKey:a.renderColumn?void 0:a.path,header:a.name,footer:a.name,cell:a.renderColumn?a.renderColumn:a=>a.getValue(),enableSorting:a.sortable})),[j,k]),a=bk({data:i,columns:v,columnResizeMode:d?"onChange":void 0,pageCount:f,state:{sorting:e?g:void 0,pagination:b?c:void 0},manualPagination:b,manualSorting:!0,getCoreRowModel:bl(),onPaginationChange:b?u:void 0,onSortingChange:e?t:void 0}),w=bs(bt(bu),bt(bv),bt(bw),bt(bx,{coordinateGetter:bn}));aD(()=>{o&&o(g)},[o,g]),aD(()=>{r&&r(c)},[r,c]);let x=(b,c)=>{a.setPageIndex(b-1),a.setPageSize(c)},F=({active:d,over:c})=>{var a,b;let e=null===(a=d.data.current)|| void 0===a?void 0:a.sortable.index,f=null===(b=null==c?void 0:c.data.current)|| void 0===b?void 0:b.sortable.index;return{currentIndex:e,newIndex:f}},y=a=>{let{currentIndex:b,newIndex:c}=F(a);C&&C(b,c)},G=a=>{let{currentIndex:b,newIndex:c}=F(a);A&&A(b,c)};return aw(cl,{style:l,className:h,children:[aw(cn,{ref:s,className:"j-table",style:{width:d?a.getCenterTotalSize():void 0},children:[m?av("thead",{className:"j-table__thead",children:a.getHeaderGroups().map(a=>aw(co,{className:`j-table__thead-tr j-table__thead-tr--${a.id}`,children:[B?av(cp,{}):void 0,av(by,{sensors:w,collisionDetection:bz,modifiers:[bA,bB,bC],onDragEnd:G,children:av(bo,{items:a.headers,strategy:bp,children:a.headers.map(a=>av(cr,{header:a,isColumnResizeable:d,isColumnSortable:z,isDataSortable:e,ascendingIconProps:D,descendingIconProps:E},a.id))})})]},a.id))}):void 0,av("tbody",{className:"j-table__tbody",children:av(by,{sensors:w,collisionDetection:bz,modifiers:[bA,bD,bC],onDragEnd:y,children:av(bo,{items:a.getRowModel().rows,strategy:bq,children:a.getRowModel().rows.map(a=>av(cs,{row:a,isRowSortable:B},a.id))})})}),n?av("tfoot",{children:a.getFooterGroups().map(a=>av("tr",{children:a.headers.map(a=>av(cp,{colSpan:a.colSpan,children:bm(a.column.columnDef.footer,a.getContext())},a.id))},a.id))}):void 0]}),b?av(aS,{...p,style:q,current:c.pageIndex+1,total:f,onChange:x}):void 0]})},at=a.forwardRef(as),ct=b.div`
+`;let cr=({header:a,isColumnResizeable:b,isColumnSortable:j,isDataSortable:d,ascendingIconProps:h,descendingIconProps:i})=>{var e,f;let{attributes:k,listeners:l,transform:c,isDragging:m,setNodeRef:n}=br({id:a.id}),o={transform:bE.Transform.toString({x:(null==c?void 0:c.x)||0,y:(null==c?void 0:c.y)||0,scaleX:1,scaleY:1})},g=ax(()=>{var b;return j&&!(null===(b=a.column.columnDef.meta)|| void 0===b?void 0:b.action)},[null===(e=a.column.columnDef.meta)|| void 0===e?void 0:e.action,j]),p=g?l:void 0,q=g?k:void 0;return aw(cp,{ref:n,className:`j-table__thead-th j-table__thead-th--${a.id} ${m?"j-table__thead-th--dragging":""}`,colSpan:a.colSpan,canSort:d?a.column.getCanSort():void 0,style:{...o,width:b?a.getSize():void 0},onClick:d?a.column.getToggleSortingHandler():void 0,onMouseDown:b?a.getResizeHandler():void 0,onTouchStart:b?a.getResizeHandler():void 0,...p,...q,children:[bm(a.column.columnDef.header,a.getContext()),g?av(G,{className:"j-table__thead-th-drag",iconName:"MdDragIndicator"}):void 0,d?null!==(f=({asc:h?av(G,{...h}):" \u{1F53C}",desc:i?av(G,{...i}):" \u{1F53D}"})[a.column.getIsSorted()])&& void 0!==f?f:null:void 0,b?av(cm,{className:"j-table__resizer",isResizing:a.column.getIsResizing(),onMouseDown:a.getResizeHandler(),onTouchStart:a.getResizeHandler()}):void 0]},a.id)},cs=({row:a,isRowSortable:c,bodyRowStyle:d})=>{let{attributes:e,listeners:f,transform:b,isDragging:g,setNodeRef:h}=br({id:a.id}),i={transform:bE.Transform.toString({x:(null==b?void 0:b.x)||0,y:(null==b?void 0:b.y)||0,scaleX:1,scaleY:1})};return aw(co,{ref:h,className:`j-table__tbody-tr j-table__tbody-tr--${a.id} ${g?"j-table__tbody-tr--dragging":""}`,style:{...d,...i},children:[c?av(cq,{...f,...e,children:av(G,{className:"j-table__tbody-td-drag",iconName:"MdDragIndicator"})}):void 0,a.getVisibleCells().map(a=>av(cq,{className:`j-table__tbody-td j-table__tbody-td--${a.id}`,style:{width:a.column.getSize()},children:bm(a.column.columnDef.cell,a.getContext())},a.id))]},a.id)},as=({className:h,data:i,columns:j,actions:k=[],style:l,tableStyle:m,headerRowStyle:B,bodyRowStyle:C,footerRowStyle:D,isColumnResizeable:d,isHeaderVisible:n=!0,isFooterVisible:o,isColumnSortable:E,onColumnSortingChange:F,isRowSortable:G,onRowSortingChange:H,isDataSortable:e,ascendingIconProps:I,descendingIconProps:J,onDataSortingChange:p,isPaginationEnabled:b,totalPage:f,paginationProps:q,paginationStyle:r,onPaginationChange:s},t)=>{let[g,u]=ay([]),[c,v]=ay({pageIndex:0,pageSize:10}),w=ax(()=>j.map(a=>({accessorKey:a.renderColumn?void 0:a.path,header:a.name,footer:a.name,cell:a.renderColumn?a.renderColumn:a=>a.getValue(),enableSorting:a.sortable})),[j]),x=ax(()=>k.map(a=>({meta:{action:!0},header:a.name,footer:a.name,cell:a.renderColumn,enableSorting:!1})),[k]),a=bk({data:i,columns:[...w,...x],columnResizeMode:d?"onChange":void 0,pageCount:f,state:{sorting:e?g:void 0,pagination:b?c:void 0},manualPagination:b,manualSorting:!0,getCoreRowModel:bl(),onPaginationChange:b?v:void 0,onSortingChange:e?u:void 0}),y=bs(bt(bu),bt(bv),bt(bw),bt(bx,{coordinateGetter:bn}));aD(()=>{p&&p(g)},[p,g]),aD(()=>{s&&s(c)},[s,c]);let z=(b,c)=>{a.setPageIndex(b-1),a.setPageSize(c)},K=({active:d,over:c})=>{var a,b;let e=null===(a=d.data.current)|| void 0===a?void 0:a.sortable.index,f=null===(b=null==c?void 0:c.data.current)|| void 0===b?void 0:b.sortable.index;return{currentIndex:e,newIndex:f}},A=a=>{let{currentIndex:b,newIndex:c}=K(a);H&&H(b,c)},L=a=>{let{currentIndex:b,newIndex:c}=K(a);F&&F(b,c)};return aw(cl,{style:l,className:h,children:[aw(cn,{ref:t,className:"j-table",style:{...m,width:d?a.getCenterTotalSize():void 0},children:[n?av("thead",{className:"j-table__thead",children:a.getHeaderGroups().map(a=>aw(co,{className:`j-table__thead-tr j-table__thead-tr--${a.id}`,style:B,children:[G?av(cp,{}):void 0,av(by,{sensors:y,collisionDetection:bz,modifiers:[bA,bB,bC],onDragEnd:L,children:av(bo,{items:a.headers,strategy:bp,children:a.headers.map(a=>av(cr,{header:a,isColumnResizeable:d,isColumnSortable:E,isDataSortable:e,ascendingIconProps:I,descendingIconProps:J},a.id))})})]},a.id))}):void 0,av("tbody",{className:"j-table__tbody",children:av(by,{sensors:y,collisionDetection:bz,modifiers:[bA,bD,bC],onDragEnd:A,children:av(bo,{items:a.getRowModel().rows,strategy:bq,children:a.getRowModel().rows.map(a=>av(cs,{row:a,isRowSortable:G,bodyRowStyle:C},a.id))})})}),o?av("tfoot",{children:a.getFooterGroups().map(a=>aw(co,{style:D,children:[G?av(cp,{}):void 0,a.headers.map(a=>av(cp,{colSpan:a.colSpan,children:bm(a.column.columnDef.footer,a.getContext())},a.id))]},a.id))}):void 0]}),b?av(aS,{...q,style:r,current:c.pageIndex+1,total:f,onChange:z}):void 0]})},at=a.forwardRef(as),ct=b.div`
   .otp-cell {
     margin-right: 16px;
 

package/dist/index.js

@@ -135,7 +135,7 @@
   && {
     ${a=>a.style}
   }
-`;const bK=({header:a,isColumnResizeable:b,isColumnSortable:j,isDataSortable:d,ascendingIconProps:h,descendingIconProps:i})=>{var e;let{attributes:k,listeners:l,transform:c,isDragging:m,setNodeRef:n}=aI.useSortable({id:a.id}),o={transform:aL.CSS.Transform.toString({x:(null==c?void 0:c.x)||0,y:(null==c?void 0:c.y)||0,scaleX:1,scaleY:1})},f=g.useMemo(()=>j&&"Action"!==a.id,[a.id,j]),p=f?l:void 0,q=f?k:void 0;return az.jsxs(bI,{ref:n,className:`j-table__thead-th j-table__thead-th--${a.id} ${m?"j-table__thead-th--dragging":""}`,colSpan:a.colSpan,canSort:d?a.column.getCanSort():void 0,style:{...o,width:b?a.getSize():void 0},onClick:d?a.column.getToggleSortingHandler():void 0,onMouseDown:b?a.getResizeHandler():void 0,onTouchStart:b?a.getResizeHandler():void 0,...p,...q,children:[aH.flexRender(a.column.columnDef.header,a.getContext()),f?az.jsx(M,{className:"j-table__thead-th-drag",iconName:"MdDragIndicator"}):void 0,d?null!==(e=({asc:h?az.jsx(M,{...h}):" \u{1F53C}",desc:i?az.jsx(M,{...i}):" \u{1F53D}"})[a.column.getIsSorted()])&& void 0!==e?e:null:void 0,b?az.jsx(bF,{className:"j-table__resizer",isResizing:a.column.getIsResizing(),onMouseDown:a.getResizeHandler(),onTouchStart:a.getResizeHandler()}):void 0]},a.id)},bL=({row:a,isRowSortable:c})=>{let{attributes:d,listeners:e,transform:b,isDragging:f,setNodeRef:g}=aI.useSortable({id:a.id}),h={transform:aL.CSS.Transform.toString({x:(null==b?void 0:b.x)||0,y:(null==b?void 0:b.y)||0,scaleX:1,scaleY:1})};return az.jsxs(bH,{ref:g,className:`j-table__tbody-tr j-table__tbody-tr--${a.id} ${f?"j-table__tbody-tr--dragging":""}`,style:h,children:[c?az.jsx(bJ,{...e,...d,children:az.jsx(M,{className:"j-table__tbody-td-drag",iconName:"MdDragIndicator"})}):void 0,a.getVisibleCells().map(a=>az.jsx(bJ,{className:`j-table__tbody-td j-table__tbody-td--${a.id}`,style:{width:a.column.getSize()},children:aH.flexRender(a.column.columnDef.cell,a.getContext())},a.id))]},a.id)},aw=({className:j,data:k,columns:l,actions:m=[],style:n,isColumnResizeable:d,isHeaderVisible:o=!0,isFooterVisible:p,isColumnSortable:B,onColumnSortingChange:C,isRowSortable:D,onRowSortingChange:E,isDataSortable:f,ascendingIconProps:F,descendingIconProps:G,onDataSortingChange:q,isPaginationEnabled:b,totalPage:h,paginationProps:r,paginationStyle:s,onPaginationChange:t},u)=>{let[i,v]=g.useState([]),[c,w]=g.useState({pageIndex:0,pageSize:10}),x=g.useMemo(()=>[...l,...m].map(a=>({accessorKey:a.renderColumn?void 0:a.path,header:a.name,footer:a.name,cell:a.renderColumn?a.renderColumn:a=>a.getValue(),enableSorting:a.sortable})),[l,m]),a=aH.useReactTable({data:k,columns:x,columnResizeMode:d?"onChange":void 0,pageCount:h,state:{sorting:f?i:void 0,pagination:b?c:void 0},manualPagination:b,manualSorting:!0,getCoreRowModel:aH.getCoreRowModel(),onPaginationChange:b?w:void 0,onSortingChange:f?v:void 0}),y=aJ.useSensors(aJ.useSensor(aJ.PointerSensor),aJ.useSensor(aJ.MouseSensor),aJ.useSensor(aJ.TouchSensor),aJ.useSensor(aJ.KeyboardSensor,{coordinateGetter:aI.sortableKeyboardCoordinates}));g.useEffect(()=>{q&&q(i)},[q,i]),g.useEffect(()=>{t&&t(c)},[t,c]);let z=(b,c)=>{a.setPageIndex(b-1),a.setPageSize(c)},H=({active:d,over:c})=>{var a,b;let e=null===(a=d.data.current)|| void 0===a?void 0:a.sortable.index,f=null===(b=null==c?void 0:c.data.current)|| void 0===b?void 0:b.sortable.index;return{currentIndex:e,newIndex:f}},A=a=>{let{currentIndex:b,newIndex:c}=H(a);E&&E(b,c)},I=a=>{let{currentIndex:b,newIndex:c}=H(a);C&&C(b,c)};return az.jsxs(bE,{style:n,className:j,children:[az.jsxs(bG,{ref:u,className:"j-table",style:{width:d?a.getCenterTotalSize():void 0},children:[o?az.jsx("thead",{className:"j-table__thead",children:a.getHeaderGroups().map(a=>az.jsxs(bH,{className:`j-table__thead-tr j-table__thead-tr--${a.id}`,children:[D?az.jsx(bI,{}):void 0,az.jsx(aJ.DndContext,{sensors:y,collisionDetection:aJ.closestCenter,modifiers:[aK.restrictToFirstScrollableAncestor,aK.restrictToHorizontalAxis,aK.restrictToParentElement],onDragEnd:I,children:az.jsx(aI.SortableContext,{items:a.headers,strategy:aI.horizontalListSortingStrategy,children:a.headers.map(a=>az.jsx(bK,{header:a,isColumnResizeable:d,isColumnSortable:B,isDataSortable:f,ascendingIconProps:F,descendingIconProps:G},a.id))})})]},a.id))}):void 0,az.jsx("tbody",{className:"j-table__tbody",children:az.jsx(aJ.DndContext,{sensors:y,collisionDetection:aJ.closestCenter,modifiers:[aK.restrictToFirstScrollableAncestor,aK.restrictToVerticalAxis,aK.restrictToParentElement],onDragEnd:A,children:az.jsx(aI.SortableContext,{items:a.getRowModel().rows,strategy:aI.verticalListSortingStrategy,children:a.getRowModel().rows.map(a=>az.jsx(bL,{row:a,isRowSortable:D},a.id))})})}),p?az.jsx("tfoot",{children:a.getFooterGroups().map(a=>az.jsx("tr",{children:a.headers.map(a=>az.jsx(bI,{colSpan:a.colSpan,children:aH.flexRender(a.column.columnDef.footer,a.getContext())},a.id))},a.id))}):void 0]}),b?az.jsx(e.Pagination,{...r,style:s,current:c.pageIndex+1,total:h,onChange:z}):void 0]})},ax=a.default.forwardRef(aw),bM=b.default.div`
+`;const bK=({header:a,isColumnResizeable:b,isColumnSortable:k,isDataSortable:d,ascendingIconProps:i,descendingIconProps:j})=>{var e,f;let{attributes:l,listeners:m,transform:c,isDragging:n,setNodeRef:o}=aI.useSortable({id:a.id}),p={transform:aL.CSS.Transform.toString({x:(null==c?void 0:c.x)||0,y:(null==c?void 0:c.y)||0,scaleX:1,scaleY:1})},h=g.useMemo(()=>{var b;return k&&!(null===(b=a.column.columnDef.meta)|| void 0===b?void 0:b.action)},[null===(e=a.column.columnDef.meta)|| void 0===e?void 0:e.action,k]),q=h?m:void 0,r=h?l:void 0;return az.jsxs(bI,{ref:o,className:`j-table__thead-th j-table__thead-th--${a.id} ${n?"j-table__thead-th--dragging":""}`,colSpan:a.colSpan,canSort:d?a.column.getCanSort():void 0,style:{...p,width:b?a.getSize():void 0},onClick:d?a.column.getToggleSortingHandler():void 0,onMouseDown:b?a.getResizeHandler():void 0,onTouchStart:b?a.getResizeHandler():void 0,...q,...r,children:[aH.flexRender(a.column.columnDef.header,a.getContext()),h?az.jsx(M,{className:"j-table__thead-th-drag",iconName:"MdDragIndicator"}):void 0,d?null!==(f=({asc:i?az.jsx(M,{...i}):" \u{1F53C}",desc:j?az.jsx(M,{...j}):" \u{1F53D}"})[a.column.getIsSorted()])&& void 0!==f?f:null:void 0,b?az.jsx(bF,{className:"j-table__resizer",isResizing:a.column.getIsResizing(),onMouseDown:a.getResizeHandler(),onTouchStart:a.getResizeHandler()}):void 0]},a.id)},bL=({row:a,isRowSortable:c,bodyRowStyle:d})=>{let{attributes:e,listeners:f,transform:b,isDragging:g,setNodeRef:h}=aI.useSortable({id:a.id}),i={transform:aL.CSS.Transform.toString({x:(null==b?void 0:b.x)||0,y:(null==b?void 0:b.y)||0,scaleX:1,scaleY:1})};return az.jsxs(bH,{ref:h,className:`j-table__tbody-tr j-table__tbody-tr--${a.id} ${g?"j-table__tbody-tr--dragging":""}`,style:{...d,...i},children:[c?az.jsx(bJ,{...f,...e,children:az.jsx(M,{className:"j-table__tbody-td-drag",iconName:"MdDragIndicator"})}):void 0,a.getVisibleCells().map(a=>az.jsx(bJ,{className:`j-table__tbody-td j-table__tbody-td--${a.id}`,style:{width:a.column.getSize()},children:aH.flexRender(a.column.columnDef.cell,a.getContext())},a.id))]},a.id)},aw=({className:j,data:k,columns:l,actions:m=[],style:n,tableStyle:o,headerRowStyle:D,bodyRowStyle:E,footerRowStyle:F,isColumnResizeable:d,isHeaderVisible:p=!0,isFooterVisible:q,isColumnSortable:G,onColumnSortingChange:H,isRowSortable:I,onRowSortingChange:J,isDataSortable:f,ascendingIconProps:K,descendingIconProps:L,onDataSortingChange:r,isPaginationEnabled:b,totalPage:h,paginationProps:s,paginationStyle:t,onPaginationChange:u},v)=>{let[i,w]=g.useState([]),[c,x]=g.useState({pageIndex:0,pageSize:10}),y=g.useMemo(()=>l.map(a=>({accessorKey:a.renderColumn?void 0:a.path,header:a.name,footer:a.name,cell:a.renderColumn?a.renderColumn:a=>a.getValue(),enableSorting:a.sortable})),[l]),z=g.useMemo(()=>m.map(a=>({meta:{action:!0},header:a.name,footer:a.name,cell:a.renderColumn,enableSorting:!1})),[m]),a=aH.useReactTable({data:k,columns:[...y,...z],columnResizeMode:d?"onChange":void 0,pageCount:h,state:{sorting:f?i:void 0,pagination:b?c:void 0},manualPagination:b,manualSorting:!0,getCoreRowModel:aH.getCoreRowModel(),onPaginationChange:b?x:void 0,onSortingChange:f?w:void 0}),A=aJ.useSensors(aJ.useSensor(aJ.PointerSensor),aJ.useSensor(aJ.MouseSensor),aJ.useSensor(aJ.TouchSensor),aJ.useSensor(aJ.KeyboardSensor,{coordinateGetter:aI.sortableKeyboardCoordinates}));g.useEffect(()=>{r&&r(i)},[r,i]),g.useEffect(()=>{u&&u(c)},[u,c]);let B=(b,c)=>{a.setPageIndex(b-1),a.setPageSize(c)},M=({active:d,over:c})=>{var a,b;let e=null===(a=d.data.current)|| void 0===a?void 0:a.sortable.index,f=null===(b=null==c?void 0:c.data.current)|| void 0===b?void 0:b.sortable.index;return{currentIndex:e,newIndex:f}},C=a=>{let{currentIndex:b,newIndex:c}=M(a);J&&J(b,c)},N=a=>{let{currentIndex:b,newIndex:c}=M(a);H&&H(b,c)};return az.jsxs(bE,{style:n,className:j,children:[az.jsxs(bG,{ref:v,className:"j-table",style:{...o,width:d?a.getCenterTotalSize():void 0},children:[p?az.jsx("thead",{className:"j-table__thead",children:a.getHeaderGroups().map(a=>az.jsxs(bH,{className:`j-table__thead-tr j-table__thead-tr--${a.id}`,style:D,children:[I?az.jsx(bI,{}):void 0,az.jsx(aJ.DndContext,{sensors:A,collisionDetection:aJ.closestCenter,modifiers:[aK.restrictToFirstScrollableAncestor,aK.restrictToHorizontalAxis,aK.restrictToParentElement],onDragEnd:N,children:az.jsx(aI.SortableContext,{items:a.headers,strategy:aI.horizontalListSortingStrategy,children:a.headers.map(a=>az.jsx(bK,{header:a,isColumnResizeable:d,isColumnSortable:G,isDataSortable:f,ascendingIconProps:K,descendingIconProps:L},a.id))})})]},a.id))}):void 0,az.jsx("tbody",{className:"j-table__tbody",children:az.jsx(aJ.DndContext,{sensors:A,collisionDetection:aJ.closestCenter,modifiers:[aK.restrictToFirstScrollableAncestor,aK.restrictToVerticalAxis,aK.restrictToParentElement],onDragEnd:C,children:az.jsx(aI.SortableContext,{items:a.getRowModel().rows,strategy:aI.verticalListSortingStrategy,children:a.getRowModel().rows.map(a=>az.jsx(bL,{row:a,isRowSortable:I,bodyRowStyle:E},a.id))})})}),q?az.jsx("tfoot",{children:a.getFooterGroups().map(a=>az.jsxs(bH,{style:F,children:[I?az.jsx(bI,{}):void 0,a.headers.map(a=>az.jsx(bI,{colSpan:a.colSpan,children:aH.flexRender(a.column.columnDef.footer,a.getContext())},a.id))]},a.id))}):void 0]}),b?az.jsx(e.Pagination,{...s,style:t,current:c.pageIndex+1,total:h,onChange:B}):void 0]})},ax=a.default.forwardRef(aw),bM=b.default.div`
   .otp-cell {
     margin-right: 16px;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jitera/jitera-web-ui-library",
-  "version": "1.37.0",
+  "version": "1.38.0",
   "description": "atoms and component for web project",
   "sideEffects": [
     "*.css"