{"id":15283869,"url":"https://github.com/mzprog/datatables","last_synced_at":"2026-04-27T12:31:53.825Z","repository":{"id":64144931,"uuid":"573567539","full_name":"mzprog/datatables","owner":"mzprog","description":"create a better tables with few lines of code.","archived":false,"fork":false,"pushed_at":"2022-12-03T13:08:30.000Z","size":10,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-28T23:22:43.452Z","etag":null,"topics":["data-visualization","datatables","laravel-package","livewire"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mzprog.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-02T19:27:57.000Z","updated_at":"2022-12-03T09:30:23.000Z","dependencies_parsed_at":"2023-01-15T00:00:46.013Z","dependency_job_id":null,"html_url":"https://github.com/mzprog/datatables","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzprog%2Fdatatables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzprog%2Fdatatables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzprog%2Fdatatables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzprog%2Fdatatables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mzprog","download_url":"https://codeload.github.com/mzprog/datatables/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245138072,"owners_count":20566865,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-visualization","datatables","laravel-package","livewire"],"created_at":"2024-09-30T14:48:01.850Z","updated_at":"2026-04-27T12:31:48.798Z","avatar_url":"https://github.com/mzprog.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# datatables\ncreate a better tables with few lines of code.\n\n## Installation\nsimply install the package by:\n\n    composer require mzprog/datatables\n\nmake sure that livewire is installed, and styles and scripts added to the blade layout: `@livewireStyles` and `@livewireScripts`\n\n\n## Basic Usage\n\n- create a livewire component, without view file, and without `render` method.\n- The component should extends `Mzprog\\Datatables\\Datatable`\n- add `columns` method to your component \n    - `public function columns(): array;`\n    - This Should return array of `Mzprog\\Datatables\\Column`\n- add `query` method to have the main query\n    - `public function query() : Builder`\n\n### Column class\njust add `Column::name('id')` to your columns array, and it will be added and viewed in your table, but it will be labeled as `Id`.\n\nTo change the label name just use the second parameter `Column::name('id', 'ID')`.\n\nThe name will be used as the array index, and database field  by defualt.\n\n`field` method is used to allow you to different key for the column as in this example(`orderable`\u0026 `edit` will be explained later):\n\n    Column::name('added')-\u003efield('created_at')\n        -\u003eorderable()\n        -\u003eedit(fn($row) =\u003e $row-\u003ecreated_at-\u003ediffForHumans()),\n\nwe have change the format for created_at but can't store it in same properties (because casted to date, and work as `getCreateAtAttribute`).\n\nso when use `orderable` it will order using `created_at`.\n\n\n`edit` method is used to change or add data.\u003cbr /\u003e\nit accept callback with the current raw data as parameter, example:\n\n    Column::name('full_name', 'Name)\n        -\u003eedit(fn($raw) =\u003e \"{$raw-\u003efirst_name} {$raw-\u003elast_name}\")\n\n`orderable`method will allow you to order the column by pressing on the column name.\nit will order your data based on your field name, unless you add a callback as a parameter. \nthe callback parameter are: the query `Builder`, and the order direction, example:\n\n    return [\n        Column::name('id', 'ID')-\u003eorderable(),\n        Column::name('full_name', 'Name)\n            -\u003eorderable(fn($q, $dir) =\u003e $q-\u003eorderBy('first_name', $dir)-\u003eorderBy('last_name', $dir))\n            -\u003eedit(fn($raw) =\u003e \"{$raw-\u003efirst_name} {$raw-\u003elast_name}\"),\n    ];\n\n`searchable` method is work as orderable, and the callback function will pass the search keyword instead of order direction, example:\n\n    Column::name('full_name', 'Name)\n        -\u003esearchable(\n            fn($q, $keyword) =\u003e $q\n                -\u003ewhere(DB::raw('CONCAT(first_name,\" \", last_name)'), 'like', \"%${keyword}%\")\n        )\n        -\u003eorderable(fn($q, $dir) =\u003e $q-\u003eorderBy('first_name', $dir)-\u003eorderBy('last_name', $dir))\n        -\u003eedit(fn($raw) =\u003e \"{$raw-\u003efirst_name} {$raw-\u003elast_name}\"),\n\n`raw` method is used when you need to print HTML in your table. example:\n\n    Column::name('actions')-\u003eraw()\n        -\u003eedit(fn($row) =\u003e '\u003ca href=\"' . route('users.show',['user' =\u003e $row-\u003eid]) . '\" \u003eView\u003c/a\u003e';\n\n\n### Filter Class\n\nIf you want to select one or more value as a filter, like you only need to see rows from today, you can use:\n\n    public function filters()\n\t{\n\t\treturn [\n            Filter::name('date', 'Select a Date'),\n        ];\n    }\n\nthis will let you filter from your table using `date` column, also you can skip the label name, by defualt it will be `Date`.\n\nalso you can use custom data and filters:\n\nexample 1 (if you want to filter by name first letter):\n\n    Filter::name('name')-\u003eoptions(function () {\n        $options = User::query()\n            -\u003eselect([\n                DB::raw('LEFT(name,1) as letter'),\n                DB::raw('COUNT(*) as total')\n            ])-\u003egroupBy('letter')-\u003eget();\n\n        return $options-\u003emap(fn ($d) =\u003e [\n            'value' =\u003e $d['letter'],\n            'name' =\u003e \"Starts with '{$d['letter']}'\",\n            'total' =\u003e $d['total'],\n        ])-\u003etoArray();\n    })\n    -\u003efilter(function (Builder $query, array $values) {\n        $query-\u003ewhereIn(DB::raw('LEFT(name,1)'), $values);\n    })\n\nfor `options` you need to return array of options, and option has (name, value, total).\n\n`filter` if this filter is selected you can add conditions to the provided query, and you will get also array of the selected values.\n\nexample 2(filter by success: success, fail)\n\n    Filter::name('success')-\u003eoptions(function () {\n        return [\n            [\n                'name' =\u003e 'Success',\n                'value' =\u003e '\u003e=',\n                'total' =\u003e Exam::where('points', \"\u003e=\", 50)-\u003ecount()\n            ],\n            [\n                'name' =\u003e 'Fail',\n                'value' =\u003e '\u003c',\n                'total' =\u003e Exam::where('points', \"\u003c\", 50)-\u003ecount()\n            ],\n        ];\n    })\n    -\u003efilter(function (Builder $query, array $values) {\n        if(count($values) ==2) return;\n        $val = current($values);\n        $query-\u003ewhereIn('points', $val, 50);\n    })","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzprog%2Fdatatables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmzprog%2Fdatatables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzprog%2Fdatatables/lists"}