Creating a fixed column in an Angular Material Table for enhanced user experience

Has anyone found a method to implement a sticky first column in Angular Material using CSS?

Check out the editable Stackblitz code here.

I attempted to modify this approach from https://jsfiddle.net/zinoui/BmLpV/, but encountered issues where the first column was displaced from the table and lost its styling.

<div class="zui-wrapper">
    <div class="zui-scroller">
        <table class="zui-table">
            <thead>
                <tr>
                    <th class="zui-sticky-col">Name</th>..........
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="zui-sticky-col">DeMarcus Cousins</td>
.......
                <tr>
            </tbody>
        </table>
    </div>
</div>


.zui-scroller {
    margin-left: 141px;
    overflow-x: scroll;
    overflow-y: visible;
    padding-bottom: 5px;
    width: 300px;
}
.zui-table .zui-sticky-col {
    border-left: solid 1px #DDEFEF;
    border-right: solid 1px #DDEFEF;
    left: 0;
    position: absolute;
    top: auto;
    width: 120px;
}
cssangularangular-material-5

Answer №1

Angular Material version 6 has simplified the process.

To make columns sticky on the left of the table, use the sticky tag. For columns on the right, use the stickyEnd tag.

Check out this Stackblitz example and the official documentation.

Answer №2

td:first-child, th:first-child {
  position:sticky;
  left:0;
  z-index:1;
  background-color:grey;
}

Answer №3

To accomplish this, I utilized stickyEnd as shown in the code snippet below.

 <ng-container matColumnDef="12" class="white-bg" stickyEnd>
</ng-container>

Answer №4

.mat-table-sticky:first-child {
    border-right: 1px solid #e0e0e0;
}
<ng-container
            matColumnDef="name"
            sticky
>
</ng-container>

`

.mat-table-sticky:first-child {
    border-right: 1px solid #e0e0e0;
}

`

Answer №5

Convert template.html code to a table element with the ID "table"

<table mat-table #table>

====Component.ts

 @ViewChild(MatTable) table!: MatTable<any>;

 ngAfterViewChecked(): void {
   if (this.table) {
     this.table.updateStickyColumnStyles();
   }
 }

Answer №6

This solution successfully resolved my issue:

:host ::ng-deep .mat-cell:first-child, .mat-header-cell:first-child {
  position: sticky;
  position: -webkit-sticky;
  right:0;
  z-index:1;
  background:inherit;
  border-left: 1px solid grey;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Explore various SVG paths by hovering to reveal or conceal different divs

Hi there, I'll do my best to explain clearly. If this question has already been asked, I apologize as I couldn't find an answer when searching. I've used SVG to create a map on my HTML webpage and it's looking great. I also have hidden ...

javascriptjqueryhtmlcsssvg

Ways to eliminate additional data points on the x-axis in Highcharts

I'm currently using Highcharts to plot data for specific ID's, but I'm experiencing a display issue where extra data points are showing up on the x-axis. I only want to show certain data points on the x-axis and am not sure how to remove the ...

angulartypescripthighcharts

Tips for preventing the ExpressionChangedAfterItHasBeenCheckedError while utilizing [(ngModel)] with a textarea element

I have developed a component that is responsible for managing the details of an object through a form. The object is defined within the app.component.ts: export class AppComponent { selectedItem: Item; } The object is passed into the component using tw ...

angulardata-binding

How to position a fixed element in relation to a wrapper div using HTML and CSS

I need assistance with positioning the floating box on the right side of the window on this particular page. My goal is to have this box relative to the white div containing all the text, so instead of it sticking to the window edge, it should float aroun ...

htmlcssposition

Avoiding the <br> tag in list items with TinyMCE

I am currently using tinyMCE and I needed to enable the "force_br_newlines: true" option. Without this setting, if I press the "Enter" key twice and check the source code, I only see one <br> tag. However, when I set the option to TRUE, it creates a ...

javascripthtmlcsstinymce

Getting data before the Router is loaded following authentication with Angular 2+ - A comprehensive guide

I'm hoping this isn't a repeat. Within my login component, I have a feature that allows users to log in, which calls a service and retrieves a Token. Upon successful login, the token is saved to localStorage. Subsequently, I use the getUserData ...

javascriptangularangular2-routing

What are some strategies for disregarding global CSS styles?

I am facing an issue on my html page with a specific div structure. The <div id="container">/* lots of nested html with elements like div, ul, li etc */</div> is causing some trouble in my global css file called style.css. The style. ...

htmlcss

The footer and login form are tangled up in a web of confusion

Here is my HTML code for a login form: <div class="middle-box text-center loginscreen"> <div> <form class="" role="form" action="index.html"> <div class="form-group&q ...

htmlcsstwitter-bootstrap

Does width change based on position?

When I set position:absolute for an element, its width remains constant regardless of the text inside. However, if I set position:relative for the same element, the width will adjust based on the text content. I have created a fiddle with two menus, each ...

css

What is the best way to minify and concatenate multiple CSS files only after converting SCSS to CSS with Gulp?

When attempting to convert my scss files to css files using gulp, I encountered an issue. After writing the scss code, it is easily converted to css. However, I wanted to minify this css and save it in a different folder called 'min'. Within the ...

javascripthtmlcsssassgulp

Tips for ensuring the page remains functional with the signOut feature even after a refresh

I am facing an issue with my website. On the home page, I have a sign-in and sign-out column. Then, on the user page, there is a sign-up form. When I sign out, it works fine but upon refreshing the page, it still shows as if the user is not signed out. Can ...

javascriptangular

Using CSS grid to wrap three divs simultaneously

Can CSS grid be utilized to style three divs so that they wrap simultaneously when the screen size decreases? This transition: +---------+--+---------+--+---------+ | div | | div | | div | +---------+--+---------+--+---------+ to this: +- ...

htmlcssgrid-layoutcss-grid

Ensure that the height of the div matches the height of the background image

Although I've seen similar questions before, none of the solutions seem to be effective in my case. In this scenario, there's a div class that has a background image set up: #index-box{ border-radius: 20px; background: url('/stati ...

htmlcssbootstrap-4

Is the Pure CSS hide/show technique using radio buttons causing a challenge with parent and descendant elements?

Exploring a CSS Show/Hide functionality using radio buttons is my current challenge. The snippet below demonstrates how smoothly it works. .refusal, .acceptance { display: none; } input#refusal:checked~.refusal { display: block; } input#acceptanc ...

htmlcsscss-selectorsshow-hide

Issues encountered when attempting to use Angular2 with SystemJs and typescript transpiler

I've encountered an issue with my TypeScript transpiler setup. My @angular component isn't loading, and I'm getting this error message: ZoneAwareError: "Error: core_1.Component is not a function Evaluating http://127.0.0.1:64223/app/app.c ...

angulartypescriptsystemjs

issues with jquery functionality on mobile devices

I'm currently working on a website where I've implemented a jQuery script to dynamically load specific parts of an HTML page with an ID of 'guts' into the main content area. The goal was to keep the menu consistent while only changing t ...

javascriptjqueryhtmlcss

Accessing a specific child div within a parent div using JavaScript and CSS

Struggling to target and modify the style of the child div within id="videoContainer" <div id="videoContainer"> <div style="width: 640px; height: 360px"> <------- this is the target <video src ...

javascripthtmlcssecmascript-6

Tips for synchronizing the height of a scrollable list-group column with a neighboring column

Within my Bootstrap 4 layout, I have a column on the left that includes a dynamically generated .list-group, which could potentially contain numerous .list-group-items. On the right side, there is another column showcasing multiple cards inside a .row. Th ...

cssbootstrap-4

Learn the art of perfectly aligning text in bootstrap 5

I am looking to align text in the same way shown in this image from Libre Office. Libra Office: https://i.sstatic.net/1dvVx.png This is how the webpage appears: https://i.sstatic.net/JnFSP.png Is there a way to make the webpage resemble the formatting i ...

htmlcssbootstrap-5

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

So I'm encountering an issue with this unique ts code: {/* Mobile Menu */} <div className="lg:hidden"> <button className="flex items-center w-8" onClick={toggleMenu}> {isMobileMenuOpen ? ( ...

cssreactjstypescriptcss-animations