How to trim a string in a yajra datatable used a raw query in laravel

I have a problem on how to trim string in my datatable from a query where in used a raw query to get data from the database.

my query example is

public function data()
    {
        return DB::table('query_table')
            ->select([
                DB::raw('query_table.data1 AS data1'),
                DB::raw('query_table2.data2 AS data2'),
            ])
            ->join('query_table2','query_table2.query_table_id','=','query_table.id')
            ->where(['query_table.id' => 1])
            ->orderByDesc('query_table.data1')
            ->get();
    }

from controller for my data table

public function dataDataTable()
    {
        $data = $this->query->data(); //query of data

        return DataTables::of($data)
            ->addIndexColumn()
            ->make(true);
    } 

I am using datatables as view in laravel

@extends('layouts.main' , ['title' => trans('label.data.table')])

    @include('includes.datatable_assets')

    @push('after-styles')

        @include('includes.custom_assets')
    @endpush
    @section('content')
        <div class="card">
            <div class="card-body">
                <header class="card-header card-header-custom">
                    <h2 class="card-title" style="color: white" >{!! trans('label.table.header') !!}</h2>
                </header>
                <div class="" id="list-all">
                    <table class="display" id="templates-table">
                        <thead>
                        <tr>
                            <th>@lang('label.sn')</th>
                            <th>@lang('label.data1')</th>
                            <th>@lang('label.data2')</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    @endsection

    @push('after-scripts')

        <script  type="text/javascript">

            $('#templates-table').DataTable({
                processing: true,
                serverSide: true,

                ajax: '{!! route('query.datatable.route') !!}',
                type: 'get',
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false, width: '5%'},
                    {data: 'data1', name: 'data1', orderable: false, searchable: true, width: '65%'},
                    {data: 'data2', name: 'data2', orderable: false, searchable: true, width: '35%'},      
                ],
        </script>

    @endpush

How do I trim data1 string so as can be seen with few characters in my datatable view ?

via Chebli Mohamed