1

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.

Gabriel Daskalov
  • 61
  • 1
  • 4

1 Answers1

1

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

Luiz Avila
  • 1,143
  • 8
  • 7
  • 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: https://pastebin.com/01Js1Rn6 – Gabriel Daskalov Apr 07 '22 at 10:31
  • I also use autoLayout property, and not responsiveLayout, because we are using shrink function for the columns. – Gabriel Daskalov Apr 07 '22 at 10:32
  • @GabrielDaskalov please update the Code Sandbox reproducer to reproduce your issue so we can see it – Melloware Apr 09 '22 at 12:28