Fixed column in prime react datatable without jquery

Question

I'm trying to make one of my columns in a datatable fixed. I reseached from different sources and I found a solution with jquery. However, I want to do it without jquery solution. Could you give me some tips if I can do it with html, css or just js.

This is the css for my table:

#invoiceTable {

    
    margin-top: 1.2rem;
    margin: 5px;
    .p-datatable-wrapper {
      overflow: auto;
      height: auto;
      border-bottom: 1px solid #e9ecef;

      .p-datatable-thead {
        tr {
          th:nth-child(27) {
            display: flex;
            flex-direction: row;
            position: fixed;
          }
         
        }
      }
    }
    .p-paginator {
      padding: 0;
      display: flex;
      justify-content: start;
      .p-paginator-left-content {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

nth-child(27) is the column I want to make fixed, it is the last column.

I will be very grateful, if you could help me out.

Luiz Avila · Accepted Answer · 2022-04-09 13:58:37Z

2

with prime react datatable you need to set the datatable as scrollable and the column as frozen, like this:

<DataTable value={products} responsiveLayout="scroll" scrollable>
      ... Other columns
      <Column
        field="category"
        header="Category frozen"
        frozen
        alignFrozen="right"
      ></Column>
    </DataTable>

Here is a sandbox with the frozen column https://codesandbox.io/s/charming-sun-6lnd1w

EDIT: I updated the sandbox to have autoLayout and no responsiveLayout and it still works the same https://codesandbox.io/s/damp-voice-38mjwu

edited Apr 9, 2022 at 13:58

answered Apr 7, 2022 at 10:03

Luiz Avila

1,3769 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gabriel Daskalov Over a year ago

Thank you for the answer, Luiz! I added the properties. However, when I scroll to it, only the column header stays, and not the body. I suppose that I should add something in the body template, but don't know what. I checked the primereact doc about this, but they use very simple body as mine. Here you can check my code: pastebin.com/01Js1Rn6

Gabriel Daskalov Over a year ago

I also use autoLayout property, and not responsiveLayout, because we are using shrink function for the columns.

Melloware Over a year ago

@GabrielDaskalov please update the Code Sandbox reproducer to reproduce your issue so we can see it

rishabh singh Oct 22 at 11:36

how do we do this if using prime react unstyled version ?

Collectives™ on Stack Overflow

Fixed column in prime react datatable without jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related