CODEWITHSUNDEEP
cssreactjsdatatableprimereact
Gabriel Daskalov
Gabriel Daskalov

Reputation: 61

Fixed column in prime react datatable without jquery

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.

Upvotes: 1

Views: 2478

Answers (1)

Luiz Avila
Luiz Avila

Reputation: 1366

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

Upvotes: 2

Related Questions