SOLVED

How can you customize list headers in a modern page? (View Formatting)

%3CLINGO-SUB%20id%3D%22lingo-sub-774307%22%20slang%3D%22en-US%22%3EHow%20can%20you%20customize%20list%20headers%20in%20a%20modern%20page%3F%20(View%20Formatting)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-774307%22%20slang%3D%22en-US%22%3E%3CP%3EView%20formatting%20with%20rowFormatter%20and%20column%20formatting%20has%20been%20a%20godsend%2C%20but%20I%20can't%20find%20any%20way%20short%20of%20SPFx%20injection%20to%20reformat%20the%20headers%20to%20match%20my%20column%20layouts.%20The%20problem%20with%20SPFx%20is%20that%20I'm%20only%20an%20SCA%20and%20I%20don't%20see%20how%20I%20can%20deploy%20a%20solution%20without%20local%20admin%20rights%20on%20the%20tenant.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20Classic%2C%20I'd%20just%20insert%20a%20bit%20of%20javascript%20into%20the%20page%20to%20hide%20the%20existing%20headers%20and%20build%20new%20sticky%2Ffloating%20headers%20over%20top%20of%20them.%20But%20I%20don't%20have%20that%20option%20in%20Modern.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20there%20any%20other%20option%20to%20customizing%20the%20list%20headers%20in%20a%20Modern%20page%3F%20It%20seems%20like%20a%20massive%20oversight%20when%20there's%20so%20much%20flexibility%20in%20customizing%20the%20list%20content.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-774307%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-774336%22%20slang%3D%22en-US%22%3ERe%3A%20How%20can%20you%20customize%20list%20headers%20in%20a%20modern%20page%3F%20(View%20Formatting)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-774336%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F382333%22%20target%3D%22_blank%22%3E%40jbenfield%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20know%20I'm%20not%20answering%20your%20question%20directly%20but%20you%20reference%20%22sticky%20headers%22%20in%20your%20post.%20If%20that%20is%20all%20the%20functionality%20you%20need%20it%20should%20be%20or%20is%20coming%20to%20your%20tenant%20soon.%20It%20was%20announced%20via%20the%20SharePoint%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2FMicrosoft-SharePoint-Blog%2FJanuary-2019-SharePoint-Modernization-News%2Fba-p%2F320552%22%20target%3D%22_self%22%3Eblog%3C%2FA%3E.%3C%2FP%3E%3CBLOCKQUOTE%3E%3CP%3E%3CSTRONG%3E%3CEM%3EComing%20in%20March%202019.%3C%2FEM%3E%3C%2FSTRONG%3E%3CSPAN%3E%26nbsp%3B%20Libraries%20and%20lists%20can%20get%20extremely%20large%20%E2%80%93%20up%20to%2030%20million%20items%20in%20a%20single%20list.%26nbsp%3B%20Soon%2C%20as%20you%20scroll%20down%20through%20ever-larger%20lists%2C%20SharePoint%20keeps%20the%20column%20headers%20pinned%20at%20the%20top%20of%20the%20scrolling%20window.%26nbsp%3B%20This%20helps%20you%20identify%20list%20values%20as%20you%20move%20vertically%20and%20horizontally%20through%20the%20view.%26nbsp%3B%20Column%20headers%20will%20also%20remain%20in%20place%20inside%20the%20list%2Flibrary%20web%20parts.%3C%2FSPAN%3E%3C%2FP%3E%3C%2FBLOCKQUOTE%3E%3CP%3E%3CSPAN%3EIt's%20in%20my%20tenant%20and%20works%20well.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20hope%20this%20helps.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3ENorm%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-775076%22%20slang%3D%22en-US%22%3ERe%3A%20How%20can%20you%20customize%20list%20headers%20in%20a%20modern%20page%3F%20(View%20Formatting)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-775076%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20for%20that%2C%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F111382%22%20target%3D%22_blank%22%3E%40Norman%20Young%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20really%20do%20appreciate%20that%20Microsoft%20is%20adding%20in%20some%20of%20the%20most%20common%20%22hacks%22%20that%20people%20have%20been%20using%20over%20the%20years.%20But%20I%20wish%20that%20they'd%20left%20jslink%20in%20place%20so%20that%20we%20had%20some%20alternatives%20while%20they%20filled%20out%20the%20feature%20set.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENow%20if%20I%20can%20just%20make%20those%20headers%20match%20my%20customized%20data%20views%2C%20I'll%20be%20all%20set%3A)%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%2C%20again!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-775577%22%20slang%3D%22en-US%22%3ERe%3A%20How%20can%20you%20customize%20list%20headers%20in%20a%20modern%20page%3F%20(View%20Formatting)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-775577%22%20slang%3D%22en-US%22%3E%3CP%3ESo%2C%20I%20found%20a%20kind%20of%20ugly%20way%20to%20do%20what%20I%20needed%20by%20adding%20titles%20to%20every%20record%20block%20and%20then%20hiding%20them%20if%20they're%20not%20the%20first%20display%20row.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3E%22display%22%3C%2FSPAN%3E%3CSPAN%3E%3A%20%3C%2FSPAN%3E%3CSPAN%3E%22%3Dif(%40rowIndex%20%3D%3D%200%2C%20'flex'%2C%20'none')%22%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FP%3E%3CDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FDIV%3E%3CP%3EHere''s%20the%20raw%20list%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20872px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F124648i6988E96A678A567C%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%222019-07-26_13-21-09.png%22%20title%3D%222019-07-26_13-21-09.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EFormatted%20%22pseudo-headers%22%20and%20data.%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20306px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F124657iC0420B94EF369668%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%222019-07-26_14-31-11.png%22%20title%3D%222019-07-26_14-31-11.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EUnfortunately%2C%20the%20headers%20aren't%20responsive%2C%20it's%20not%20inherited%20by%20QuickEdit%20and%20it's%20missing%20the%20sorts%20and%20filtering%20of%20the%20real%20headers.%20But%20you%20could%20conceivably%20add%20the%20code%20to%20do%20it%20if%20needed.%20They%20also%20aren't%20sticky%2Ffloating.%20But%20it's%20still%20functional%20for%20what%20I%20needed.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20full%20json%20view%20formatting%20for%20the%20example%20is%20below.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3E%7B%0A%20%20%20%20%22%24schema%22%3A%20%22%3CA%20href%3D%22%26lt%3Ba%20href%3D%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%20target%3D%22_blank%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%3C%2FA%3E%22%20target%3D%22_blank%22%26gt%3B%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%26lt%3B%2Fa%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%3C%2FA%3E%26gt%3B%22%2C%0A%20%20%20%20%22hideSelection%22%3A%20true%2C%0A%20%20%20%20%22hideColumnHeader%22%3A%20true%2C%0A%20%20%20%20%22rowFormatter%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%22_comment_%22%3A%20%22div-RecBlock%22%2C%0A%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20%22flex%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22flex-direction%22%3A%20%22column%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22flex-wrap%22%3A%20%22nowrap%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22flex-align%22%3A%20%22flex-start%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22text-align%22%3A%20%22center%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%22250px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22margin-bottom%22%3A%20%2210px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22background-color%22%3A%20%22lightgrey%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22border-radius%22%3A%20%228px%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22_comment_%22%3A%20%22div-title-row%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20%22%3Dif(%40rowIndex%20%3D%3D%200%2C%20'flex'%2C%20'none')%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22flex-direction%22%3A%20%22row%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22flex-wrap%22%3A%20%22nowrap%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22background-color%22%3A%20%22blue%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%20%3A%20%22white%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22font-weight%22%3A%20%22bold%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22border-radius%22%3A%20%224px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22_comment_%22%3A%20%22div-title-col1%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22Index%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%2240px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22_comment_%22%3A%20%22div-title-col2%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22Text%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%22210px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22_comment_%22%3A%20%22div-data-row1%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20%22flex%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22flex-direction%22%3A%20%22row%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22flex-wrap%22%3A%20%22nowrap%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22_comment_%22%3A%20%22div-data-col1%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%3D%5B%24ID%5D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%2240px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22_comment_%22%3A%20%22div-col-col2%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%3D%5B%24Title%5D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%22210px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22_comment_%22%3A%20%22div-data-row2%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20%22flex%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22flex-direction%22%3A%20%22row%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22flex-wrap%22%3A%20%22nowrap%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22_comment_%22%3A%20%22div-data-col1%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%20%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%2240px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22_comment_%22%3A%20%22div-col-col2%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%3D%5B%24Line2%5D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%22210px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22_comment_%22%3A%20%22div-data-row3%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20%22flex%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22flex-direction%22%3A%20%22row%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22flex-wrap%22%3A%20%22nowrap%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22_comment_%22%3A%20%22div-data-col1%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%20%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%2240px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22_comment_%22%3A%20%22div-col-col2%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%3D%5B%24line3%5D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%22210px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20case%20you're%20wondering%2C%20this%20is%20what%20I%20was%20trying%20to%20produce%3A%3C%2FP%3E%3CP%3EIt's%20not%20pretty%2C%20but%20I'm%20trying%20to%20get%20a%20team%20onto%20sharepoint%20and%20this%20what%20they're%20used%20to%20seeing%20in%20the%20old%20system.%20Baby%20steps.%20When%20they%20click%20on%20the%20%22site%20name%22%2C%20it%20invokes%20EditProps%20which%20takes%20them%20to%20a%20more%20%22SharePoint-esque%22%20PowerApps%20form.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20762px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F124660iE8719C01AB171673%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%222019-07-26_14-39-06.png%22%20title%3D%222019-07-26_14-39-06.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1125255%22%20slang%3D%22en-US%22%3ERe%3A%20How%20can%20you%20customize%20list%20headers%20in%20a%20modern%20page%3F%20(View%20Formatting)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1125255%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F39834%22%20target%3D%22_blank%22%3E%40Chris%20Kent%3C%2FA%3E%2C%20might%20you%20be%20able%20to%20assist%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F382333%22%20target%3D%22_blank%22%3E%40jbenfield%3C%2FA%3E%2C%20myself%2C%20and%20others%20who%20need%20to%20modify%2Fstyle%2Fcustomize%20the%20headers%20for%20modern%20lists%3F%20I've%20not%20been%20able%20to%20find%20examples%20or%20guidance%20via%20%3CA%20href%3D%22https%3A%2F%2Fsharepoint.github.io%2Fsp-dev-list-formatting%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Fsharepoint.github.io%2Fsp-dev-list-formatting%2F%3C%2FA%3E%26nbsp%3Bor%20Google%20Search.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EFor%20example%3A%3C%2FSPAN%3E%3C%2FP%3E%3CUL%3E%3CLI%3E%3CSPAN%3EFloating%2FSticky%20List%20Header%3C%2FSPAN%3E%3C%2FLI%3E%3CLI%3E%3CSPAN%3EColumn%20Header%20with%20Word%2FLine%20Wrap-%20CSS%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2Fhyphens%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehyphens%3C%2FA%3E%2C%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2Foverflow-wrap%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Eoverflow-wrap%3C%2FA%3E%2C%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2Fwhite-space%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ewhite-space%3C%2FA%3E%2C%20and%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2Fword-break%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Eword-break%3C%2FA%3E%26nbsp%3Bproperties%3C%2FSPAN%3E%3C%2FLI%3E%3CLI%3E%3CSPAN%3ECustom%20Column%20Filters%2FContext%20Menu%3C%2FSPAN%3E%3C%2FLI%3E%3CLI%3E%3CSPAN%3EColumn%20Alignment-%20left%2C%20center%2C%20right%3C%2FSPAN%3E%3C%2FLI%3E%3C%2FUL%3E%3C%2FLINGO-BODY%3E
New Contributor

View formatting with rowFormatter and column formatting has been a godsend, but I can't find any way short of SPFx injection to reformat the headers to match my column layouts. The problem with SPFx is that I'm only an SCA and I don't see how I can deploy a solution without local admin rights on the tenant. 

 

In Classic, I'd just insert a bit of javascript into the page to hide the existing headers and build new sticky/floating headers over top of them. But I don't have that option in Modern. 

 

Is there any other option to customizing the list headers in a Modern page? It seems like a massive oversight when there's so much flexibility in customizing the list content. 

 

 

4 Replies

Hi @jbenfield,

 

I know I'm not answering your question directly but you reference "sticky headers" in your post. If that is all the functionality you need it should be or is coming to your tenant soon. It was announced via the SharePoint blog.

Coming in March 2019.  Libraries and lists can get extremely large – up to 30 million items in a single list.  Soon, as you scroll down through ever-larger lists, SharePoint keeps the column headers pinned at the top of the scrolling window.  This helps you identify list values as you move vertically and horizontally through the view.  Column headers will also remain in place inside the list/library web parts.

It's in my tenant and works well.

 

I hope this helps.

 

Norm

Thanks for that, @Norman Young 

 

I really do appreciate that Microsoft is adding in some of the most common "hacks" that people have been using over the years. But I wish that they'd left jslink in place so that we had some alternatives while they filled out the feature set. 

 

Now if I can just make those headers match my customized data views, I'll be all set :)

 

Thanks, again!

 

Best Response confirmed by jbenfield (New Contributor)
Solution

So, I found a kind of ugly way to do what I needed by adding titles to every record block and then hiding them if they're not the first display row. 

 

"display": "=if(@rowIndex == 0, 'flex', 'none')",

 

Here''s the raw list:

2019-07-26_13-21-09.png

Formatted "pseudo-headers" and data.

2019-07-26_14-31-11.png

Unfortunately, the headers aren't responsive, it's not inherited by QuickEdit and it's missing the sorts and filtering of the real headers. But you could conceivably add the code to do it if needed. They also aren't sticky/floating. But it's still functional for what I needed. 

 

The full json view formatting for the example is below. 

 

 

{
    "$schema": "<a href="<a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a>" target="_blank"><a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a</a>>",
    "hideSelection": true,
    "hideColumnHeader": true,
    "rowFormatter": {
        "elmType": "div",
        "_comment_": "div-RecBlock",
        "style": {
            "display": "flex",
            "flex-direction": "column",
            "flex-wrap": "nowrap",
            "flex-align": "flex-start",
            "text-align": "center",
            "width": "250px",
            "margin-bottom": "10px",
            "background-color": "lightgrey",
            "border-radius": "8px"
        },
        "children": [
            {
                "elmType": "div",
                "_comment_": "div-title-row",
                "style": {
                    "display": "=if(@rowIndex == 0, 'flex', 'none')",
                    "flex-direction": "row",
                    "flex-wrap": "nowrap",
                    "background-color": "blue",
                    "color" : "white",
                    "font-weight": "bold",
                    "border-radius": "4px"
                },
                "children": [
                    {
                        "elmType": "div",
                        "_comment_": "div-title-col1",
                        "txtContent": "Index",
                        "style": {
                            "width": "40px"
                        }
                    },
                    {
                        "elmType": "div",
                        "_comment_": "div-title-col2",
                        "txtContent": "Text",
                        "style": {
                            "width": "210px"
                        }
                    }
                ]
            },
            {
                "elmType": "div",
                "_comment_": "div-data-row1",
                "style": {
                    "display": "flex",
                    "flex-direction": "row",
                    "flex-wrap": "nowrap"
                 },
                "children": [
                    {
                        "elmType": "div",
                        "_comment_": "div-data-col1",
                        "txtContent": "=[$ID]",
                        "style": {
                            "width": "40px"
                        }
                    },
                    {
                        "elmType": "div",
                        "_comment_": "div-col-col2",
                        "txtContent": "=[$Title]",
                        "style": {
                            "width": "210px"
                        }
                    }
                ]
            },
            {
                "elmType": "div",
                "_comment_": "div-data-row2",
                "style": {
                    "display": "flex",
                    "flex-direction": "row",
                    "flex-wrap": "nowrap"
                 },
                "children": [
                    {
                        "elmType": "div",
                        "_comment_": "div-data-col1",
                        "txtContent": " ",
                        "style": {
                            "width": "40px"
                        }
                    },
                    {
                        "elmType": "div",
                        "_comment_": "div-col-col2",
                        "txtContent": "=[$Line2]",
                        "style": {
                            "width": "210px"
                        }
                    }
                ]
            },
            {
                "elmType": "div",
                "_comment_": "div-data-row3",
                "style": {
                    "display": "flex",
                    "flex-direction": "row",
                    "flex-wrap": "nowrap"
                 },
                "children": [
                    {
                        "elmType": "div",
                        "_comment_": "div-data-col1",
                        "txtContent": " ",
                        "style": {
                            "width": "40px"
                        }
                    },
                    {
                        "elmType": "div",
                        "_comment_": "div-col-col2",
                        "txtContent": "=[$line3]",
                        "style": {
                            "width": "210px"
                        }
                    }
                ]
            }

        ]
    }
}

 

 

In case you're wondering, this is what I was trying to produce:

It's not pretty, but I'm trying to get a team onto sharepoint and this what they're used to seeing in the old system. Baby steps. When they click on the "site name", it invokes EditProps which takes them to a more "SharePoint-esque" PowerApps form. 

 

2019-07-26_14-39-06.png

@Chris Kent, might you be able to assist @jbenfield, myself, and others who need to modify/style/customize the headers for modern lists? I've not been able to find examples or guidance via https://sharepoint.github.io/sp-dev-list-formatting/ or Google Search.

 

For example: