Yajra datatables questions

Hello,

I installed yajra datatables version 12 on my laravel 12 project.

I have a few questions and I just don't understand the documentation.

1. On the Quick Starter instructions, it says:

"Next, we will install Laravel DataTables Vite to simplify our frontend setup.

npm i laravel-datatables-vite --save-dev

This will install the following packages:

• Bootstrap Icons
• DataTables with Buttons and Select plugins for Bootstrap 5
• Laravel DataTables custom scripts

Once installed, we can now configure our scripts and css needed for our application. resources/js/app.js

import './bootstrap'; import 'laravel-datatables-vite';

resources/sass/app.scss

// Fonts @import url('https://fonts.bunny.net/css?family=Nunito');

// Variables @import 'variables';

// Bootstrap @import 'bootstrap/scss/bootstrap';

// DataTables

@import 'bootstrap-icons/font/bootstrap-icons.css'; // This does not exist

@import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";

@import "datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css";

@import 'datatables.net-select-bs5/css/select.bootstrap5.css';

There is no folder called: bootstrap-icons anywhere. What am I missing?

2. How do I show a relationship value?

e.g. I have a table called green_beans, in the table there is a column: country_id which is a relationship to countries table. I need to display the country's name.

 public function getColumns(): array
    {
        return [
          
            Column::make('id'),
            Column::make('country_id'), // should be country name from countries table.
            Column::make('name'),
            Column::make('stock'),
              Column::computed('action')
                ->exportable(false)
                ->printable(false)
                ->width(60)
                ->addClass('text-center'),
        ];
    }

3. How do I add an Edit button on each row that will open the Edit page for that green bean. How do I get the green bean id here?

 public function dataTable(QueryBuilder $query): EloquentDataTable
    {
        return (new EloquentDataTable($query))
            ->addColumn('action', "<a href='greenbean/'" . green_bean->id // what do I put here? . " class='btn btn-sm btn-primary'>Edit</a>")
            ->setRowId('id');
    }

4. Why don't I see any of these buttons (excel, csv, pdf, etc.):

 public function html(): HtmlBuilder
    {
        return $this->builder()
            ->setTableId('greenbeans-table')
            ->columns($this->getColumns())
            ->minifiedAjax()
            ->orderBy(1)
            ->selectStyleSingle()
            ->buttons([
                Button::make('excel'),
                Button::make('csv'),
                Button::make('pdf'),
                Button::make('print'),
                Button::make('reset'),
                Button::make('reload')
            ]);
    }

The full code:

In the controller:

 public function index(GreenBeansDataTable $dataTable)
    {       
        return $dataTable->render('admin.green-beans.index');        
    }

GreenBeanDataTable:

<?php

namespace App\DataTables;

use App\Models\GreenBean;
use Illuminate\Database\Eloquent\Builder as QueryBuilder;
use Yajra\DataTables\EloquentDataTable;
use Yajra\DataTables\Html\Builder as HtmlBuilder;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;

class GreenBeansDataTable extends DataTable
{
    protected array $actions = ['myEdit'];
    /**
     * Build the DataTable class.
     *
     * @param QueryBuilder<GreenBean> $query Results from query() method.
     */
    public function dataTable(QueryBuilder $query): EloquentDataTable
    {
        return (new EloquentDataTable($query))
            //->addColumn('action', 'greenbeans.action')
            ->addColumn('action', "<a href='greenbean/'" . $query->id . " class='btn btn-sm btn-primary'>Edit</a>")
            ->setRowId('id');
    }

    /**
     * Get the query source of dataTable.
     *
     * @return QueryBuilder<GreenBean>
     */
    public function query(GreenBean $model): QueryBuilder
    {
        return $model->newQuery();
    }

    /**
     * Optional method if you want to use the html builder.
     */
    public function html(): HtmlBuilder
    {
        return $this->builder()
            ->setTableId('greenbeans-table')
            ->columns($this->getColumns())
            ->minifiedAjax()
            ->orderBy(1)
            ->selectStyleSingle()
            ->buttons([
                Button::make('excel'),
                Button::make('csv'),
                Button::make('pdf'),
                Button::make('print'),
                Button::make('reset'),
                Button::make('reload')
            ]);
    }

    /**
     * Get the dataTable columns definition.
     */
    public function getColumns(): array
    {
        return [
            Column::make('id'),
            Column::make('country'),
            Column::make('name'),
            Column::make('stock'),
            Column::computed('action')
                ->exportable(false)
                ->printable(false)
                ->width(60)
                ->addClass('text-center'),
        ];
    }

    /**
     * Get the filename for export.
     */
    protected function filename(): string
    {
        return 'GreenBeans_' . date('YmdHis');
    }
}

Please help.