Working with Laravel and Yajra DataTables: how can I enable inline editing using PHP and Ajax?

How to do inline editing with Yajra DataTables in Laravel?

I am trying to implement inline editing using Yajra DataTables in Laravel but I am having some trouble. I have already set up my DataTable and it is displaying my data correctly.

However, I now want to be able to edit the fields inline and save the changes to my database. I have researched on online resources and documentations but I could not seem to figure out how to do it.

If you have any experience with Yajra DataTables and inline editing in Laravel, It would be greatly appreciated if you could share some code or resources that can help me implement this feature. Thank you in advance for your help!

CustomerController.php

public function list(Request $request)
{
    $customers = Customer::orderBy('id', 'desc')->get();

    return DataTables::of($customers)
        ->addIndexColumn()
        ->addColumn('created_at', function ($customer) {
            return $customer->created_at->format('d.m.Y H:i:s');
        })
        ->addColumn('name', function ($customer) {
            return $customer->name;
        })
        ->addColumn('phone', function ($customer) {
            return $customer->phone;
        })
        ->addColumn('status', function ($customer) {
            return $customer->status?->title;
        })
        ->addColumn('treatment', function ($customer) {
            return $customer->treatment?->title;
        })
        ->addColumn('action', function ($row) {
            $btn = '<a href="' . route('customer.edit', $row) . '" class="btn btn-primary btn-sm">Düzenle</a>';
            $btn .= '<form action="' . route('customer.destroy', $row) . '" method="post" class="d-inline-block">
                ' . csrf_field() . '
                ' . method_field('DELETE') . '
                <button class="btn btn-danger btn-sm" type="submit" onclick="return confirm('Silmek istediğinize emin misiniz?')">Sil</button>
            </form>';
            return $btn;
        })
        ->rawColumns(['action', 'name'])
        ->make(true);
}

customer/index.blade.php

@extends('layouts.app')
@section('title', 'Müşteriler')
@section('css')
    <link href="{{ asset('assets/lib/select2/css/select2.min.css') }}" rel="stylesheet">
    <link href="//cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
@endsection
@section('content')
    <div class="slim-mainpanel">
        <div class="container">

            @if(session('success'))
                <div class="alert alert-solid alert-success mg-t-25" role="alert">
                    {{ session('success') }}
                </div>
            @endif

            <div class="section-wrapper mg-t-20">
                <div class="report-summary-header">
                    <div>
                        <h4 class="tx-inverse mg-b-3">Müşteriler</h4>
                        <p class="mg-b-0">Müşterilerin listelendiği sayfadır.</p>
                    </div>
                    <div>
                        <a href="{{ route('customer.create') }}" class="btn btn-primary"><i
                                class="icon ion-ios-plus-outline tx-24"></i> Yeni Ekle</a>
                    </div>
                </div><!-- d-flex -->

                <div class="table-responsive">
                    <table class="table table-bordered table-colored" id="customers">
                        <thead>
                        <tr>
                            <th class="wd-5p">#</th>
                            <th>Kayıt Tarihi</th>
                            <th>Adı</th>
                            <th>Telefon</th>
                            <th>Durum</th>
                            <th>Tedavi</th>
                            <th>İşlem</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <br>
                </div><!-- table-wrapper -->
            </div><!-- section-wrapper -->

        </div><!-- container -->
    </div><!-- slim-mainpanel -->
@endsection
@section('js')
    <script src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="{{ asset('assets/lib/moment/js/moment.js') }}"></script>
    <script src="{{ asset('assets/lib/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/lib/jquery-ui/js/jquery-ui.js') }}"></script>
    <script src="{{ asset('assets/js/app.js') }}"></script>
    <script>
        $('#customers').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('customer.list') }}",
            columns: [
                {data: 'DT_RowIndex'},
                {data: 'created_at'},
                {data: 'name'},
                {data: 'phone'},
                {data: 'status'},
                {data: 'treatment'},
                {
                    data: 'action',
                    name: 'action',
                    orderable: true,
                    searchable: true
                },
            ],
            search: {
                return: true,
            },
            language: {
                "url": "//cdn.datatables.net/plug-ins/1.13.4/i18n/tr.json"
            },
        });
    </script>
@endsection