Problem in datatable when use in livewire component

i use livewire defer loading for load data after rendering page. After opening the page, the information is successfully received and displayed in the table But the problem is that I use datatable and when the received information is displayed, datatable becomes a simple table. As if I did not use datatable at all.

class Cryptolist extends Component
    public bool $loadData = false;

    public function init()
        $this->loadData = true;

    public function render()
        try {
            if ($this->loadData) {
                $api = new \Binance\API('api','secret');
                $prices = $api->coins();
                $one = json_encode($prices, true);

                $coins = json_decode($one , true);
            } else {
                $coins = [];
            return view('livewire.backend.crypto.cryptolist')->with('coins' , $coins);
        }catch(\Exception $e)
            return view('wrong')->with('e' , $e);

And this is the component view where the table is located and displays the received information

<div wire:init="init">
    @if ($loadData)
    <div id="loadesh1" wire:ignore>
        <table class="datatable-init nk-tb-list nk-tb-ulist" data-auto-responsive="false">
                <tr class="nk-tb-item nk-tb-head">
                    <th class="nk-tb-col"><span class="sub-text">name</span></th>
                    <th class="nk-tb-col tb-col-mb"><span class="sub-text">balance</span></th>
                @foreach ($coins as $item => $value)
                <tr class="nk-tb-item">
                    <td class="nk-tb-col">
                        <div class="user-card">
                            <div class="user-avatar d-none d-sm-flex">

                                @if(file_exists(public_path() . '/img/crypto/'.strtolower($value['coin'].".svg")))
                                <img style="border-radius: 0"
                                    src="{{asset('/img/crypto/'.strtolower($value['coin']))}}.svg" class="img-fluid"
                                <img style="border-radius: 0"
                                    class="img-fluid" alt="">

                            <div class="user-info">
                                <span class="tb-lead english" style="font-weight: bolder">{{$value['name']}}</span>
                                <span class="english">{{$value['coin']}}</span>
                    <td class="nk-tb-col tb-col-mb" data-order="{{$value['coin']}}">
                        <div class="btn-group" aria-label="Basic example">
                            <button type="button" class="btn btn-sm btn-dim btn-light"
                                <div wire:loading wire:target="getBalance('{{$value['coin']}}')">
                                    <span class="spinner-border spinner-border-sm" role="status"
                                <span class="w-120px" id="coin-{{$value['coin']}}">get balance</span>
                            <button type="button" class="btn btn-sm btn-dim btn-primary">add coin</button>
                </tr><!-- .nk-tb-item  -->
    Loading data...

What do you think is the problem, what code is written incorrectly?

Datatables has a JavaScript element that takes the table html element and initialises it as a data table. I don’t see that in your code. After the Ajax call (with Livewire) you probably need to re-initialise the table. You can probably do that inside one the the event or livewire lifecycle hooks.