How to Render Datatable Using Dt in R Shiny

I am working on a R shiny app that reads many .xpt files and displays the data in a table. The user can also choose which file to display by selecting the 'selectInput' option.

I use DT here to render the dtatable so that filter boxes appear by default. Unfortunately, the DataTable is not rendered. I am not able to figure it out the issue.

One more help: Since I am new to R shiny, I am not able to figure out where my datatable (on which variable, perhaps 'df') is kept so that I can use it to add extra functionality in the future.

Data:

Mat.xpt:

STUDYID DOMAIN  SUBID   MATSEQ
1        Mat    Mat_1    1
2        Mat    Mat_2    2
3        Mat    Mat_3    3
4        Mat    Mat_4    4
5        Mat    Mat_5    5
6        Mat    Mat_6    6
7        Mat    Mat_7    7

Cap.xpt

STUDYID DOMAIN  SUBID   MATSEQ
1        Cap    Cap_1    1
2        Cap    Cap_2    2
3        Cap    Cap_3    3
4        Cap    Cap_4    4
5        Cap    Cap_5    5
6        Cap    Cap_6    6
7        Cap    Cap_7    7

code

library(shiny)
library(haven)
library(stringr)
library(DT)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      fileInput("file1", "Choose CSV File",
                multiple = TRUE,
                accept = c(
                  "text/csv",
                  "text/comma-separated-values,text/plain",
                  ".csv", ".xpt"
                )
      ),
      tags$hr(),
      checkboxInput("header", "Header", TRUE),
      dataTableOutput("files_available")
    ),
    mainPanel(
      tableOutput("contents")
    )
  )
)

server <- function(input, output) {
  output$files_available <- renderUI({
    req(input$file1)
    selectInput("name", str_to_title("select which file to show"), choices = input$file1$name)
  })
  
  df <- reactive({
    req(input$name)
    read_xpt(input$file1$datapath[[which(input$file1$name == input$name)]])
  })
  
  output$files_available <- renderDataTable({
    datatable(df(), filter="top",options = list(lengthChange = FALSE),callback=JS("
           //hide column filters for the first two columns
          $.each([0, 1], function(i, v) {
                $('input.form-control').eq(v).hide()
              });"))})
  
    
}

shinyApp(ui, server)