@progress/kendo-react-data-tools/header/HeaderRow.js

Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use client";
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react"),E=require("./HeaderCell.js"),M=require("./SortSettings.js"),q=require("../drag/ColumnResizer.js"),v=require("../drag/ColumnDraggable.js"),I=require("./HeaderThElement.js"),h=require("@progress/kendo-react-common"),C=require("@progress/kendo-react-intl"),g=require("@progress/kendo-svg-icons"),u=require("../messages/index.js");function N(i){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const r in i)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(i,r);Object.defineProperty(s,r,c.get?c:{enumerable:!0,get:()=>i[r]})}}return s.default=i,Object.freeze(s)}const t=N(z),P={true:{asc:"desc",desc:"","":"asc"},false:{asc:"desc",desc:"asc","":"asc"}},x={none:"none",asc:"ascending",desc:"descending"};class b extends t.Component{constructor(){super(...arguments),this.cellClick=(s,r)=>{if(s.preventDefault(),!this.props.sortChange)return;const{allowUnsort:c,mode:e}=M.normalize(this.props.sortable||!1,r.sortable||!1),n=(this.props.sort||[]).filter(a=>a.field===r.field)[0],p=P[c][n&&n.dir||""],l=e==="single"?[]:(this.props.sort||[]).filter(a=>a.field!==r.field);p!==""&&r.field&&l.push({field:r.field,dir:p}),this.props.sortChange(s,l,r.field)},this.cellKeyDown=(s,r)=>{s.isDefaultPrevented()||s.keyCode===h.Keys.enter&&this.cellClick(s,r)},this.cells=s=>s.map((r,c)=>{const e=this.props.columns[r],{columnResize:n}=this.props,p=n&&n.resizable&&e.resizable,l=this.props.sortable&&e.sortable,a=this.props.sort?this.props.sort.findIndex(o=>o.field===e.field):-1,k=a>=0&&this.props.sort[a].dir||"none",m={sort:this.props.sort,onSortChange:this.props.sortChange,filter:this.props.columnMenuFilter,onFilterChange:this.props.columnMenuFilterChange,field:e.field},f={field:e.field,onClick:l&&(o=>this.cellClick(o,e))||void 0,selectionChange:this.props.selectionChange,title:e.title,selectionValue:e.headerSelectionValue,render:this.props.cellRender,children:this.sortIcon(a),sort:this.props.sort,sortable:this.props.sortable,sortChange:this.props.sortChange,filterChange:this.props.filterChange,columns:this.props.columns,columnMenuWrapperProps:m},d=e.columnMenu||this.props.columnMenu,S=h.classNames("k-table-th",{"k-first":e.kFirst,"k-filterable":!!d,"k-header":!0,"k-grid-header-sticky":e.locked,"k-sorted":this.props.sort&&this.props.sort.some(o=>o.field===e.field)},e.headerClassName),y=e.locked!==void 0?{left:e.left,right:e.right,borderRightWidth:e.rightBorder?"1px":""}:{},D=C.provideLocalizationService(this).toLanguageString(u.sortAriaLabel,u.messages[u.sortAriaLabel]),H=e.isAccessible?{ariaSort:l?x[k]:void 0,role:"columnheader",ariaColumnIndex:e.ariaColumnIndex,ariaSelected:!1,ariaDescription:l?D:""}:{role:"presentation"};return t.createElement(I.HeaderThElement,{key:c,colSpan:e.colSpan,rowSpan:e.rowSpan,className:S,style:y,columnId:e.id,navigatable:e.navigatable,onKeyDown:l&&(o=>this.cellKeyDown(o,e))||void 0,...H},e.headerCell&&t.createElement(e.headerCell,{...f}),!e.headerCell&&t.createElement("span",{className:"k-cell-inner"},t.createElement(E.HeaderCell,{...f}),d&&t.createElement(d,{...m})),n&&p&&t.createElement(q.ColumnResizer,{key:"ColumnResizer",resize:(o,w,R)=>n.dragHandler(o,e,w,R)}))})}sortIcon(s){if(!this.props.sort||s<0)return null;const r=this.props.sort[s].dir;return r?[t.createElement(h.IconWrap,{key:1,name:`sort-${r}-small`,icon:r==="asc"?g.sortAscSmallIcon:g.sortDescSmallIcon}),this.props.sort.length>1&&t.createElement("span",{key:2,className:"k-sort-order"},s+1)]:null}render(){return this.props.columnsMap.map((s,r)=>this.props.pressHandler&&t.createElement(v.ColumnDraggable,{key:r,pressHandler:this.props.pressHandler,dragHandler:this.props.dragHandler,releaseHandler:this.props.releaseHandler,ariaRowIndex:r+1},this.cells(s))||t.createElement("tr",{className:"k-table-row","aria-rowindex":r+1,role:"row"},this.cells(s)))}}C.registerForLocalization(b);exports.HeaderRow=b;