datatable error with width

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.js"></script>
<link rel="stylesheet" href="https://flow.bsb.group/static/css/datatables.min.e6eb98b568ff.css">
<link rel="stylesheet" href="https://flow.bsb.group/static/css/select2.min.4392c5bc0481.css">
<script src="https://flow.bsb.group/static/js/select2.min.3a77515644e0.js"></script>
<script src="https://flow.bsb.group/static/js/editor.select2.8d7f326e9d74.js"></script>
<script src="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.js"></script>
<table id="datatable"></table>

JavaScript

var last_day = Number("31")
var first_day = Number("1")
function checkins_rendering_data(data) {
  if (data.duration_hours > 0) {
    return data.duration_hours + " h"
  } else {
    return "-"
  }
}
function checkins_calculate_total_row(row) {
  total_hours = 0
  Object.entries(row).forEach(([key, value]) => {
    key = key.split("_")[1]
    if (key >= first_day && key <= last_day) {
      total_hours += value.duration_hours ? Number(value.duration_hours) : 0
    }
  })
  return total_hours + " h"
}

$(document).ready(function () {
 
  $.fn.dataTable.Buttons.defaults.dom.button.className = "btn"
  table = $("#datatable").DataTable({
    paging: false,
    info: false,
    searching: false,
    order: [],
    ajax: "https://gist.githubusercontent.com/thelittlewozniak/19ea87b7e4c78d992d24b0190f998300/raw/81dd0eea709719dac221ef8af049d9e089756efe/data.json",
    fixedColumns: true,
    keys: {
      editOnFocus: true,
      columns: ":not(:first-child)",
    },
    rowGroup: {
      dataSrc: "main_company",
    },
    fixedHeader: true,
    scrollCollapse: true,
    scrollX: true,
    autoWidth: true,
    layout: {
      bottomStart: {
      },
    },
    select: {
      style: "single",
    },
    columns: [
      {
        title: "Travailleurs",
        data: "worker.name",
        name: "worker",
        editField: "worker.id",
        width: "800px",
      },
      {
        title: "Entreprise",
        data: "company",
        name: "company",
        visible: false,
      },
      {
        title: "Entreprise",
        data: "main_company",
        name: "company",
        visible: false,
      },

      {
        title: "m 01",
        name: "date_" + Number("01"),
        data: "date_" + Number("01"),
        render: (data, type, row) => {
          return checkins_rendering_data(data)
        },
        editField: "date_" + Number("01") + ".duration_hours",
      },

      {
        title: "j 02",
        name: "date_" + Number("02"),
        data: "date_"...