Lock in the top row (header row)

In a node.js application: How can I lock the top row of a table in place, similar to Excel's freeze panes feature?

I think this might involve using some CSS styling, but I'm not exactly sure how to achieve it. When I tried using fixed, the entire table was frozen instead of just the top row. This meant that when new items appeared below the visible area of the browser window, no vertical scroll bars were shown to access them. Using sticky didn't seem to work either.

.css

#one {
  position: fixed;
  top: 100px;
  left: 15px;
}

app.js

<div className="row" id="one">
            <table className="table-hover">
                <thead>
cssnode.jsreactjsexpress

Answer №1

Looking for a way to create an Excel-like fixed table head? One solution involves using the position: sticky; property, which is both classy and practical. Simply click on the first row to make it stick:

th, td {
    width: 100px;
    height: 100px;
    background-color: #eee;
    text-align: center;
    border-bottom: 2px solid transparent;
}
tr.sticks {
    cursor: pointer;
}
tr.stuck th {
    position: sticky;
    top: 0px;
    border-bottom: 2px solid #000;
}
<table>
    <tbody>
        <tr class="sticks" onclick='this.className = this.className == "sticks" ? "sticks stuck" : "sticks";'>
            <th> Name </th>
            <th> Amount </th>
            <th> Date </th>
            <th> Color </th>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
    </tbody>
</table>

If you prefer a JavaScript approach, there's another option that provides more usability. This method allows multiple rows to be stuck at the top of the table. Once again, simply click on a row to stick it:

td {
    width: 100px;
    height: 100px;
    background-color: #eee;
    text-align: center;
    border-bottom: 2px solid transparent;
}
#table-head {
    top: 0px;
    position: fixed;
}
#table-head td {
    border-bottom: 2px solid #000;
    background-color: #ddd;
}
<table id="table">
    <thead id="table-head"></thead>
    <tbody id="table-body">
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    var table_head = document.getElementById("table-head");
    var table_body = document.getElementById("table-body");
    var stick_it = function(el) {
        var row_html = el.outerHTML.replace("stick_it(this);", "unstick_it(this);");
        el.remove();
        table_head.innerHTML += row_html;
        table.style.paddingTop = table_head.children.length * 104 + "px";
    }
    var unstick_it = function(el) {
        var row_html = el.outerHTML.replace("unstick_it(this);", "stick_it(this);");
        el.remove();
        table_body.innerHTML += row_html;
        table.style.paddingTop = table_head.children.length * 104 + "px";
    }
</script>

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

How to retrieve the width of a document using jQuery?

Having a strange issue with determining the document width using $(document).width() during $(window).load and $(window).resize. The problem arises when the browser is initially full screen and then resized to a narrower width, causing content to require ...

javascriptjqueryhtmlcss

Challenge with dynamic parent routes

In my React application, different routes are loaded through various parent URLs. For example: {["/sat/", "/act/", "/gre/", "/gmat/", "/toefl/"].map((path) => ( <Route key={path} path={path ...

javascriptreactjsreact-router-dom

Is there a way to adjust the opacity of a background image within a div?

I have a lineup of elements which I showcase in a grid format, here's how it appears: https://i.stack.imgur.com/JLCei.png Each element represents a part. The small pictures are essentially background-images that I dynamically set within my html. Up ...

htmlcssangular

Tips for ensuring the border matches the size of the image

I am in the process of creating a website that includes a filter option. My plan is to have the filters displayed on the left side and the items on the right side. To achieve this layout, I have implemented a scrollable div for the items. However, I notic ...

javascripthtmlcss

Guide to utilizing JSDoc within your local project

Objective My goal is to utilize jsdocs with npm in my project. Experience I am new to working with npm and its plugins. Recently, I came across jsdoc and attempted to incorporate it into my project without success. Attempted Solution Initially, I inst ...

javascriptnode.jsubuntunpmjsdoc

Sending a PDF generated with jsPDF to an API without the need for downloading it from the front end

I have been successful in generating a PDF on the front end and downloading it using the code below. However, I am now faced with the challenge of sending this generated PDF to the server via an API call using fetch or Axios. Despite my research efforts, ...

reactjsaxiosfetchjspdfhtml2canvas

The relationship between two distinct servers: Express.js and Node.js

Working with the Express.js framework and Node.js, I am trying to make a request to an MS SQL database on the server side. My goal is to retrieve data (in JSON or array format) from the server and send it to the client side. I'm unsure about how to ...

javascriptnode.jsexpress

Guide to incorporating the content of a div into an image source using PHP

In extracting a value from an HTML table, I encountered this syntax: $('table#showalluporders tbody tr').click(function() { var tableData = $(this).closest("tr").children("td").map(function() { return $(this).text(); }).get(); $(' ...

phpjqueryhtmlcss

Listening for an event or using a CSS pseudo-class to detect when the scrollbar becomes

Are there any JavaScript event listeners or CSS pseudo classes that can detect when a scrollbar appears and disappears? For example, on Mac OS and Windows Internet Explorer 10 or newer, the scrollbars are hidden by default but appear when scrolling begins. ...

javascripthtmlcssjquery-eventspseudo-class

Managing authentication within getStaticProps requests

I am working on integrating a NextJs application with its backend in Laravel. Currently, all of our API routes in Laravel are secured using Laravel Sanctum to enhance security and prevent cross-site scripting attacks. One challenge I am facing is that th ...

reactjsnext.js

What is the best way to conceal an unordered list menu?

Trying to create a menu using ul HTML, but encountering an issue. When the website is opened, the menu shows up by default, whereas I only want it to appear when a mouse hovers over it. Even after attempting to change the CSS class, the desired functionali ...

cssbootstrap-4

Git bash is failing to recognize the 'node' command within 'npm run dev', even though Node and npm are already installed. Other shells are working correctly with this command

I've installed npm and node, attempting both NVM for Windows and direct installations. In Git Bash, 'npm -v' and 'node -v' commands work without issue. However, when I try to run 'npm run dev' or any other command, it ret ...

node.jswindowsbashgitnpm

A comprehensive guide on extracting matching date from MongoDB with Mongoose

I'm currently facing an issue with returning the appropriate records for a given date query in MongoDB and Mongoose. Despite my efforts, all rows are being returned instead. Below, you'll find the relevant code snippet as well as the model schem ...

node.jsmongodbmongoosemongodb-query

Logging in to Twitter using Passport middleware in a Node.js application

Ready to launch a website powered by Node.js and the Express framework, I've incorporated Twitter authentication using the passport module (http://passportjs.org) along with its accompanying Twitter wrapper: passport-twitter. Take a look at my server ...

node.jstwitteroauthexpresspassport-twitter

Having trouble adding Material UI to my fresh React application

Hello, I am a beginner in the realm of development and I am attempting to embark on creating a new React application that utilizes Material UI as the component library. However, I continuously encounter the error mentioned below: Here is a glimpse at my c ...

reactjsnpmmaterial-ui

What methods can be used to perform testing on a node.js websocket server?

I am currently utilizing sockjs with the standard configuration. var ws = sockjs.createServer(); ws.on('connection', function(conn) { conn.on('data', function(message) { wsParser.parse(conn, message) ...

node.jsunit-testingwebsocketmocha.jssockjs

The div is set to a position of absolute, causing the overflow-y property to be set to auto. As a

I am facing an issue with a div that has absolute positioning nested inside other divs. If you take a look at the code snippet below from http://jsfiddle.net/d8GYk/, you'll notice the styling properties applied to the div. <div style="position: ...

javascripthtmlcss

Obtaining the socket.io connection associated with the HTTP request

I am currently integrating socket.io with Express. For instance, if the user accesses the primary route /, and the request is directed to: app.get('/',function(req,res,next){ var msg =...; socket.emit('channel',msg); //how can ...

node.jssocketsexpresssocket.io

React.js - issue with input field losing focus while typing the letters "c" or "n"

Within a MenuItem from MaterialUI, I have an input field that resides inside a Menu. Strangely, the input fields lose focus only when typing the letters "c" or "n." https://i.stack.imgur.com/VWnd8.png A visual representation of a Menu with an input field ...

reactjsinputmaterial-uifocus

Explore a variety of images within an array using Gatsby and Markdown documents

After spending more than 6 hours on this, I've decided to call it quits for today. However, I'm hoping someone out there might have a solution. The problem at hand is as follows: I'm trying to include an array of images in a Markdown file t ...

javascriptreactjsgatsby