I'M using library table react-data-table-component, trying to have one row get free overflow.

 <DataTable 
                  data={data}
                  tableColumns={orderListColumns}
                  emptyText="Geen gegevens aan te tonen..."
                  disablePagination={false}
                  hasFilter={true}
                  loading={loading}
                  paginationRowsPerPageOptions={[
                    20, 40, 80, 120, 200, 400, 800,
                  ]}
                  paginationPerPage={20}
                  t={t}
                />

 <DataTable 
                  data={data}
                  tableColumns={orderListColumns}
                  emptyText="Geen gegevens aan te tonen..."
                  disablePagination={false}
                  hasFilter={true}
                  loading={loading}
                  paginationRowsPerPageOptions={[
                    20, 40, 80, 120, 200, 400, 800,
                  ]}
                  paginationPerPage={20}
                  t={t}
                />

 {
    name: '',
    selector: (row: any) => (
      <>
        {outOfStockHandler(row) ? (
          <div
            style={{ height: 16, width: 16 }}
            className="mx-auto rounded-circle bg-secondary-green ml-auto"
          />
        ) : (
          <div
            style={{ height: 16, width: 16 }}
            className="mx-auto rounded-circle bg-danger ml-5 ml-auto"
          />
        )}

        {row?.new_status && (
          <div
            className="position-absolute "
            style={{ top: -14, left: -40, height: 80, width: 80, zIndex: 99 }}
          >
            <Image
              style={{ height: 160, width: 160 }}
              height="160"
              width="160"
              className="img-new"
              src={require(locale === 'de'
                ? `@/assets/logos/new_de.png`
                : locale === 'en'
                ? `@/assets/logos/new_en.png`
                : `@/assets/logos/new_nl.png`)}
            />{' '}
          </div>
        )}
      </>
    ),
    width: '40px',
    style: { zIndex: '90000' },
    compact: true,
    allowOverflow: true,
    right: true,
  },

 {
    name: '',
    selector: (row: any) => (
      <>
        {outOfStockHandler(row) ? (
          <div
            style={{ height: 16, width: 16 }}
            className="mx-auto rounded-circle bg-secondary-green ml-auto"
          />
        ) : (
          <div
            style={{ height: 16, width: 16 }}
            className="mx-auto rounded-circle bg-danger ml-5 ml-auto"
          />
        )}

        {row?.new_status && (
          <div
            className="position-absolute "
            style={{ top: -14, left: -40, height: 80, width: 80, zIndex: 99 }}
          >
            <Image
              style={{ height: 160, width: 160 }}
              height="160"
              width="160"
              className="img-new"
              src={require(locale === 'de'
                ? `@/assets/logos/new_de.png`
                : locale === 'en'
                ? `@/assets/logos/new_en.png`
                : `@/assets/logos/new_nl.png`)}
            />{' '}
          </div>
        )}
      </>
    ),
    width: '40px',
    style: { zIndex: '90000' },
    compact: true,
    allowOverflow: true,
    right: true,
  },