With Livewire 3, some issue in sort and pagination

[jigapate]

Hello,

I have installed latest 4.x power grid with Livewire 3, The Table loads fine while refreshing, but when we do short or move to the next page in pagination, it does not work,

When I click on short, it shows below Request URL

Request URL:
http://localhost/livewire/update

And below is payload.

{_token: "6GuX9tGNxeLLTO4AxR6o0URTspCepZTDFLRgLEkr", components: [{,…}]}
components
: 
[{,…}]
0
: 
{,…}
calls
: 
[{path: "", method: "gotoPage", params: [1]}]
snapshot
: 
"{\"data\":{\"headers\":[[],{\"s\":\"arr\"}],\"search\":\"\",\"columns\":[[[{\"title\":\"Email\",\"field\":\"email\",\"headerClass\":\"\",\"headerStyle\":\"\",\"bodyClass\":\"\",\"contentClassField\":\"\",\"contentClasses\":[[],{\"s\":\"arr\"}],\"bodyStyle\":\"\",\"dataField\":\"email\",\"placeholder\":\"\",\"hidden\":false,\"forceHidden\":false,\"visibleInExport\":null,\"editable\":[[],{\"s\":\"arr\"}],\"searchable\":true,\"searchableRaw\":\"\",\"sortable\":true,\"summarize\":[[],{\"s\":\"arr\"}],\"sum\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"count\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"avg\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"min\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"max\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"filters\":[[],{\"class\":\"Illuminate\\\\Support\\\\Collection\",\"s\":\"clctn\"}],\"toggleable\":[[],{\"s\":\"arr\"}],\"index\":false,\"fixedOnResponsive\":false},{\"class\":\"PowerComponents\\\\LivewirePowerGrid\\\\Column\",\"s\":\"wrbl\"}],[{\"title\":\"Name\",\"field\":\"name\",\"headerClass\":\"\",\"headerStyle\":\"\",\"bodyClass\":\"\",\"contentClassField\":\"\",\"contentClasses\":[[],{\"s\":\"arr\"}],\"bodyStyle\":\"\",\"dataField\":\"name\",\"placeholder\":\"\",\"hidden\":false,\"forceHidden\":false,\"visibleInExport\":null,\"editable\":[[],{\"s\":\"arr\"}],\"searchable\":true,\"searchableRaw\":\"\",\"sortable\":true,\"summarize\":[{\"count\":12},{\"s\":\"arr\"}],\"sum\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"count\":[{\"header\":true,\"footer\":false,\"label\":\"Count\"},{\"s\":\"arr\"}],\"avg\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"min\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"max\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"filters\":[[],{\"class\":\"Illuminate\\\\Support\\\\Collection\",\"s\":\"clctn\"}],\"toggleable\":[[],{\"s\":\"arr\"}],\"index\":false,\"fixedOnResponsive\":false},{\"class\":\"PowerComponents\\\\LivewirePowerGrid\\\\Column\",\"s\":\"wrbl\"}],[{\"title\":\"Created at\",\"field\":\"created_at\",\"headerClass\":\"\",\"headerStyle\":\"\",\"bodyClass\":\"\",\"contentClassField\":\"\",\"contentClasses\":[[],{\"s\":\"arr\"}],\"bodyStyle\":\"\",\"dataField\":\"created_at\",\"placeholder\":\"\",\"hidden\":true,\"forceHidden\":true,\"visibleInExport\":null,\"editable\":[[],{\"s\":\"arr\"}],\"searchable\":false,\"searchableRaw\":\"\",\"sortable\":false,\"summarize\":[[],{\"s\":\"arr\"}],\"sum\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"count\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"avg\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"min\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"max\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"filters\":[[],{\"class\":\"Illuminate\\\\Support\\\\Collection\",\"s\":\"clctn\"}],\"toggleable\":[[],{\"s\":\"arr\"}],\"index\":false,\"fixedOnResponsive\":false},{\"class\":\"PowerComponents\\\\LivewirePowerGrid\\\\Column\",\"s\":\"wrbl\"}],[{\"title\":\"Created at\",\"field\":\"created_at_formatted\",\"headerClass\":\"\",\"headerStyle\":\"\",\"bodyClass\":\"\",\"contentClassField\":\"\",\"contentClasses\":[[],{\"s\":\"arr\"}],\"bodyStyle\":\"\",\"dataField\":\"created_at\",\"placeholder\":\"\",\"hidden\":false,\"forceHidden\":false,\"visibleInExport\":null,\"editable\":[[],{\"s\":\"arr\"}],\"searchable\":true,\"searchableRaw\":\"\",\"sortable\":false,\"summarize\":[[],{\"s\":\"arr\"}],\"sum\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"count\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"avg\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"min\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"max\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"filters\":[[],{\"class\":\"Illuminate\\\\Support\\\\Collection\",\"s\":\"clctn\"}],\"toggleable\":[[],{\"s\":\"arr\"}],\"index\":false,\"fixedOnResponsive\":false},{\"class\":\"PowerComponents\\\\LivewirePowerGrid\\\\Column\",\"s\":\"wrbl\"}]],{\"s\":\"arr\"}],\"filtered\":[[],{\"s\":\"arr\"}],\"primaryKey\":\"id\",\"currentTable\":\"users\",\"datasource\":null,\"relationSearch\":[[],{\"s\":\"arr\"}],\"ignoreTablePrefix\":true,\"tableName\":\"default\",\"headerTotalColumn\":true,\"footerTotalColumn\":false,\"setUp\":[{\"exportable\":[{\"name\":\"exportable\",\"csvSeparator\":\",\",\"csvDelimiter\":\"\\\"\",\"type\":[[\"xlsx\",\"csv\"],{\"s\":\"arr\"}],\"striped\":\"d0d3d8\",\"columnWidth\":[[],{\"s\":\"arr\"}],\"deleteFileAfterSend\":true,\"batchExport\":[[],{\"s\":\"arr\"}],\"fileName\":\"export\"},{\"class\":\"PowerComponents\\\\LivewirePowerGrid\\\\Exportable\",\"s\":\"wrbl\"}],\"header\":[{\"name\":\"header\",\"searchInput\":true,\"toggleColumns\":false,\"softDeletes\":false,\"showMessageSoftDeletes\":false,\"includeViewOnTop\":\"\",\"includeViewOnBottom\":\"\",\"wireLoading\":true},{\"class\":\"PowerComponents\\\\LivewirePowerGrid\\\\Header\",\"s\":\"wrbl\"}],\"footer\":[{\"name\":\"footer\",\"perPage\":10,\"perPageValues\":[[10,25,50,100,0],{\"s\":\"arr\"}],\"recordCount\":\"full\",\"pagination\":null,\"includeViewOnTop\":\"\",\"includeViewOnBottom\":\"\"},{\"class\":\"PowerComponents\\\\LivewirePowerGrid\\\\Footer\",\"s\":\"wrbl\"}]},{\"s\":\"arr\"}],\"showErrorBag\":false,\"rowIndex\":true,\"total\":12,\"totalCurrentPage\":2,\"searchMorphs\":[[],{\"s\":\"arr\"}],\"deferLoading\":false,\"readyToLoad\":true,\"loadingComponent\":\"\",\"showFilters\":false,\"paginators\":[{\"page\":\"2\"},{\"s\":\"arr\"}],\"sortField\":\"id\",\"sortDirection\":\"asc\",\"withSortStringNumber\":false,\"multiSort\":false,\"sortArray\":[[],{\"s\":\"arr\"}],\"checkbox\":true,\"checkboxAll\":false,\"checkboxValues\":[[],{\"s\":\"arr\"}],\"checkboxAttribute\":\"id\",\"filters\":[[],{\"s\":\"arr\"}],\"enabledFilters\":[[],{\"s\":\"arr\"}],\"select\":[[],{\"s\":\"arr\"}],\"persist\":[[],{\"s\":\"arr\"}],\"softDeletes\":\"\",\"actionRoutes\":[[],{\"s\":\"arr\"}],\"actions\":[[],{\"s\":\"arr\"}]},\"memo\":{\"id\":\"lDOngXHZ9wRzH4MHLOnZ\",\"name\":\"user-table\",\"path\":\"App\\/users\",\"method\":\"GET\",\"children\":[],\"errors\":[],\"locale\":\"en\"},\"checksum\":\"ec24d264ded8aba0f4d883a0a15655b2297a816bcb59804e72b211ef6fd14cba\"}"
updates
: 
{}
_token
: 
"6GuX9tGNxeLLTO4AxR6o0URTspCepZTDFLRgLEkr"

and here is response of component,

{
    "components": [
        {
            "snapshot": "{\"data\":{\"headers\":[[],{\"s\":\"arr\"}],\"search\":\"\",\"columns\":[[[{\"title\":\"Email\",\"field\":\"email\",\"headerClass\":\"\",\"headerStyle\":\"\",\"bodyClass\":\"\",\"contentClassField\":\"\",\"contentClasses\":[[],{\"s\":\"arr\"}],\"bodyStyle\":\"\",\"dataField\":\"email\",\"placeholder\":\"\",\"hidden\":false,\"forceHidden\":false,\"visibleInExport\":null,\"editable\":[[],{\"s\":\"arr\"}],\"searchable\":true,\"searchableRaw\":\"\",\"sortable\":true,\"summarize\":[[],{\"s\":\"arr\"}],\"sum\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"count\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"avg\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"min\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"max\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"filters\":[[],{\"class\":\"Illuminate\\\\Support\\\\Collection\",\"s\":\"clctn\"}],\"toggleable\":[[],{\"s\":\"arr\"}],\"index\":false,\"fixedOnResponsive\":false},{\"class\":\"PowerComponents\\\\LivewirePowerGrid\\\\Column\",\"s\":\"wrbl\"}],[{\"title\":\"Name\",\"field\":\"name\",\"headerClass\":\"\",\"headerStyle\":\"\",\"bodyClass\":\"\",\"contentClassField\":\"\",\"contentClasses\":[[],{\"s\":\"arr\"}],\"bodyStyle\":\"\",\"dataField\":\"name\",\"placeholder\":\"\",\"hidden\":false,\"forceHidden\":false,\"visibleInExport\":null,\"editable\":[[],{\"s\":\"arr\"}],\"searchable\":true,\"searchableRaw\":\"\",\"sortable\":true,\"summarize\":[{\"count\":12},{\"s\":\"arr\"}],\"sum\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"count\":[{\"header\":true,\"footer\":false,\"label\":\"Count\"},{\"s\":\"arr\"}],\"avg\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"min\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"max\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"filters\":[[],{\"class\":\"Illuminate\\\\Support\\\\Collection\",\"s\":\"clctn\"}],\"toggleable\":[[],{\"s\":\"arr\"}],\"index\":false,\"fixedOnResponsive\":false},{\"class\":\"PowerComponents\\\\LivewirePowerGrid\\\\Column\",\"s\":\"wrbl\"}],[{\"title\":\"Created at\",\"field\":\"created_at\",\"headerClass\":\"\",\"headerStyle\":\"\",\"bodyClass\":\"\",\"contentClassField\":\"\",\"contentClasses\":[[],{\"s\":\"arr\"}],\"bodyStyle\":\"\",\"dataField\":\"created_at\",\"placeholder\":\"\",\"hidden\":true,\"forceHidden\":true,\"visibleInExport\":null,\"editable\":[[],{\"s\":\"arr\"}],\"searchable\":false,\"searchableRaw\":\"\",\"sortable\":false,\"summarize\":[[],{\"s\":\"arr\"}],\"sum\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"count\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"avg\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"min\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"max\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"filters\":[[],{\"class\":\"Illuminate\\\\Support\\\\Collection\",\"s\":\"clctn\"}],\"toggleable\":[[],{\"s\":\"arr\"}],\"index\":false,\"fixedOnResponsive\":false},{\"class\":\"PowerComponents\\\\LivewirePowerGrid\\\\Column\",\"s\":\"wrbl\"}],[{\"title\":\"Created at\",\"field\":\"created_at_formatted\",\"headerClass\":\"\",\"headerStyle\":\"\",\"bodyClass\":\"\",\"contentClassField\":\"\",\"contentClasses\":[[],{\"s\":\"arr\"}],\"bodyStyle\":\"\",\"dataField\":\"created_at\",\"placeholder\":\"\",\"hidden\":false,\"forceHidden\":false,\"visibleInExport\":null,\"editable\":[[],{\"s\":\"arr\"}],\"searchable\":true,\"searchableRaw\":\"\",\"sortable\":false,\"summarize\":[[],{\"s\":\"arr\"}],\"sum\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"count\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"avg\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"min\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"max\":[{\"header\":false,\"footer\":false,\"label\":null},{\"s\":\"arr\"}],\"filters\":[[],{\"class\":\"Illuminate\\\\Support\\\\Collection\",\"s\":\"clctn\"}],\"toggleable\":[[],{\"s\":\"arr\"}],\"index\":false,\"fixedOnResponsive\":false},{\"class\":\"PowerComponents\\\\LivewirePowerGrid\\\\Column\",\"s\":\"wrbl\"}]],{\"s\":\"arr\"}],\"filtered\":[[],{\"s\":\"arr\"}],\"primaryKey\":\"id\",\"currentTable\":\"users\",\"datasource\":null,\"relationSearch\":[[],{\"s\":\"arr\"}],\"ignoreTablePrefix\":true,\"tableName\":\"default\",\"headerTotalColumn\":true,\"footerTotalColumn\":false,\"setUp\":[{\"exportable\":[{\"name\":\"exportable\",\"csvSeparator\":\",\",\"csvDelimiter\":\"\\\"\",\"type\":[[\"xlsx\",\"csv\"],{\"s\":\"arr\"}],\"striped\":\"d0d3d8\",\"columnWidth\":[[],{\"s\":\"arr\"}],\"deleteFileAfterSend\":true,\"batchExport\":[[],{\"s\":\"arr\"}],\"fileName\":\"export\"},{\"s\":\"arr\"}],\"header\":[{\"name\":\"header\",\"searchInput\":true,\"toggleColumns\":false,\"softDeletes\":false,\"showMessageSoftDeletes\":false,\"includeViewOnTop\":\"\",\"includeViewOnBottom\":\"\",\"wireLoading\":true},{\"s\":\"arr\"}],\"footer\":[{\"name\":\"footer\",\"perPage\":10,\"perPageValues\":[[10,25,50,100,0],{\"s\":\"arr\"}],\"recordCount\":\"full\",\"pagination\":null,\"includeViewOnTop\":\"\",\"includeViewOnBottom\":\"\"},{\"s\":\"arr\"}]},{\"s\":\"arr\"}],\"showErrorBag\":false,\"rowIndex\":true,\"total\":12,\"totalCurrentPage\":10,\"searchMorphs\":[[],{\"s\":\"arr\"}],\"deferLoading\":false,\"readyToLoad\":true,\"loadingComponent\":\"\",\"showFilters\":false,\"paginators\":[{\"page\":1},{\"s\":\"arr\"}],\"sortField\":\"id\",\"sortDirection\":\"asc\",\"withSortStringNumber\":false,\"multiSort\":false,\"sortArray\":[[],{\"s\":\"arr\"}],\"checkbox\":true,\"checkboxAll\":false,\"checkboxValues\":[[],{\"s\":\"arr\"}],\"checkboxAttribute\":\"id\",\"filters\":[[],{\"s\":\"arr\"}],\"enabledFilters\":[[],{\"s\":\"arr\"}],\"select\":[[],{\"s\":\"arr\"}],\"persist\":[[],{\"s\":\"arr\"}],\"softDeletes\":\"\",\"actionRoutes\":[[],{\"s\":\"arr\"}],\"actions\":[[],{\"s\":\"arr\"}]},\"memo\":{\"id\":\"lDOngXHZ9wRzH4MHLOnZ\",\"name\":\"user-table\",\"path\":\"App\\\/users\",\"method\":\"GET\",\"children\":[],\"errors\":[],\"locale\":\"en\"},\"checksum\":\"11f3e4683bea77a3ff2659497d5000179818a28d4c60d2dffa891326c6f74751\"}",
            "effects": {
                "returns": [
                    null
                ],
                "html": "<div wire:id=\"lDOngXHZ9wRzH4MHLOnZ\" >\n    <div class=\"col-md-12\">\n        <div>\n        <div class=\"dt--top-section\">\n        <div class=\"row\">\n            <div class=\"col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center\">\n                <div>\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n<\/div>\n\n                <div class=\"me-1\">\n                    <div class=\"dropdown\">\n    <button\n        class=\"btn btn-light dropdown-toggle\"\n        type=\"button\"\n        data-bs-toggle=\"dropdown\"\n        aria-expanded=\"false\"\n    >\n        <svg\n            width=\"20\"\n            height=\"20\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n        >\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n            \/>\n        <\/svg>\n    <\/button>\n    <ul class=\"dropdown-menu\">\n        <!-- __BLOCK__ -->            <li class=\"d-flex\">\n                <div class=\"dropdown-item\">\n                    <span style=\"min-width: 25px;\">XLSX<\/span>\n                    <a\n                        class=\"text-black-50\"\n                        wire:click.prevent=\"exportToXLS\"\n                        href=\"#\"\n                    >\n\n                        <!-- __BLOCK__ -->                            All                         <!-- __ENDBLOCK__ -->\n                    <\/a>\n                    <!-- __BLOCK__ -->                        \/\n                        <a\n                            class=\"text-black-50\"\n                            wire:click.prevent=\"exportToXLS(true)\"\n                            href=\"#\"\n                        >\n                            Selected                        <\/a>\n                     <!-- __ENDBLOCK__ -->\n                <\/div>\n            <\/li>\n         <!-- __ENDBLOCK__ -->\n        <!-- __BLOCK__ -->            <li class=\"d-flex\">\n                <div class=\"dropdown-item\">\n                    <span>Csv<\/span>\n                    <a\n                        class=\"text-black-50\"\n                        wire:click.prevent=\"exportToCsv\"\n                        href=\"#\"\n                    >\n                        <!-- __BLOCK__ -->                            All                         <!-- __ENDBLOCK__ -->\n                    <\/a>\n                    <!-- __BLOCK__ -->                        \/\n                        <a\n                            class=\"text-black-50\"\n                            wire:click.prevent=\"exportToCsv(true)\"\n                            href=\"#\"\n                        >\n                            Selected                        <\/a>\n                     <!-- __ENDBLOCK__ -->\n                <\/div>\n            <\/li>\n         <!-- __ENDBLOCK__ -->\n    <\/ul>\n<\/div>\n                <\/div>\n\n                <div>\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n<\/div>\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n                <div\n    class=\"d-flex align-items-center\"\n    style=\"padding-left: 10px;\"\n>\n    <div\n        wire:loading\n        class=\"spinner-border\"\n        role=\"status\"\n        style=\"color: #656363;\"\n    >\n        <span class=\"visually-hidden\">Loading...<\/span>\n    <\/div>\n<\/div>\n            <\/div>\n            <div class=\"col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3\">\n                <div\n    class=\"col-12\"\n    style=\"text-align: right;\"\n>\n    <label class=\"col-12 col-sm-8\">\n        <!-- __BLOCK__ -->            <div class=\"input-group w-100\">\n                <span class=\"input-group-text\">\n                    <svg\n                        width=\"16\"\n                        height=\"16\"\n                        fill=\"currentColor\"\n                        class=\"bi bi-search\"\n                        style=\"\"\n                        viewBox=\"0 0 16 16\"\n                    >\n                        <path\n                            d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z\"\n                        ><\/path>\n                    <\/svg>\n                <\/span>\n                <input\n                    wire:model.live.debounce.600ms=\"search\"\n                    type=\"text\"\n                    class=\"col-12 col-sm-8 form-control\"\n                    style=\"\"\n                    placeholder=\"Search...\"\n                >\n            <\/div>\n         <!-- __ENDBLOCK__ -->\n    <\/label>\n<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    <div>\n         <!-- __ENDBLOCK__ -->\n<\/div>\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n    <!-- __ENDBLOCK__ -->\n        <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n<\/div>\n    <\/div>\n    <div\n        class=\"table-responsive col-md-12\"\n        style=\"\"\n    >\n        <div >\n    <table\n        class=\"table power-grid-table table align-middle table-row-dashed fs-6 gy-5 dataTable\"\n        style=\"\"\n    >\n        <thead\n            class=\"\"\n            style=\"\"\n        >\n            <tr\n            class=\"\"\n            style=\"\"\n        >\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n            <!-- __BLOCK__ -->                <div>\n        <th\n                scope=\"col\"\n        class=\"\"\n        style=\"font-size: 1rem !important;text-align:center\"\n        wire:key=\"6547d51e9e434565ea44367ab89a0beb\"\n    >\n        <div class=\"form-check-solid\">\n            <label class=\"form-check-label\">\n                <input\n                    class=\"form-check-input shadow-none\"\n                    type=\"checkbox\"\n                    wire:click=\"selectCheckboxAll\"\n                    wire:model=\"checkboxAll\"\n                >\n            <\/label>\n        <\/div>\n    <\/th>\n<\/div>\n             <!-- __ENDBLOCK__ -->\n\n            <!-- __BLOCK__ -->                <th\n    class=\"text-gray-800 \"\n    wire:key=\"0c83f57c786a0b4a39efab23731c7ebc\"\n         x-data x-multisort-shift-click=\"lDOngXHZ9wRzH4MHLOnZ\" wire:click=\"sortBy('email')\"     style=\"; width: max-content;  cursor:pointer;   \"\n>\n    <div\n        class=\"\"\n        style=\"\"\n    >\n        <!-- __BLOCK__ -->            <span>\n                &#8597;\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n        <span>Email<\/span>\n    <\/div>\n<\/th>\n                            <th\n    class=\"text-gray-800 \"\n    wire:key=\"b068931cc450442b63f5b3d276ea4297\"\n         x-data x-multisort-shift-click=\"lDOngXHZ9wRzH4MHLOnZ\" wire:click=\"sortBy('name')\"     style=\"; width: max-content;  cursor:pointer;   \"\n>\n    <div\n        class=\"\"\n        style=\"\"\n    >\n        <!-- __BLOCK__ -->            <span>\n                &#8597;\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n        <span>Name<\/span>\n    <\/div>\n<\/th>\n                            <th\n    class=\"text-gray-800 \"\n    wire:key=\"fde81f1177b1541755b672c9dc97315a\"\n            style=\"display:none; width: max-content;   \"\n>\n    <div\n        class=\"\"\n        style=\"\"\n    >\n        <!-- __BLOCK__ -->            <span style=\"width: 6px\"><\/span>\n         <!-- __ENDBLOCK__ -->\n        <span>Created at<\/span>\n    <\/div>\n<\/th>\n                            <th\n    class=\"text-gray-800 \"\n    wire:key=\"9792e58c67cd3053570319d6e8bdaea8\"\n            style=\"; width: max-content;   \"\n>\n    <div\n        class=\"\"\n        style=\"\"\n    >\n        <!-- __BLOCK__ -->            <span style=\"width: 6px\"><\/span>\n         <!-- __ENDBLOCK__ -->\n        <span>Created at<\/span>\n    <\/div>\n<\/th>\n             <!-- __ENDBLOCK__ -->\n\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n        <\/tr>\n        <\/thead>\n        <!-- __BLOCK__ -->            <tbody\n                class=\"fw-semibold fs-6 text-gray-700\"\n                style=\"\"\n            >\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <!-- __BLOCK__ -->            <tr class=\"\" style=\"\">\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n    <!-- __BLOCK__ -->        <td  class=\"\" style=\"vertical-align: middle; line-height: normal;white-space: nowrap;\"><\/td>\n     <!-- __ENDBLOCK__ -->\n    <!-- __BLOCK__ -->        <td class=\" \"\n            style=\"; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(76 79 82 \/ var(--tw-text-opacity)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; \">\n            <div>\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n        <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n        <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n<\/div>\n        <\/td>\n            <td class=\" \"\n            style=\"; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(76 79 82 \/ var(--tw-text-opacity)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; \">\n            <div>\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n    <!-- __BLOCK__ -->        <span>Count: 12<\/span>\n        <br>\n     <!-- __ENDBLOCK__ -->\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n        <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n        <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n<\/div>\n        <\/td>\n            <td class=\" \"\n            style=\"display:none; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(76 79 82 \/ var(--tw-text-opacity)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; \">\n            <div>\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n        <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n        <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n<\/div>\n        <\/td>\n            <td class=\" \"\n            style=\"; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(76 79 82 \/ var(--tw-text-opacity)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; \">\n            <div>\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n        <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n        <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n<\/div>\n        <\/td>\n     <!-- __ENDBLOCK__ -->\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n<\/tr>\n\n\n            <!-- __BLOCK__ -->                \n                <!-- __BLOCK__ -->                        <tr\n                            style=\"\"\n                            class=\"\"\n                            wire:key=\"1557a1227ea47f8c115f8534fe895093\"\n                        >\n                 <!-- __ENDBLOCK__ -->\n\n                \n                \n                \n                <!-- __BLOCK__ -->                                        <!-- __BLOCK__ -->    <!-- __BLOCK__ -->        <td\n            class=\"\"\n            style=\"font-size: 1rem !important;text-align:center\"\n        >\n            <div class=\"form-check-solid\">\n                <label class=\"form-check-label\">\n                    <input\n                        type=\"checkbox\"\n                        x-on:click=\"window.Alpine.store('pgBulkActions').add($event.target.value, 'default')\"\n                        wire:model=\"checkboxValues\"\n                        value=\"64e9e90445270e21642f9c20\"\n                    >\n                <\/label>\n            <\/div>\n        <\/td>\n     <!-- __ENDBLOCK__ -->\n <!-- __ENDBLOCK__ -->\n                 <!-- __ENDBLOCK__ -->\n\n                <!-- __BLOCK__ -->        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>[email protected]<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>Jigar Patel<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"display:none; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>2023-08-26 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>26\/08\/2023 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n <!-- __ENDBLOCK__ -->\n\n                <\/tr>\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n                                            \n                <!-- __BLOCK__ -->                        <tr\n                            style=\"\"\n                            class=\"\"\n                            wire:key=\"d6fe1d1dbbe29b56e63aec6eb6355903\"\n                        >\n                 <!-- __ENDBLOCK__ -->\n\n                \n                \n                \n                <!-- __BLOCK__ -->                                        <!-- __BLOCK__ -->    <!-- __BLOCK__ -->        <td\n            class=\"\"\n            style=\"font-size: 1rem !important;text-align:center\"\n        >\n            <div class=\"form-check-solid\">\n                <label class=\"form-check-label\">\n                    <input\n                        type=\"checkbox\"\n                        x-on:click=\"window.Alpine.store('pgBulkActions').add($event.target.value, 'default')\"\n                        wire:model=\"checkboxValues\"\n                        value=\"64e9e90a45270e21642f9c21\"\n                    >\n                <\/label>\n            <\/div>\n        <\/td>\n     <!-- __ENDBLOCK__ -->\n <!-- __ENDBLOCK__ -->\n                 <!-- __ENDBLOCK__ -->\n\n                <!-- __BLOCK__ -->        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>[email protected]<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>Jigar Patel<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"display:none; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>2023-08-26 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>26\/08\/2023 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n <!-- __ENDBLOCK__ -->\n\n                <\/tr>\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n                                            \n                <!-- __BLOCK__ -->                        <tr\n                            style=\"\"\n                            class=\"\"\n                            wire:key=\"4e9ffb0d5716c5cadb3b11dc32c0d523\"\n                        >\n                 <!-- __ENDBLOCK__ -->\n\n                \n                \n                \n                <!-- __BLOCK__ -->                                        <!-- __BLOCK__ -->    <!-- __BLOCK__ -->        <td\n            class=\"\"\n            style=\"font-size: 1rem !important;text-align:center\"\n        >\n            <div class=\"form-check-solid\">\n                <label class=\"form-check-label\">\n                    <input\n                        type=\"checkbox\"\n                        x-on:click=\"window.Alpine.store('pgBulkActions').add($event.target.value, 'default')\"\n                        wire:model=\"checkboxValues\"\n                        value=\"64e9e8ee45270e21642f9c1c\"\n                    >\n                <\/label>\n            <\/div>\n        <\/td>\n     <!-- __ENDBLOCK__ -->\n <!-- __ENDBLOCK__ -->\n                 <!-- __ENDBLOCK__ -->\n\n                <!-- __BLOCK__ -->        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>[email protected]<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>Mishka Patel<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"display:none; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>2023-08-26 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>26\/08\/2023 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n <!-- __ENDBLOCK__ -->\n\n                <\/tr>\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n                                            \n                <!-- __BLOCK__ -->                        <tr\n                            style=\"\"\n                            class=\"\"\n                            wire:key=\"0587603f940b082ebe3acb92a216aa4d\"\n                        >\n                 <!-- __ENDBLOCK__ -->\n\n                \n                \n                \n                <!-- __BLOCK__ -->                                        <!-- __BLOCK__ -->    <!-- __BLOCK__ -->        <td\n            class=\"\"\n            style=\"font-size: 1rem !important;text-align:center\"\n        >\n            <div class=\"form-check-solid\">\n                <label class=\"form-check-label\">\n                    <input\n                        type=\"checkbox\"\n                        x-on:click=\"window.Alpine.store('pgBulkActions').add($event.target.value, 'default')\"\n                        wire:model=\"checkboxValues\"\n                        value=\"64e9e8fd45270e21642f9c1f\"\n                    >\n                <\/label>\n            <\/div>\n        <\/td>\n     <!-- __ENDBLOCK__ -->\n <!-- __ENDBLOCK__ -->\n                 <!-- __ENDBLOCK__ -->\n\n                <!-- __BLOCK__ -->        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>[email protected]<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>Jigar Patel<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"display:none; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>2023-08-26 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>26\/08\/2023 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n <!-- __ENDBLOCK__ -->\n\n                <\/tr>\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n                                            \n                <!-- __BLOCK__ -->                        <tr\n                            style=\"\"\n                            class=\"\"\n                            wire:key=\"3bddfc1ada99659f17dfca810fd41cb7\"\n                        >\n                 <!-- __ENDBLOCK__ -->\n\n                \n                \n                \n                <!-- __BLOCK__ -->                                        <!-- __BLOCK__ -->    <!-- __BLOCK__ -->        <td\n            class=\"\"\n            style=\"font-size: 1rem !important;text-align:center\"\n        >\n            <div class=\"form-check-solid\">\n                <label class=\"form-check-label\">\n                    <input\n                        type=\"checkbox\"\n                        x-on:click=\"window.Alpine.store('pgBulkActions').add($event.target.value, 'default')\"\n                        wire:model=\"checkboxValues\"\n                        value=\"64e9e8f345270e21642f9c1d\"\n                    >\n                <\/label>\n            <\/div>\n        <\/td>\n     <!-- __ENDBLOCK__ -->\n <!-- __ENDBLOCK__ -->\n                 <!-- __ENDBLOCK__ -->\n\n                <!-- __BLOCK__ -->        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>[email protected]<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>Jigar Patel<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"display:none; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>2023-08-26 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>26\/08\/2023 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n <!-- __ENDBLOCK__ -->\n\n                <\/tr>\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n                                            \n                <!-- __BLOCK__ -->                        <tr\n                            style=\"\"\n                            class=\"\"\n                            wire:key=\"e64d284186ac63ee37f1fe5bdb769dc8\"\n                        >\n                 <!-- __ENDBLOCK__ -->\n\n                \n                \n                \n                <!-- __BLOCK__ -->                                        <!-- __BLOCK__ -->    <!-- __BLOCK__ -->        <td\n            class=\"\"\n            style=\"font-size: 1rem !important;text-align:center\"\n        >\n            <div class=\"form-check-solid\">\n                <label class=\"form-check-label\">\n                    <input\n                        type=\"checkbox\"\n                        x-on:click=\"window.Alpine.store('pgBulkActions').add($event.target.value, 'default')\"\n                        wire:model=\"checkboxValues\"\n                        value=\"64e9e8e845270e21642f9c1b\"\n                    >\n                <\/label>\n            <\/div>\n        <\/td>\n     <!-- __ENDBLOCK__ -->\n <!-- __ENDBLOCK__ -->\n                 <!-- __ENDBLOCK__ -->\n\n                <!-- __BLOCK__ -->        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>[email protected]<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>Mishka Patel<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"display:none; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>2023-08-26 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>26\/08\/2023 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n <!-- __ENDBLOCK__ -->\n\n                <\/tr>\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n                                            \n                <!-- __BLOCK__ -->                        <tr\n                            style=\"\"\n                            class=\"\"\n                            wire:key=\"4c1a0f7af7595df57fd3ae20cab30822\"\n                        >\n                 <!-- __ENDBLOCK__ -->\n\n                \n                \n                \n                <!-- __BLOCK__ -->                                        <!-- __BLOCK__ -->    <!-- __BLOCK__ -->        <td\n            class=\"\"\n            style=\"font-size: 1rem !important;text-align:center\"\n        >\n            <div class=\"form-check-solid\">\n                <label class=\"form-check-label\">\n                    <input\n                        type=\"checkbox\"\n                        x-on:click=\"window.Alpine.store('pgBulkActions').add($event.target.value, 'default')\"\n                        wire:model=\"checkboxValues\"\n                        value=\"64e9cda245270e21642f9c19\"\n                    >\n                <\/label>\n            <\/div>\n        <\/td>\n     <!-- __ENDBLOCK__ -->\n <!-- __ENDBLOCK__ -->\n                 <!-- __ENDBLOCK__ -->\n\n                <!-- __BLOCK__ -->        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>[email protected]<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>Mishka Patel<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"display:none; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>2023-08-26 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>26\/08\/2023 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n <!-- __ENDBLOCK__ -->\n\n                <\/tr>\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n                                            \n                <!-- __BLOCK__ -->                        <tr\n                            style=\"\"\n                            class=\"\"\n                            wire:key=\"807544adb94586c4d15627e4419e8451\"\n                        >\n                 <!-- __ENDBLOCK__ -->\n\n                \n                \n                \n                <!-- __BLOCK__ -->                                        <!-- __BLOCK__ -->    <!-- __BLOCK__ -->        <td\n            class=\"\"\n            style=\"font-size: 1rem !important;text-align:center\"\n        >\n            <div class=\"form-check-solid\">\n                <label class=\"form-check-label\">\n                    <input\n                        type=\"checkbox\"\n                        x-on:click=\"window.Alpine.store('pgBulkActions').add($event.target.value, 'default')\"\n                        wire:model=\"checkboxValues\"\n                        value=\"64e9a50e2be62b96f206bf62\"\n                    >\n                <\/label>\n            <\/div>\n        <\/td>\n     <!-- __ENDBLOCK__ -->\n <!-- __ENDBLOCK__ -->\n                 <!-- __ENDBLOCK__ -->\n\n                <!-- __BLOCK__ -->        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>[email protected]<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>Jigar Patel<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"display:none; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>2023-08-26 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>26\/08\/2023 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n <!-- __ENDBLOCK__ -->\n\n                <\/tr>\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n                                            \n                <!-- __BLOCK__ -->                        <tr\n                            style=\"\"\n                            class=\"\"\n                            wire:key=\"c471769a27ba727862b7613c5da27bd1\"\n                        >\n                 <!-- __ENDBLOCK__ -->\n\n                \n                \n                \n                <!-- __BLOCK__ -->                                        <!-- __BLOCK__ -->    <!-- __BLOCK__ -->        <td\n            class=\"\"\n            style=\"font-size: 1rem !important;text-align:center\"\n        >\n            <div class=\"form-check-solid\">\n                <label class=\"form-check-label\">\n                    <input\n                        type=\"checkbox\"\n                        x-on:click=\"window.Alpine.store('pgBulkActions').add($event.target.value, 'default')\"\n                        wire:model=\"checkboxValues\"\n                        value=\"64e9e8dc45270e21642f9c1a\"\n                    >\n                <\/label>\n            <\/div>\n        <\/td>\n     <!-- __ENDBLOCK__ -->\n <!-- __ENDBLOCK__ -->\n                 <!-- __ENDBLOCK__ -->\n\n                <!-- __BLOCK__ -->        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>[email protected]<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>Mishka Patel<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"display:none; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>2023-08-26 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>26\/08\/2023 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n <!-- __ENDBLOCK__ -->\n\n                <\/tr>\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n                                            \n                <!-- __BLOCK__ -->                        <tr\n                            style=\"\"\n                            class=\"\"\n                            wire:key=\"9297bd82ebe10c42e299b67e6a530df1\"\n                        >\n                 <!-- __ENDBLOCK__ -->\n\n                \n                \n                \n                <!-- __BLOCK__ -->                                        <!-- __BLOCK__ -->    <!-- __BLOCK__ -->        <td\n            class=\"\"\n            style=\"font-size: 1rem !important;text-align:center\"\n        >\n            <div class=\"form-check-solid\">\n                <label class=\"form-check-label\">\n                    <input\n                        type=\"checkbox\"\n                        x-on:click=\"window.Alpine.store('pgBulkActions').add($event.target.value, 'default')\"\n                        wire:model=\"checkboxValues\"\n                        value=\"64e9e8f845270e21642f9c1e\"\n                    >\n                <\/label>\n            <\/div>\n        <\/td>\n     <!-- __ENDBLOCK__ -->\n <!-- __ENDBLOCK__ -->\n                 <!-- __ENDBLOCK__ -->\n\n                <!-- __BLOCK__ -->        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>[email protected]<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>Jigar Patel<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"display:none; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>2023-08-26 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n        <td\n        class=\" \"\n        style=\"; vertical-align: middle; line-height: normal;white-space: nowrap; \"\n    >\n        <div class=\"flex gap-2 w-full\">\n            <!-- Render Action -->\n            <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n        <\/div>\n\n        <!-- __BLOCK__ -->            <span class=\" \">\n                <div>26\/08\/2023 07:09:02<\/div>\n            <\/span>\n         <!-- __ENDBLOCK__ -->\n    <\/td>\n <!-- __ENDBLOCK__ -->\n\n                <\/tr>\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n                <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n                             <!-- __ENDBLOCK__ -->\n\n                     <!-- __ENDBLOCK__ -->\n            <\/tbody>\n         <!-- __ENDBLOCK__ -->\n    <\/table>\n<\/div>\n    <\/div>\n    <div class=\"row\">\n        <div class=\"col-12 overflow-auto\">\n            <div>\n                <footer\n            class=\"mt-50 pb-1 w-100 align-items-end px-1 d-flex flex-wrap justify-content-sm-center justify-content-md-between\"\n        >\n            <div class=\"col-auto overflow-auto my-sm-2 my-md-0 ms-sm-0\">\n                                    <div class=\"d-flex flex-lg-row align-items-center\">\n                        <label class=\"w-auto\">\n                            <select\n                                wire:model.live=\"setUp.footer.perPage\"\n                                class=\"form-select\"\n                            >\n                                <!-- __BLOCK__ -->                                    <option value=\"10\">\n                                        <!-- __BLOCK__ -->                                            10\n                                         <!-- __ENDBLOCK__ -->\n                                    <\/option>\n                                                                    <option value=\"25\">\n                                        <!-- __BLOCK__ -->                                            25\n                                         <!-- __ENDBLOCK__ -->\n                                    <\/option>\n                                                                    <option value=\"50\">\n                                        <!-- __BLOCK__ -->                                            50\n                                         <!-- __ENDBLOCK__ -->\n                                    <\/option>\n                                                                    <option value=\"100\">\n                                        <!-- __BLOCK__ -->                                            100\n                                         <!-- __ENDBLOCK__ -->\n                                    <\/option>\n                                                                    <option value=\"0\">\n                                        <!-- __BLOCK__ -->                                            All\n                                         <!-- __ENDBLOCK__ -->\n                                    <\/option>\n                                 <!-- __ENDBLOCK__ -->\n                            <\/select>\n                        <\/label>\n                        <small class=\"ms-2 text-muted\">\n                            Records per page\n                        <\/small>\n                    <\/div>\n                 <!-- __ENDBLOCK__ -->\n            <\/div>\n            <div class=\"col-auto overflow-auto mt-2 mt-sm-0\">\n                <!-- __BLOCK__ -->                    <div class=\"d-flex flex-column flex-lg-row align-items-sm-center justify-content-between\">\n    <!-- __BLOCK__ -->        <small class=\"text-muted d-block mb-2 my-md-2 me-1\">\n            Showing\n            <span class=\"font-semibold\">1<\/span>\n            to\n            <span class=\"font-semibold\">10<\/span>\n            of\n            <span class=\"font-semibold\">12<\/span>\n            Results\n        <\/small>\n     <!-- __ENDBLOCK__ -->\n\n    <!-- __BLOCK__ -->        <nav>\n            <ul class=\"pagination mb-0 ms-0 ms-sm-1\">\n                \n                <!-- __BLOCK__ -->                    <li\n                        class=\"page-item disabled\"\n                        aria-disabled=\"true\"\n                        aria-label=\"&laquo; Previous\"\n                    >\n                        <span\n                            class=\"page-link\"\n                            aria-hidden=\"true\"\n                        >&lsaquo;<\/span>\n                    <\/li>\n                 <!-- __ENDBLOCK__ -->\n\n                \n                <!-- __BLOCK__ -->                    \n                    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n\n                    \n                    <!-- __BLOCK__ -->                        <!-- __BLOCK__ -->                            <!-- __BLOCK__ -->                                <li\n                                    class=\"page-item active\"\n                                    wire:key=\"paginator-page-1\"\n                                    aria-current=\"page\"\n                                >\n                                    <span class=\"page-link\">1<\/span>\n                                <\/li>\n                             <!-- __ENDBLOCK__ -->\n                                                    <!-- __BLOCK__ -->                                <li\n                                    class=\"page-item\"\n                                    wire:key=\"paginator-page-2\"\n                                >\n                                    <button\n                                        type=\"button\"\n                                        class=\"page-link\"\n                                        wire:click=\"gotoPage(2)\"\n                                    >2<\/button>\n                                <\/li>\n                             <!-- __ENDBLOCK__ -->\n                         <!-- __ENDBLOCK__ -->\n                     <!-- __ENDBLOCK__ -->\n                 <!-- __ENDBLOCK__ -->\n\n                \n                <!-- __BLOCK__ -->                    <li class=\"page-item\">\n                        <button\n                            type=\"button\"\n                            class=\"page-link\"\n                            wire:click=\"nextPage\"\n                            wire:loading.attr=\"disabled\"\n                            rel=\"next\"\n                            aria-label=\"Next &raquo;\"\n                        >&rsaquo;\n                        <\/button>\n                    <\/li>\n                 <!-- __ENDBLOCK__ -->\n            <\/ul>\n        <\/nav>\n     <!-- __ENDBLOCK__ -->\n\n    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->\n<\/div>\n\n                 <!-- __ENDBLOCK__ -->\n            <\/div>\n        <\/footer>\n     <!-- __ENDBLOCK__ -->\n    <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n"
            }
        }
    ]
}

Now sure what is going wrong.

Here are installed packages in composer.json

    "require": {
        "php": "^8.0.2",
        "diglactic/laravel-breadcrumbs": "^8.1",
        "guzzlehttp/guzzle": "^7.2",
        "jenssegers/mongodb": "dev-master",
        "laravel/framework": "^10.0",
        "laravel/sanctum": "^3.0",
        "laravel/socialite": "^5.6",
        "laravel/tinker": "^2.7",
        "laravel/vapor-core": "^2.32",
        "livewire/livewire": "^3.0",
        "power-components/livewire-powergrid": "*",
        "spatie/laravel-permission": "^5.10",
        "yajra/laravel-datatables": "^10.0"
    },

[developerabdan]

As far as i know, powergrid v4 currently not working for livewire 3. You should wait for powergrid v5 that already support for livewire 3.

powergrid v5 currently work in progress