Id column values empty on datatable.js

i got some issue showing one of my database column which is id. For whatever reason all my values are empty as shown on screenshoot. Does anyone knows what could be the reason? Below related code:
**
DataTable js script:**

$(document).ready(function () {
  var table = $("#dataTb").DataTable({
    scrollY: "300px",
    scrollCollapse: true,
    paging: true,
    ajax: "/api/data",
    serverSide: true,
    success: function (ajax) {
      console.log("test.js >> DataTable ajax >>>" + JSON.stringify(ajax));
    },
    columns: [
      { data: "id", searchable: false },
      { data: "first_name" },
      { data: "email", searchable: false },
    ],
    columnDefs: [
      {
        defaultContent: "-",
        targets: "_all",
      },
    ],
  });

View's related api call:

@views.route('/api/data')
def data():
    flash('/api/data', category='success')
    query = User.query
    print(query)
    # search filter
    search = request.args.get('search[value]')
    if search:
        query = query.filter(db.or_(
            User.first_name.like(f'%{search}%'),
            User.email.like(f'%{search}%')
        ))
    total_filtered = query.count()

    # sorting
    order = []
    i = 0
    while True:
        col_index = request.args.get(f'order[{i}][column]')
        if col_index is None:
            break
        col_name = request.args.get(f'columns[{col_index}][data]')
        if col_name not in ['id', 'first_name', 'email']:
            col_name = 'first_name'
        descending = request.args.get(f'order[{i}][dir]') == 'desc'
        col = getattr(User, col_name)
        if descending:
            col = col.desc()
        order.append(col)
        i += 1
    if order:
        query = query.order_by(*order)

    # pagination
    start = request.args.get('start', type=int)
    length = request.args.get('length', type=int)
    query = query.offset(start).limit(length)

    for i in query:
        print(str(i.id) + i.first_name)

    # response
    return {
        'data': [user.to_dict() for user in query],
        'recordsFiltered': total_filtered,
        'recordsTotal': User.query.count(),
        'draw': request.args.get('draw', type=int)
    }

HTML:

<div class="container">
  <div class="row">
    <div class="col-xl-12">
      <button id="buttonDelete">Delete selected row</button>
      <table id="dataTb" class="table table-striped table-hover">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>

Screenshoot (see highlited on red):

I know for sure after debug in def data(): at this point:

for i in query:
print(str(i.id) + i.first_name)

all ids are filled out

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.