Your first table definition

First here's a small overview to quickly explain What a definition is and needs:

Both the javascript tag, as well as the AJAX data comes from 1 definition.
Your Table definitions are stored app/Http/Tables
just like console commands and form requests they need to be referenced in a kernel, app/Http/Kernel to be exact.
This definition is a class that extends DragonFly\Lists\Table where you are able to configure all your options.
It requires an Eloquent model instance to load data from

Now that that's out of the way we can get started with actually creating our first dataTable definition.

Let's create our first one, we'll make a table that shows all the users that have registered. (using the functionality that comes bundled with Laravel out of the box).

1. Generate the Table definition

The easiest way to start is to generate the class, there's a make:table to help you with this.

Preparation

Here's how we're going to tackle it:

We'll use the App\User model to load our data
In our table we'll want to show a few fields: 'name', 'email' and 'created_at'
Our kernel will use the string 'users' as identifier to load the data
We'll name the class UsersTable

Execute the `make:table` command

All right, let's do that! Here's how that translates to the make:table command:

php artisan make:table UsersTable --model='App\User' --fields='name,email,created_at' --kernel='users'

It's pretty self-explanatory, you should get the following output back from your terminal:

App\Tables\UsersTable was created successfully!
It's time to add it in your Http kernel:
'users' => 'App\Tables\UsersTable'

The file was successfully created at app/Http/Tables/UsersTable.php, perfect.
Take some time to look into that file and check what has been generated to get acquainted.

When in doubt, there's documentation on how fields are defined.

2. Add the Table to the kernel

Now, as the command tells us, we'll need to add the new Table definition to our HTTP kernel.

It's time to open up app\Http\Kernel.php, if you've followed the installation instructions you should have a $tables property there which is an array.

We'll add the key => value pair there:

/**
     * DataTable definitions (the key is used as a slug for routing)
     *
     * @var array
     */
    protected $tables = [
        'users' => 'App\Http\Tables\UsersTable',
    ];

By adding this key => value pair, the HTTP kernel knows where to get the data when DataTable requests it.

3. Rendering

We're nearly there, all that's left for us to is to add a route and serve a view that contains a <table> tag and render the javascript tag.

I'm sure you know how to add a route, let's skip to the actual controller, create a method you want to route to (in this case I'll call it usersList), load the table you want to display and pass it on to the view:

public function usersList()
    {
        $table = new \App\Http\Tables\UsersTable;

        return view('table', compact('table'));
    }

Let's create our view do actually render the table & javascript tag in resources/view/table.blade.php.

We'll pull in bootstrap for styling, dataTable's assets and create a basic page.

Here's what we'll put in that view:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DragonFly/Lists demo</title>
    <!-- Pull in bootstrap and dataTables bootstrap styling -->
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/lumen/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
</head>

<body>
    <div class="container" style="margin-top: 30px;">
        <div class="row">
            <div class="col-md-offset-2 col-md-8">
                <!-- Our table, we get the id from our Table definition -->
                <table class="table table-striped table-hover" id="{{$table->html_id}}">
                </table>
            </div>
        </div>
    </div> <!-- /container -->


    <!-- Pull in jQuery, dataTables and dataTables Bootstrap styling js -->
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>

    <!-- Render the javascript definition for the table -->
    <script type="text/javascript">
        {!! $table->definition() !!}
    </script>
</body>
</html>

And that's it, the most important parts of that view were:

Setting the <table>'s id option to {{$table->html_id}}
Wrapping the {!! $table->definition() !!} in a javascript tag.

You've just finished generating your first dataTable using DragonFly/Lists, that wasn't hard now, was it?

1. Generate the Table definition

Preparation

Execute the make:table command

2. Add the Table to the kernel

3. Rendering

Execute the `make:table` command