How to fixed specific headers and made the datatable scoll horizontally?

[lienyun]

I have read this docs but the data is too much, the datatable still too wide, and there is no scroll bar in my datatable. Could anyone help to open the scroll bar?

Here is my code:

infoHeaders.value = [
      { text: null, value: "title", fixed: true, width: 150 },
      { text: "0-1", value: "1" },
      { text: "1-2", value: "2" },
      { text: "2-3", value: "3" },
      { text: "3-4", value: "4" },
      { text: "4-5", value: "5" },
      { text: "5-6", value: "6" },
      { text: "6-7", value: "7" },
      { text: "7-8", value: "8" },
      { text: "8-9", value: "9" },
      { text: "9-10", value: "10" },
      { text: "10-11", value: "11" },
      { text: "11-12", value: "12" },
      { text: "12-13", value: "13" },
      { text: "13-14", value: "14" },
      { text: "14-15", value: "15" },
      { text: "15-16", value: "16" },
      { text: "16-17", value: "17" },
      { text: "17-18", value: "18" },
      { text: "18-19", value: "19" },
      { text: "19-20", value: "20" },
      { text: "20-21", value: "21" },
      { text: "21-22", value: "22" },
      { text: "22-23", value: "23" },
      { text: "23-24", value: "24" },
    ];

Here is my page:

Thank you!

[lienyun]

I found that I made a mistake as below:

.vue3-easy-data-table__main {
  /* overflow: initial !important; */
}

As I comment out these code, the scroll bar appear! Thank God.