├── .github ├── lychee.toml └── workflows │ └── link_check.yml ├── .gitignore ├── README.md ├── _art ├── header.jpg ├── logo-sm.svg ├── logo-xs.svg ├── logo.svg ├── logo@1x-sm.png ├── logo@1x-xs.png ├── logo@1x.png ├── logo@2x-sm.png ├── logo@2x-xs.png ├── logo@2x.png ├── logo@3x-sm.png ├── logo@3x-xs.png ├── logo@3x.png ├── logo@4x-sm.png ├── logo@4x-xs.png ├── logo@4x.png ├── logomark.svg ├── logomark@1x.png ├── logomark@2x.png ├── logomark@3x.png ├── logomark@4x.png ├── logotype.svg ├── logotype@1x.png ├── logotype@2x.png ├── logotype@3x.png ├── logotype@4x.png └── socialcard.png ├── docs ├── .vitepress │ ├── config.mts │ └── theme │ │ ├── custom.css │ │ └── index.js ├── community-and-support │ ├── community.md │ ├── contribute.md │ └── support.md ├── expanding-powergrid │ ├── custom-theme.md │ ├── performance-monitoring.md │ └── publish-views.md ├── get-started │ ├── code-examples.md │ ├── create-powergrid-table.md │ ├── install.md │ ├── introduction.md │ ├── powergrid-configuration.md │ ├── rendering-a-powergrid-table.md │ └── troubleshooting.md ├── index.md ├── public │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── examples │ │ └── measure-retrieve-data-pulse.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── logomark1x.png │ ├── logomark2x.png │ ├── logomark3x.png │ ├── screenshot.png │ ├── screenshot_dark.png │ ├── screenshot_light.png │ ├── screenshot_orange.png │ ├── site.webmanifest │ └── sponsors │ │ ├── araxis.png │ │ ├── devsquad.png │ │ └── phpstorm.png ├── release-notes-and-upgrade │ ├── release-notes.md │ └── upgrade-guide.md ├── table-component │ ├── component-columns.md │ ├── component-configuration.md │ ├── data-source-fields.md │ └── data-source.md ├── table-features │ ├── bulk-actions.md │ ├── button-class.md │ ├── columns.md │ ├── conditional-rules.md │ ├── exporting-data.md │ ├── filters.md │ ├── header-and-footer.md │ ├── pagination.md │ ├── rows.md │ ├── searching-data.md │ ├── sorting-data.md │ └── updating-data.md └── testing │ └── index.md ├── package-lock.json ├── package.json └── run.sh /.github/lychee.toml: -------------------------------------------------------------------------------- 1 | ############################# Display ############################# 2 | 3 | # Verbose program output 4 | # Accepts log level: "error", "warn", "info", "debug", "trace" 5 | #verbose = "warn" 6 | 7 | # Don't show interactive progress bar while checking links. 8 | no_progress = false 9 | 10 | # Path to summary output file. 11 | output = ".github/link_report.md" 12 | 13 | ############################# Cache ############################### 14 | 15 | # Enable link caching. This can be helpful to avoid checking the same links on 16 | # multiple runs. 17 | cache = true 18 | 19 | # Discard all cached requests older than this duration. 20 | max_cache_age = "1d" 21 | 22 | ############################# Runtime ############################# 23 | 24 | # Number of threads to utilize. 25 | # Defaults to number of cores available to the system if omitted. 26 | threads = 2 27 | 28 | # Maximum number of allowed redirects. 29 | max_redirects = 10 30 | 31 | # Maximum number of allowed retries before a link is declared dead. 32 | max_retries = 2 33 | 34 | # Maximum number of concurrent link checks. 35 | max_concurrency = 14 36 | 37 | ############################# Requests ############################ 38 | 39 | # User agent to send with each request. 40 | user_agent = "curl/7.83. 1" 41 | 42 | # Website timeout from connect to response finished. 43 | timeout = 20 44 | 45 | # Minimum wait time in seconds between retries of failed requests. 46 | retry_wait_time = 2 47 | 48 | # Comma-separated list of accepted status codes for valid links. 49 | accept = [200, 429] 50 | 51 | # Proceed for server connections considered insecure (invalid TLS). 52 | insecure = false 53 | 54 | # Only test links with the given schemes (e.g. https). 55 | # Omit to check links with any scheme. 56 | scheme = [ "http" ] 57 | 58 | # When links are available using HTTPS, treat HTTP links as errors. 59 | require_https = false 60 | 61 | # Request method 62 | method = "get" 63 | 64 | # Custom request headers 65 | headers = [] 66 | 67 | # Remap URI matching pattern to different URI. 68 | remap = [ "https://example.com http://example.invalid" ] 69 | 70 | # Base URL or website root directory to check relative URLs. 71 | #base = "https://livewire-powergrid.com" 72 | 73 | # HTTP basic auth support. This will be the username and password passed to the 74 | # authorization HTTP header. See 75 | # 76 | #basic_auth = "user:pwd" 77 | 78 | ############################# Exclusions ########################## 79 | 80 | # Skip missing input files (default is to error if they don't exist). 81 | skip_missing = false 82 | 83 | # Check links inside `` and `
` blocks as well as Markdown code
 84 | # blocks.
 85 | include_verbatim = false
 86 | 
 87 | # Ignore case of paths when matching glob patterns.
 88 | glob_ignore_case = false
 89 | 
 90 | # Exclude URLs and mail addresses from checking (supports regex).
 91 | #exclude = [ '.*\.github.com\.*' ]
 92 | # receiving forbidden but valid link, receiving timeout but valid link
 93 | exclude = []
 94 | 
 95 | 
 96 | # Exclude these filesystem paths from getting checked.
 97 | #exclude_path = ["file/path/to/Ignore", "./other/file/path/to/Ignore"]
 98 | 
 99 | # URLs to check (supports regex). Has preference over all excludes.
100 | #include = [ 'gist\.github\.com.*' ]
101 | 
102 | # Exclude all private IPs from checking.
103 | # Equivalent to setting `exclude_private`, `exclude_link_local`, and
104 | # `exclude_loopback` to true.
105 | exclude_all_private = false
106 | 
107 | # Exclude private IP address ranges from checking.
108 | exclude_private = false
109 | 
110 | # Exclude link-local IP address range from checking.
111 | exclude_link_local = false
112 | 
113 | # Exclude loopback IP address range and localhost from checking.
114 | exclude_loopback = false
115 | 
116 | # Exclude all mail addresses from checking.
117 | exclude_mail = false
118 | 


--------------------------------------------------------------------------------
/.github/workflows/link_check.yml:
--------------------------------------------------------------------------------
 1 | # This action checks for broken links
 2 | name: Check Links
 3 | 
 4 | on:
 5 |   push:
 6 |   pull_request:
 7 | 
 8 | jobs:
 9 |   linkChecker:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - uses: actions/checkout@v4
13 | 
14 |       - name: 🔗 Check Links
15 |         uses: lycheeverse/lychee-action@v1
16 |         with:
17 |           fail: true
18 |           args: --config .github/lychee.toml './docs/*.md'
19 |         env:
20 |           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | .temp
 3 | .cache
 4 | node_modules
 5 | .temp
 6 | .cache
 7 | .env
 8 | docs/.vitepress/dist
 9 | docs/.vitepress/cache
10 | .idea
11 | .DS_Store
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 

 2 | 	
PowerGrid Header

 3 | 

 4 | 
 5 | ------
 6 | 
 7 | # PowerGrid Doc
 8 | 
 9 | Documentation for [Livewire PowerGrid](https://github.com/Power-Components/livewire-powergrid).
10 | 
11 | ## Support
12 | 
13 | For questions, issues, bug reports and feature requests, please use [PowerGrid](https://github.com/Power-Components/livewire-powergrid) official GitHub Repository.
14 | 


--------------------------------------------------------------------------------
/_art/header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/header.jpg


--------------------------------------------------------------------------------
/_art/logo-sm.svg:
--------------------------------------------------------------------------------
 1 | 
 2 |     PowerGrid medium logo
 3 |     
 4 |     
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 | 
11 | 


--------------------------------------------------------------------------------
/_art/logo-xs.svg:
--------------------------------------------------------------------------------
1 | 
2 |     PowerGrid small logo
3 |     
4 |     
5 |     
6 | 
7 | 


--------------------------------------------------------------------------------
/_art/logo.svg:
--------------------------------------------------------------------------------
 1 | 
 2 |     PowerGrid logo
 3 |     
 4 |     
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |     
12 |     
13 |     
14 |     
15 | 
16 | 


--------------------------------------------------------------------------------
/_art/logo@1x-sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logo@1x-sm.png


--------------------------------------------------------------------------------
/_art/logo@1x-xs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logo@1x-xs.png


--------------------------------------------------------------------------------
/_art/logo@1x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logo@1x.png


--------------------------------------------------------------------------------
/_art/logo@2x-sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logo@2x-sm.png


--------------------------------------------------------------------------------
/_art/logo@2x-xs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logo@2x-xs.png


--------------------------------------------------------------------------------
/_art/logo@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logo@2x.png


--------------------------------------------------------------------------------
/_art/logo@3x-sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logo@3x-sm.png


--------------------------------------------------------------------------------
/_art/logo@3x-xs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logo@3x-xs.png


--------------------------------------------------------------------------------
/_art/logo@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logo@3x.png


--------------------------------------------------------------------------------
/_art/logo@4x-sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logo@4x-sm.png


--------------------------------------------------------------------------------
/_art/logo@4x-xs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logo@4x-xs.png


--------------------------------------------------------------------------------
/_art/logo@4x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logo@4x.png


--------------------------------------------------------------------------------
/_art/logomark.svg:
--------------------------------------------------------------------------------
 1 | 
 2 |     PowerGrid logomark
 3 |     
 4 |     
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |     
12 |     
13 | 
14 | 


--------------------------------------------------------------------------------
/_art/logomark@1x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logomark@1x.png


--------------------------------------------------------------------------------
/_art/logomark@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logomark@2x.png


--------------------------------------------------------------------------------
/_art/logomark@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logomark@3x.png


--------------------------------------------------------------------------------
/_art/logomark@4x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logomark@4x.png


--------------------------------------------------------------------------------
/_art/logotype.svg:
--------------------------------------------------------------------------------
1 | 
2 |     PowerGrid logotype
3 |     
4 |     
5 | 
6 | 


--------------------------------------------------------------------------------
/_art/logotype@1x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logotype@1x.png


--------------------------------------------------------------------------------
/_art/logotype@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logotype@2x.png


--------------------------------------------------------------------------------
/_art/logotype@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logotype@3x.png


--------------------------------------------------------------------------------
/_art/logotype@4x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/logotype@4x.png


--------------------------------------------------------------------------------
/_art/socialcard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/_art/socialcard.png


--------------------------------------------------------------------------------
/docs/.vitepress/config.mts:
--------------------------------------------------------------------------------
  1 | import { defineConfig } from 'vitepress'
  2 | 
  3 | export default defineConfig({
  4 |   ignoreDeadLinks: true,
  5 |   title: "Livewire PowerGrid",
  6 |   description: "PowerGrid Docs",
  7 |   head: [
  8 |     ['link', { rel: 'icon', type: 'image/png', href: 'logomark2x.png' }],
  9 |     ['link', { rel: "icon", type: "image/png", sizes: "16x16", href: "favicon.ico"}],
 10 |     ['link', { rel: "apple-touch-icon", sizes: "180x180", href: "apple-touch-icon.png"}],
 11 |     ['link', { rel: "icon", type: "image/png", sizes: "32x32", href: "favicon-32x32.png"}],
 12 |     ['link', { rel: "icon", type: "image/png", sizes: "16x16", href: "favicon-16x16.png"}],
 13 |     ['link', { rel: "manifest", href: "site.webmanifest"}],
 14 |     ['meta', { name: 'og:title', content: 'Livewire PowerGrid - Version 5'}],
 15 |     ['meta', { name: 'og:description', content: 'Livewire PowerGrid is a component for generating dynamic tables with your Laravel Models and Collections.'}],
 16 |     ['meta', { name: 'application-name', content: 'Livewire PowerGrid' }],
 17 |     ['meta', { name: 'apple-mobile-web-app-title', content: 'Livewire PowerGrid' }],
 18 |     ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
 19 |     ['meta', { name: 'theme-color', content: '#3eaf7c' }],
 20 |     ['meta', { name: 'author', content: '@luanfreitasdev and @dansysanalyst' }],
 21 |     ['meta', { name: 'keywords', content: 'laravel, livewire, datatable,  data table, grid, php, alpine, tall stack, tailwind, bootstrap, table example, laravel package, sorting tables, table ui, table html' }],
 22 |   ],
 23 |   markdown: {
 24 |     toc: {
 25 |         level: [2],
 26 |       },
 27 |         anchor: { level: [1, 2, 3, 4] },
 28 |   },
 29 |   appearance: 'dark',
 30 |   lang: 'en-US',
 31 |   themeConfig: {
 32 |     outline: [2, 3],
 33 |     logo: '/logomark1x.png',
 34 |     siteTitle: 'Livewire PowerGrid',
 35 |     nav: [
 36 |       { text: 'Home', link: '/' },
 37 |       {
 38 |         text: '6.x',
 39 |         items: [
 40 |           {
 41 |             text: '5.x',
 42 |             link: 'https://github.com/Power-Components/powergrid-doc/tree/5x/docs'
 43 |           },
 44 |           {
 45 |             text: '4.x',
 46 |             link: 'https://github.com/Power-Components/powergrid-doc/tree/4x/docs'
 47 |           },
 48 |           {
 49 |             text: '3.x',
 50 |             link: 'https://github.com/Power-Components/powergrid-doc/tree/3x/docs'
 51 |           },
 52 |           {
 53 |             text: '2.x',
 54 |             link: 'https://github.com/Power-Components/powergrid-doc/tree/2x/docs'
 55 |           }
 56 |         ]
 57 |       }
 58 |     ],
 59 | 
 60 |     sidebar: [
 61 |       {
 62 |         text: '📄 Release Notes & Upgrade Guide',
 63 |         items: [
 64 |           { text: 'Release Notes', link: '/release-notes-and-upgrade/release-notes' },
 65 |           { text: 'Upgrade Guide', link: '/release-notes-and-upgrade/upgrade-guide' },
 66 |         ],
 67 |         collapsed: true
 68 |       },
 69 |       {
 70 |         text: '🛟 Community & Support',
 71 |         items: [
 72 |           { text: 'PowerGrid Community', link: '/community-and-support/community' },
 73 |           { text: 'Support', link: '/community-and-support/support' },
 74 |           { text: 'Contribute', link: '/community-and-support/contribute' },
 75 |         ],
 76 |         collapsed: true
 77 |       },
 78 |       {
 79 |         text: '🚀 Get Started',
 80 |         items: [
 81 |           { text: 'Introduction', link: '/get-started/introduction' },
 82 |           { text: '⌨️ Code Examples', link: '/get-started/code-examples' },
 83 |           { text: '🧨 Troubleshooting', link: '/get-started/troubleshooting' },
 84 |           { text: '1. Install', link: '/get-started/install' },
 85 |           { text: '2. PowerGrid Configuration', link: '/get-started/powergrid-configuration' },
 86 |           { text: '3. Create a PowerGrid Table', link: '/get-started/create-powergrid-table' },
 87 |           { text: '4. Rendering a PowerGrid Table', link: '/get-started/rendering-a-powergrid-table' },
 88 |         ],
 89 |         collapsed: false
 90 |       },
 91 |       {
 92 |         text: '⚡ Table Component',
 93 |         items: [
 94 |           { text: 'Data Source', link: '/table-component/data-source' },
 95 |           { text: 'Data Source Fields', link: '/table-component/data-source-fields' },
 96 |           { text: 'Component Columns', link: '/table-component/component-columns' },
 97 |           { text: 'Component Configuration', link: '/table-component/component-configuration' },
 98 |         ],
 99 |         collapsed: false,
100 |         collapsible: false,
101 |       },
102 |       {
103 |         text: '🧰 Table Features',
104 |         items: [
105 |               { text: 'Header & Footer', link: '/table-features/header-and-footer' },
106 |               { text: 'Columns', link: '/table-features/columns' },
107 |               { text: 'Rows', link: '/table-features/rows' },
108 |               { text: 'Pagination', link: '/table-features/pagination' },
109 |               { text: 'Buttons', link: '/table-features/button-class' },
110 |               { text: 'Bulk Actions', link: '/table-features/bulk-actions' },
111 |               { text: 'Conditional Rules', link: '/table-features/conditional-rules' },
112 |               { text: 'Filters', link: '/table-features/filters' },
113 |               { text: 'Searching Data', link: '/table-features/searching-data' },
114 |               { text: 'Sorting Data', link: '/table-features/sorting-data' },
115 |               { text: 'Updating Data', link: '/table-features/updating-data' },
116 |               { text: 'Exporting Data', link: '/table-features/exporting-data' },
117 |         ],
118 |         collapsed: false,
119 |         collapsible: false,
120 |       },
121 |       {
122 |         text: '🛠️ Expanding PowerGrid',
123 |         items: [
124 |           { text: 'Performance Monitoring', link: '/expanding-powergrid/performance-monitoring' },
125 |           { text: 'Publish Views', link: '/expanding-powergrid/publish-views' },
126 |           { text: 'Custom Theme', link: '/expanding-powergrid/custom-theme' },
127 |         ],
128 |         collapsed: false
129 |       },
130 |       {
131 |         text: 'Testing',
132 |         link: '/testing/index.md'
133 |       }
134 |     ],
135 | 
136 |     socialLinks: [
137 |       { icon: 'github', link: 'https://github.com/Power-Components/livewire-powergrid' },
138 |     ],
139 |     footer: {
140 |       message: 'Created By Luan Freitas and @DanSysAnalyst',
141 |     },
142 |     editLink: {
143 |       pattern: 'https://github.com/power-components/powergrid-doc/edit/5x/docs/:path',
144 |       text: 'Edit this page on GitHub'
145 |     },
146 |     search: {
147 |       provider: 'algolia',
148 |       options: {
149 |         appId: '7M4C366U6U',
150 |         apiKey: '0a0022f159f38849b0dbd2199c12f081',
151 |         indexName: 'livewire-powergridLivewire PowerGrid Site',
152 |       }
153 |     }
154 |   },
155 |   sitemap: {
156 |     hostname: 'https://livewire-powergrid.com'
157 |   }
158 | })
159 | 


--------------------------------------------------------------------------------
/docs/.vitepress/theme/custom.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |     --vp-c-brand-1: #f69e08;
 3 |     --vp-c-brand-2: #c78108;
 4 |     --vp-button-brand-bg: #ee9908;
 5 | }
 6 | 
 7 | .dark {
 8 |     --vp-button-brand-bg: #be7b08;;
 9 | }
10 | 
11 | /*
12 | .vp-doc :not(pre) > code
13 | {
14 |   background-color: #fef0d7 !important;
15 | }
16 | */
17 | 
18 | .vp-doc a {
19 |  color: #ca8207;
20 | }
21 | 
22 | .pre, code, kbd, samp {
23 |  color: #ca8207 !important;
24 | }
25 | 
26 | .vp-doc p,
27 | .vp-doc summary {
28 |   text-align: justify;
29 |   text-justify: inter-word;
30 | }
31 | 
32 | .success {
33 |   padding-top: 8px;
34 |   background-color: #EDF9D2;
35 |   outline: #638613 solid 1px;
36 |   color: #638613;
37 | }
38 | 
39 | :root.dark .success {
40 |   background-color: #064E37;
41 |   outline:#5aa358 solid 1.5px;
42 |   color: #bfc8aa;
43 | }
44 | 
45 | .success a {
46 |     color: #638613 !important;
47 | }
48 | 
49 | :root.dark .success a {
50 |     color: #c8e18e !important;
51 | }
52 | 
53 | .onlinedemo {
54 |   padding-top: 8px;
55 |   background-color: #F8D2F9;
56 |   outline: #841285 solid 1px;
57 |   color: #841285;
58 | }
59 | 
60 | :root.dark .onlinedemo {
61 |   background-color: #7b487c;
62 |   color: #F3D7F4;
63 |   outline: #BA80F4 solid 1.5px;
64 | }
65 | 
66 | :root.dark .onlinedemo a {
67 |     color: #ffdeff !important;
68 | }
69 | 
70 | .onlinedemo a {
71 |     color: #841285 !important;
72 |     font-weight: 600;
73 |     text-decoration: underline;
74 |     text-underline-offset: 2px;
75 |     transition: opacity 0.25s;
76 | }
77 | 
78 | .danger {
79 |   outline: var(--vp-c-danger-1) solid 1px;
80 | }
81 | 
82 | .tip {
83 |   outline: #b8bbff solid 1px;
84 | }
85 | 
86 | .info {
87 |   outline: #c6c9d4 solid 1px;
88 | }
89 | 


--------------------------------------------------------------------------------
/docs/.vitepress/theme/index.js:
--------------------------------------------------------------------------------
1 | import DefaultTheme from 'vitepress/theme'
2 | import './custom.css'
3 | 
4 | export default DefaultTheme
5 | 


--------------------------------------------------------------------------------
/docs/community-and-support/community.md:
--------------------------------------------------------------------------------
 1 | # PowerGrid Community
 2 | 
 3 | ## Join the community
 4 | 
 5 | Interact with the PowerGrid community at our [GitHub Discussions](https://github.com/Power-Components/livewire-powergrid/discussions) tab.
 6 | 
 7 | ## Video Resources
 8 | 
 9 | Check out some PowerGrid reviews and usage videos on Youtube:
10 | 
11 | - Livewire PowerGrid: Quick Datatable Package REVIEW by [Laravel Daily](https://www.youtube.com/watch?v=Qj0GLZJzDLY&t=4s)
12 | 
13 | - Laravel Livewire: Crea DataTables Profesionales en Minutos con PowerGrid by [
14 | Code with Luis](https://www.youtube.com/watch?v=sV6Rs2y8fWk) (🇸🇻 Spanish)
15 | 
16 | - Livewire PowerGrid com Luan Freitas - Live Coding at [Live beer and code](https://www.youtube.com/watch?v=Mml5aagMOm4&t=20s) (🇧🇷 Portuguese)
17 | 
18 | - Tio Jobs Analisa As Novas Action Rules Do Pacote Power-Components PowerGrid by [Icaro Jobs](https://www.youtube.com/watch?v=8WLLHan1b-U) (🇧🇷 Portuguese)
19 | 
20 | 

21 | 
22 | > All videos were recorded by community members. If you like them, don't forget to hit 👍 Like, share and subscribe to their channels.


--------------------------------------------------------------------------------
/docs/community-and-support/contribute.md:
--------------------------------------------------------------------------------
1 | # Contribute
2 | 
3 | 🙏 Thank you for your interest in contributting to PowerGrid!
4 | 
5 | You can help PowerGrid in a number of ways; contributing goes beyond writing code.
6 | 
7 | Please read the [Contributing Guide](https://github.com/Power-Components/livewire-powergrid/blob/5.x/CONTRIBUTING.md) to see what kind of contributions you can make and what steps you should follow.
8 | 


--------------------------------------------------------------------------------
/docs/community-and-support/support.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Support
 3 | 
 4 | PowerGrid support is entirely centered in our [GitHub Repository](https://github.com/Power-Components/livewire-powergrid/).
 5 | 
 6 | ## How can I....?
 7 | 
 8 | If you have questions like __"How can I...?"__ or __"I would like to do...?"__,  please visit PowerGrid's [GitHub Discussions](https://github.com/Power-Components/livewire-powergrid/discussions) tab.
 9 | 
10 | The Discussions tab is a dedicated space where you can post your questions, find answers and interact with the PowerGrid community.
11 | 
12 | ## Technical Support & Bug Reports
13 | 
14 | For technical inquiries, bug reports, and feature requests, please use the [GitHub Issues](https://github.com/Power-Components/livewire-powergrid/issues).
15 | 


--------------------------------------------------------------------------------
/docs/expanding-powergrid/custom-theme.md:
--------------------------------------------------------------------------------
  1 | # Custom Theme
  2 | 
  3 | This section covers PowerGrid Custom Themes.
  4 | 
  5 | Here you will find:
  6 | 
  7 | [[toc]]
  8 | 
  9 | ## Introduction
 10 | 
 11 | You can start customizing the [default themes](/get-started/powergrid-configuration.html#_2-choose-a-css-theme) to create your own variation in a few steps.
 12 | 
 13 | You may also have a look at the [Personalizing Header and Footer](/table-features/header-and-footer.html#personalizing-header-footer) subsection before creating a new theme.
 14 | 
 15 | ## Creating your Custom Theme
 16 | 
 17 | To create your Custom Theme, first [install](/get-started/install) PowerGrid and then, follow the steps below.
 18 | 
 19 | 1. Open the directory `vendor/power-components/livewire-powergrid/src/Themes/`
 20 | 
 21 | 2. Copy the theme you want to use as base (`Tailwind.php`  or `Bootstrap5.php` ) to the directory where you want  you theme to live (for example `app\PowerGridThemes\BigFonts.php`).
 22 | 
 23 | 3. Now, modify the `namespace`,  `class name` and customize the css to your needs.
 24 | 
 25 | The example below modifies the Tailwind theme:
 26 | 
 27 | ```php
 28 |  [
 42 |                 'base'      => 'p-3 align-middle inline-block min-w-full w-full sm:px-6 lg:px-8',
 43 |                 'div'       => 'rounded-t-lg relative border-x border-t border-pg-primary-200 dark:bg-pg-primary-700 dark:border-pg-primary-600',
 44 |                 'table'     => 'min-w-full dark:!bg-primary-800',
 45 |                 'container' => '-my-2 overflow-x-auto sm:-mx-3 lg:-mx-8',
 46 |                 'actions'   => 'flex gap-2',
 47 |             ],
 48 | 
 49 |             'header' => [
 50 |                 'thead'    => 'shadow-sm rounded-t-lg bg-pg-primary-100 dark:bg-pg-primary-900',
 51 |                 'tr'       => '',
 52 |                 'th'       => 'font-extrabold px-3 py-3 text-left text-xs text-pg-primary-700 tracking-wider whitespace-nowrap dark:text-pg-primary-300',
 53 |                 'thAction' => '!font-bold',
 54 |             ],
 55 | 
 56 |             'body' => [
 57 |                 'tbody'              => 'text-pg-primary-800',
 58 |                 'tbodyEmpty'         => '',
 59 |                 'tr'                 => 'border-b border-pg-primary-100 dark:border-pg-primary-600 hover:bg-pg-primary-50 dark:bg-pg-primary-800 dark:hover:bg-pg-primary-700',
 60 |                 'td'                 => 'px-3 py-2 whitespace-nowrap dark:text-pg-primary-200',
 61 |                 'tdEmpty'            => 'p-2 whitespace-nowrap dark:text-pg-primary-200',
 62 |                 'tdSummarize'        => 'p-2 whitespace-nowrap dark:text-pg-primary-200 text-sm text-pg-primary-600 text-right space-y-2',
 63 |                 'trSummarize'        => '',
 64 |                 'tdFilters'          => '',
 65 |                 'trFilters'          => '',
 66 |                 'tdActionsContainer' => 'flex gap-2',
 67 |             ],
 68 |         ];
 69 |     }
 70 | 
 71 |     public function footer(): array
 72 |     {
 73 |         return [
 74 |             'view'   => $this->root() . '.footer',
 75 |             'select' => 'appearance-none !bg-none focus:ring-primary-600 focus-within:focus:ring-primary-600 focus-within:ring-primary-600 dark:focus-within:ring-primary-600 flex rounded-md ring-1 transition focus-within:ring-2 dark:ring-pg-primary-600 dark:text-pg-primary-300 text-gray-600 ring-gray-300 dark:bg-pg-primary-800 bg-white dark:placeholder-pg-primary-400 rounded-md border-0 bg-transparent py-1.5 px-4 pr-7 ring-0 placeholder:text-gray-400 focus:outline-none sm:text-sm sm:leading-6 w-auto',
 76 |         ];
 77 |     }
 78 | 
 79 |     public function cols(): array
 80 |     {
 81 |         return [
 82 |             'div' => 'select-none flex items-center gap-1',
 83 |         ];
 84 |     }
 85 | 
 86 |     public function editable(): array
 87 |     {
 88 |         return [
 89 |             'view'  => $this->root() . '.editable',
 90 |             'input' => 'focus:ring-primary-600 focus-within:focus:ring-primary-600 focus-within:ring-primary-600 dark:focus-within:ring-primary-600 flex rounded-md ring-1 transition focus-within:ring-2 dark:ring-pg-primary-600 dark:text-pg-primary-300 text-gray-600 ring-gray-300 dark:bg-pg-primary-800 bg-white dark:placeholder-pg-primary-400 w-full rounded-md border-0 bg-transparent py-1.5 px-2 ring-0 placeholder:text-gray-400 focus:outline-none sm:text-sm sm:leading-6 w-full',
 91 |         ];
 92 |     }
 93 | 
 94 |     public function toggleable(): array
 95 |     {
 96 |         return [
 97 |             'view' => $this->root() . '.toggleable',
 98 |         ];
 99 |     }
100 | 
101 |     public function checkbox(): array
102 |     {
103 |         return [
104 |             'th'    => 'px-6 py-3 text-left text-xs font-medium text-pg-primary-500 tracking-wider',
105 |             'base'  => '',
106 |             'label' => 'flex items-center space-x-3',
107 |             'input' => 'form-checkbox dark:border-dark-600 border-1 dark:bg-dark-800 rounded border-gray-300 bg-white transition duration-100 ease-in-out h-4 w-4 text-primary-500 focus:ring-primary-500 dark:ring-offset-dark-900',
108 |         ];
109 |     }
110 | 
111 |     public function radio(): array
112 |     {
113 |         return [
114 |             'th'    => 'px-6 py-3 text-left text-xs font-medium text-pg-primary-500 tracking-wider',
115 |             'base'  => '',
116 |             'label' => 'flex items-center space-x-3',
117 |             'input' => 'form-radio rounded-full transition ease-in-out duration-100',
118 |         ];
119 |     }
120 | 
121 |     public function filterBoolean(): array
122 |     {
123 |         return [
124 |             'view'   => $this->root() . '.filters.boolean',
125 |             'base'   => 'min-w-[5rem]',
126 |             'select' => 'appearance-none !bg-none focus:ring-primary-600 focus-within:focus:ring-primary-600 focus-within:ring-primary-600 dark:focus-within:ring-primary-600 flex rounded-md ring-1 transition focus-within:ring-2 dark:ring-pg-primary-600 dark:text-pg-primary-300 text-gray-600 ring-gray-300 dark:bg-pg-primary-800 bg-white dark:placeholder-pg-primary-400 w-full rounded-md border-0 bg-transparent py-1.5 px-2 ring-0 placeholder:text-gray-400 focus:outline-none sm:text-sm sm:leading-6 w-full',
127 |         ];
128 |     }
129 | 
130 |     public function filterDatePicker(): array
131 |     {
132 |         return [
133 |             'base'  => '',
134 |             'view'  => $this->root() . '.filters.date-picker',
135 |             'input' => 'flatpickr flatpickr-input focus:ring-primary-600 focus-within:focus:ring-primary-600 focus-within:ring-primary-600 dark:focus-within:ring-primary-600 flex rounded-md ring-1 transition focus-within:ring-2 dark:ring-pg-primary-600 dark:text-pg-primary-300 text-gray-600 ring-gray-300 dark:bg-pg-primary-800 bg-white dark:placeholder-pg-primary-400 w-full rounded-md border-0 bg-transparent py-1.5 px-2 ring-0 placeholder:text-gray-400 focus:outline-none sm:text-sm sm:leading-6 w-auto',
136 |         ];
137 |     }
138 | 
139 |     public function filterMultiSelect(): array
140 |     {
141 |         return [
142 |             'view'   => $this->root() . '.filters.multi-select',
143 |             'base'   => 'inline-block relative w-full',
144 |             'select' => 'mt-1',
145 |         ];
146 |     }
147 | 
148 |     public function filterNumber(): array
149 |     {
150 |         return [
151 |             'view'  => $this->root() . '.filters.number',
152 |             'input' => 'w-full min-w-[5rem] block focus:ring-primary-600 focus-within:focus:ring-primary-600 focus-within:ring-primary-600 dark:focus-within:ring-primary-600 flex rounded-md ring-1 transition focus-within:ring-2 dark:ring-pg-primary-600 dark:text-pg-primary-300 text-gray-600 ring-gray-300 dark:bg-pg-primary-800 bg-white dark:placeholder-pg-primary-400 rounded-md border-0 bg-transparent py-1.5 pl-2 ring-0 placeholder:text-gray-400 focus:outline-none sm:text-sm sm:leading-6',
153 |         ];
154 |     }
155 | 
156 |     public function filterSelect(): array
157 |     {
158 |         return [
159 |             'view'   => $this->root() . '.filters.select',
160 |             'base'   => '',
161 |             'select' => 'appearance-none !bg-none focus:ring-primary-600 focus-within:focus:ring-primary-600 focus-within:ring-primary-600 dark:focus-within:ring-primary-600 flex rounded-md ring-1 transition focus-within:ring-2 dark:ring-pg-primary-600 dark:text-pg-primary-300 text-gray-600 ring-gray-300 dark:bg-pg-primary-800 bg-white dark:placeholder-pg-primary-400 rounded-md border-0 bg-transparent py-1.5 px-2 ring-0 placeholder:text-gray-400 focus:outline-none sm:text-sm sm:leading-6 w-full',
162 |         ];
163 |     }
164 | 
165 |     public function filterInputText(): array
166 |     {
167 |         return [
168 |             'view'   => $this->root() . '.filters.input-text',
169 |             'base'   => 'min-w-[9.5rem]',
170 |             'select' => 'appearance-none !bg-none focus:ring-primary-600 focus-within:focus:ring-primary-600 focus-within:ring-primary-600 dark:focus-within:ring-primary-600 flex rounded-md ring-1 transition focus-within:ring-2 dark:ring-pg-primary-600 dark:text-pg-primary-300 text-gray-600 ring-gray-300 dark:bg-pg-primary-800 bg-white dark:placeholder-pg-primary-400 w-full rounded-md border-0 bg-transparent py-1.5 px-2 ring-0 placeholder:text-gray-400 focus:outline-none sm:text-sm sm:leading-6 w-full',
171 |             'input'  => 'focus:ring-primary-600 focus-within:focus:ring-primary-600 focus-within:ring-primary-600 dark:focus-within:ring-primary-600 flex rounded-md ring-1 transition focus-within:ring-2 dark:ring-pg-primary-600 dark:text-pg-primary-300 text-gray-600 ring-gray-300 dark:bg-pg-primary-800 bg-white dark:placeholder-pg-primary-400 w-full rounded-md border-0 bg-transparent py-1.5 px-2 ring-0 placeholder:text-gray-400 focus:outline-none sm:text-sm sm:leading-6 w-full',
172 |         ];
173 |     }
174 | 
175 |     public function searchBox(): array
176 |     {
177 |         return [
178 |             'input'      => 'focus:ring-primary-600 focus-within:focus:ring-primary-600 focus-within:ring-primary-600 dark:focus-within:ring-primary-600 flex items-center rounded-md ring-1 transition focus-within:ring-2 dark:ring-pg-primary-600 dark:text-pg-primary-300 text-gray-600 ring-gray-300 dark:bg-pg-primary-800 bg-white dark:placeholder-pg-primary-400 w-full rounded-md border-0 bg-transparent py-1.5 px-2 ring-0 placeholder:text-gray-400 focus:outline-none sm:text-sm sm:leading-6 w-full pl-8',
179 |             'iconClose'  => 'text-pg-primary-400 dark:text-pg-primary-200',
180 |             'iconSearch' => 'text-pg-primary-300 mr-2 w-5 h-5 dark:text-pg-primary-200',
181 |         ];
182 |     }
183 | }
184 | ```
185 | 
186 | 4. Finally, you can [configure](/get-started/powergrid-configuration.html#_2-choose-a-css-theme) PowerGrid to use your new theme:
187 | 
188 | ```php{10}
189 | // config/livewire-powergrid.php
190 | 
191 | /*
192 | |--------------------------------------------------------------------------
193 | | Theme
194 | |--------------------------------------------------------------------------
195 | */
196 | 
197 | 'theme' => \PowerComponents\LivewirePowerGrid\Themes\Tailwind::class, // [!code --]
198 | 'theme' => \App\PowerGridThemes\BigFonts::class, // [!code ++]
199 | ```
200 | 
201 | 
202 | Alternatively, you can apply your custom theme only in specific PowerGrid Tables:
203 | 
204 | Just modify the `customThemeClass()` to return your new theme class.
205 | 
206 | ```php
207 | class DishTable extends PowerGridComponent
208 | {
209 |     public function customThemeClass(): ?string
210 |     {
211 |         return \App\PowerGridThemes\BigFonts::class;
212 |     }
213 | ```
214 | 
215 | ## Note for Tailwind CSS
216 | 
217 | When using Tailwind CSS you may need to add your custom theme file to your Tailwind configuration as a content in order to scan your file for classes during the build process. The following shows an example of how to do so when using the above `app\PowerGridThemes\BigFonts.php` file as an example.
218 | 
219 | 1. Add the following file to your `tailwind.config.js` in the `content` key:
220 | 
221 | ```js
222 | module.exports = {
223 |     ...
224 | 
225 |     content: [
226 |         '...',
227 |         './app/PowerGridThemes/BigFonts.php', // replace with path to your custom theme [!code ++]
228 |     ],
229 | 
230 |     ...
231 | }
232 | ```
233 | 
234 | 2. Rebuild your assets using `npm run build` or `npm run dev`.


--------------------------------------------------------------------------------
/docs/expanding-powergrid/performance-monitoring.md:
--------------------------------------------------------------------------------
  1 | # Perfomance Monitoring
  2 | 
  3 | This section covers how to monitor your PowerGrid Component performance.
  4 | 
  5 | Here you will find:
  6 | 
  7 | [[toc]]
  8 | 
  9 | ## Measure Performance
 10 | 
 11 | Sometimes, you may experience a component that takes too long to render. To find the root of the problem, PowerGrid offers a built-in Performance Measurement tool.
 12 | 
 13 | PowerGrid Performance works out-of-the-box, and it can measure metrics like data retrieval time and database query time. In addition, it can inform you if a cache was used and which queries were performed.
 14 | 
 15 | These metrics can be very helpful to identify common problems, such as "N+1 Queries", payload size, and overload in PowerGrid's internal Table `$rows` processing.
 16 | 
 17 | ## Retrieve Performance Results
 18 | 
 19 | You can access the results of PowerGrid Performance Measurement using Laravel Events or via a dedicated Laravel Pulse card.
 20 | 
 21 | ### Laravel Events
 22 | 
 23 | To retrieve the PowerGrid Performance Measurement via event, you must add an event listener to `PowerGridPerformanceData::class` in your Application Service Provider.
 24 | 
 25 | #### First, add the PowerGrid table component you want to listen to:
 26 | 
 27 | ```php
 28 | public bool $measurePerformance = true;
 29 | ```
 30 | 
 31 | You can use several options to access the data sent with the event. The most straightforward approach is using [Laravel Logs](https://laravel.com/docs/logging).
 32 | 
 33 | The example below uses [LaraDumps](https://laradumps.dev) to capture and display the event data. LaraDumps is a free, open-source debug tool that helps you assess your Component performance in a convenient way.
 34 | 
 35 | ```php{3,4,8-11}
 36 | // app/Providers/AppServiceProvider.php
 37 | 
 38 | use PowerComponents\LivewirePowerGrid\Events\PowerGridPerformanceData; // [!code ++]
 39 | use Illuminate\Support\Facades\Event; // [!code ++]
 40 | 
 41 | public function register() 
 42 | {
 43 |     Event::listen(PowerGridPerformanceData::class, function (PowerGridPerformanceData $data) {// [!code ++]
 44 |         ds($data); //send data to LaraDumps application// [!code ++]
 45 |         //logger($data); //log data into laravel.log// [!code ++]
 46 |     });// [!code ++]
 47 | }
 48 | ```
 49 | 
 50 | The contents of `PowerGridPerformanceData` will look something like this:
 51 | 
 52 | ```plain
 53 | tableName: "DishTable",
 54 | retrieveDataInMs: 12.0,
 55 | queriesTimeInMs: 8.31,
 56 | isCached: false,
 57 | queries: [
 58 |     0 => [
 59 |         "query" => "select count(*) as aggregate from `dishes`",
 60 |         "bindings" => [],
 61 |         "time" => 23.4
 62 |     ]
 63 | ]
 64 | ```
 65 | 
 66 | ---
 67 | 
 68 | ### Laravel Pulse
 69 | 
 70 | PowerGrid can be integrated into your Laravel Pulse Dashboard using the PowerGrid Performance Card.
 71 | 
 72 | You can read more about Laravel Pulse in the [official documentation](https://laravel.com/docs/pulse).
 73 | 
 74 | To configure PowerGrid Performance Card in Pulse, add the following code to the `recorders` section inside Pulse's configuration file.
 75 | 
 76 | ```php{3,7-9}
 77 | // config/pulse.php
 78 | 
 79 | use PowerComponents\LivewirePowerGrid\Recorders\PowerGridPerformanceRecorder; // [!code ++]
 80 | 
 81 |   'recorders' => [
 82 |       // ...
 83 |       PowerGridPerformanceRecorder::class => [// [!code ++]
 84 |          'enabled' => env('POWERGRID_RECORD_ENABLED', true),// [!code ++]
 85 |       ],// [!code ++]
 86 |   ],
 87 | 
 88 | ```
 89 | 
 90 | Next, enable PowerGrid Record in your application `.env` file adding the key:
 91 | 
 92 | ```shell
 93 | # .env
 94 | 
 95 | APP_NAME=Laravel
 96 | APP_ENV=local
 97 | APP_KEY=
 98 | APP_DEBUG=true
 99 | APP_URL=http://localhost
100 | 
101 | POWERGRID_RECORD_ENABLED=true # [!code ++]
102 | 
103 | # ...
104 | ```
105 | 
106 | Finally, add the PowerGrid Performance Card to the Laravel Pulse Dashboard.
107 | 
108 | ```php{4}
109 | // resources/views/dashboard.blade.php
110 | 
111 | 
112 |      // [!code ++]
113 | 
114 | ```
115 | 
116 | Now, when you access your Pulse Dashboard, you should have a card similar to this:
117 | 
118 | ![Output](/examples/measure-retrieve-data-pulse.png)
119 | 


--------------------------------------------------------------------------------
/docs/expanding-powergrid/publish-views.md:
--------------------------------------------------------------------------------
 1 | # Publish Views
 2 | 
 3 | This section covers publishing PowerGrid views.
 4 | 
 5 | Here you will find:
 6 | 
 7 | [[toc]]
 8 | 
 9 | ## Introduction
10 | 
11 | Just like in any Laravel package, PowerGrid views are publishable and may be customized to fit your needs.
12 | 
13 | PowerGrid Blade Views are more complex than standard HTML-CSS template files. These files contain application code and logic that is regularly updated to introduce new features and address bugs.
14 | 
15 | In short, publishing views means that PowerGrid original Blade views will be copied from PowerGrid's `vendor` directory into the directory `resources/views/vendor/livewire-powergrid`.
16 | 
17 | As a consequence, from this point on, your application will load the copied version, which remains **unchanged/outdated**, instead of the latest version from PowerGrid.
18 | 
19 | ## Publishing Views
20 | 
21 | ::: danger ❗ WARNING
22 | 
23 | Be aware that publishing Blade views may result in **BREAKING CHANGES** to your application.
24 | 
25 | **DO NOT proceed** if you don't have a clear understanding of the potential risks involved.
26 | :::
27 | 
28 | To publish views, run the command:
29 | 
30 | ```bash
31 | php artisan vendor:publish --tag=livewire-powergrid-views
32 | ```
33 | 


--------------------------------------------------------------------------------
/docs/get-started/code-examples.md:
--------------------------------------------------------------------------------
 1 | # Code Examples
 2 | 
 3 | The PowerGrid team has prepared various examples demonstrating PowerGrid v5 features in a Laravel 11 application with Livewire v3.
 4 | 
 5 | These resources are aimed at helping the user get up and running as fast as possible, and also allow everyone to stay up-to-date with the latest PowerGrid features.
 6 | 
 7 | You can view the source code and interact with all the examples on the demo website.
 8 | 
 9 | `🌎` Interactive Online Demo http://demo.livewire-powergrid.com
10 | 
11 | `💻` Download the Demo source-code at Power-Components/powergrid-demo GitHub repository.
12 | 


--------------------------------------------------------------------------------
/docs/get-started/create-powergrid-table.md:
--------------------------------------------------------------------------------
  1 | # Create a PowerGrid Table
  2 | 
  3 | This section covers the the process of creating a PowerGrid Component.
  4 | 
  5 | Here you will find:
  6 | 
  7 | [[toc]]
  8 | 
  9 | ## Introduction
 10 | 
 11 | Now that you've finished the PowerGrid [Essential Configuration](get-started/powergrid-configuration.html#essential-configuration), it's time create your very first Table Component!
 12 | 
 13 | ## Create a Table
 14 | 
 15 | To create a PowerGrid Table, run the following command in your Laravel project.
 16 | 
 17 | ```bash
 18 | php artisan powergrid:create  
 19 | ```
 20 | 
 21 | The assistant will guide you through the process and help you generate your Table Component.
 22 | 
 23 | ### 1. Name the Component
 24 | 
 25 | First, you need to name your new Table Component.
 26 | 
 27 | In this example, let's create a component called "__DishTable__" to list all dishes in a food menu.
 28 | 
 29 | ```shell
 30 |      __     ____                          ______     _     __
 31 |     / /_,  / __ \____ _      _____  _____/ ____/____(_)___/ /
 32 |     /_ ,' / /_/ / __ \ | /| / / _ \/ ___/ / __/ ___/ / __  / 
 33 |     /'   / ____/ /_/ / |/ |/ /  __/ /  / /_/ / /  / / /_/ /  
 34 |         /_/    \____/|__/|__/\___/_/   \____/_/  /_/\__,_/     
 35 | 
 36 |  ┌ What is the name of your Table Component? ───────────────────┐
 37 |  │ DishTable                                                    │
 38 |  └──────────────────────────────────────────────────────────────┘
 39 | ```
 40 | 
 41 | To create your Component in a subdirectory, just enter the directory path followed by the component name. For example: `Tables/Dishes/DishTable`.
 42 | 
 43 | If your application is organized in a different architecture (E.g, Domain-Driven Design), proceed to read more on how to configure a [Custom Namespace](/get-started/powergrid-configuration.html#custom-namespace) for PowerGrid Components.
 44 | 
 45 | ---
 46 | 
 47 | ### 2. Select the Data Source
 48 | 
 49 | Now, configure the data source from which your Table will pull data from.
 50 | 
 51 | 

 52 | 
 53 | #### 2.1. Select the data source
 54 | 
 55 | Select the data source type.
 56 | 
 57 | In our example, we will use Laravel's [Eloquent Builder](https://laravel.com/docs/eloquent).
 58 | 
 59 | ```shell
 60 |  ┌ What type of data source will you use? ──────────────────────┐
 61 |  │ › ● Eloquent Builder                                         │
 62 |  │   ○ Query Builder                                            │
 63 |  │   ○ Collection                                               │
 64 |  └──────────────────────────────────────────────────────────────┘
 65 | ```
 66 | 
 67 | 

 68 | 
 69 | #### 2.2. Model
 70 | 
 71 | Here, you need to select a Model to be linked to the component.
 72 | 
 73 | Following our example, we will use the `Dish` Model.
 74 | 
 75 | ```shell
 76 |  ┌ Select a Model or enter its Fully qualified name. ───────────┐
 77 |  ├──────────────────────────────────────────────────────────────┤
 78 |  │› App\Models\Dish                                             │
 79 |  │  App\Models\FooBar                                           │
 80 |  │  App\Models\FoorBarBaz                                       │
 81 |  └──────────────────────────────────────────────────────────────┘
 82 | ```
 83 | 
 84 | By default, PowerGrid suggests Eloquent Models placed in the default path `app/Models`. 
 85 | 
 86 | You can customize the [Auto-Discover Models](/get-started/powergrid-configuration.html#auto-discover-models) if your application is organized in a different architecture (E.g, Domain-Driven Design).
 87 | 
 88 | 

 89 | 
 90 | #### 2.3. Fillable
 91 | 
 92 | If desired, PowerGrid has the capability to automatically generate certain Table Columns based on the fields specified in your Model's `fillable` property.
 93 | 
 94 | Sure, let's proceed with "yes" for this example.
 95 | 
 96 | ```shell
 97 |  ┌ Create columns based on Model's fillable property? ──────────┐
 98 |  │ ● Yes / ○ No                                                 │
 99 |  └──────────────────────────────────────────────────────────────┘
100 | ```
101 | 
102 | *Note: This feature is available only for MySQL, PostgreSQL, and SQLite databases.*
103 | 
104 | 

105 | 
106 | ### 3. Use Your Table
107 | 
108 | ⚡ Your PowerGrid Table is ready!
109 | 
110 | At this step, you should see a message that looks like this:
111 | 
112 | ```plain
113 | ⚡ DishTable was successfully created at [app/Livewire/DishTable.php].
114 | 
115 | 💡 include the DishTable component using the tag: 
116 | ```
117 | 
118 | In the feedback message, you will find:
119 | 
120 | - The file path where your Component was created.
121 | - The HTML tag to include it in your Blade View.
122 | 
123 | 

124 | 
125 | 

126 |   
🎉 That's it!

127 |   
Now we can proceed to the Show a PowerGrid Table section.

128 | 

129 | 
130 | ## Customize the Component Creation
131 | 
132 | ### Component Stubs
133 | 
134 | You may customize the default PowerGrid Component, adapting it to your needs.
135 | 
136 | To publish the stub, run the following command:
137 | 
138 | ```bash
139 | php artisan powergrid:publish --type=stub
140 | ```
141 | 
142 | If you need to create multiple stubs, be sure to rename the file after publishing each stub.
143 | 
144 | You may use the flag `--template` passing the full location of your stub when creating a new component.
145 | 
146 | ```bash
147 | php artisan powergrid:create --template=stubs/custom-component.stub
148 | ```
149 | 
150 | ### Custom Namespace
151 | 
152 | See [Custom Namespace](/get-started/powergrid-configuration.html#custom-namespace).
153 | 
154 | ### Custom Model Location
155 | 
156 | See [Auto-Discover Models](/get-started/powergrid-configuration.html#auto-discover-models).
157 | 
158 | 


--------------------------------------------------------------------------------
/docs/get-started/install.md:
--------------------------------------------------------------------------------
 1 | # Install
 2 | 
 3 | This section covers how to install PowerGrid Laravel in your Laravel Application.
 4 | 
 5 | Here you will find:
 6 | 
 7 | [[toc]]
 8 | 
 9 | ## Requirements
10 | 
11 | - PHP 8.2+
12 | - [Laravel 10+](https://laravel.com/docs/installation)
13 | - [Livewire 3.5.4+](https://livewire.laravel.com)
14 | - [Tailwind v3](https://tailwindcss.com/docs/guides/laravel) or [Bootstrap 5](https://getbootstrap.com/docs/5.0/getting-started/introduction/)
15 | 
16 | ## Installation
17 | 
18 | ### 1. Install the package
19 | 
20 | First, require PowerGrid via [Composer](https://getcomposer.org/). Run the following command in your Laravel project.
21 | 
22 | ```bash
23 | composer require power-components/livewire-powergrid
24 | ```
25 | 
26 | ### 2. Publish Config files
27 | 
28 | Next, publish PowerGrid's config file. This file is used to configure PowerGrid, it will be available at: `config/livewire-powergrid.php`.
29 | 
30 | Run the following command:
31 | 
32 | ```bash
33 | php artisan vendor:publish --tag=livewire-powergrid-config
34 | ```
35 | 
36 | ### 3. Configure PowerGrid
37 | 
38 | 

39 |   
🎉 All done!

40 |   
Let's go on and configure PowerGrid!

41 | 

42 | 
43 | ## Optional Steps
44 | 
45 | This subsection covers optional installations steps.
46 | 
47 | ### Publish Translations
48 | 
49 | To publish PowerGrid translation (language) files, run the following command:
50 | 
51 | ```bash
52 | php artisan vendor:publish --tag=livewire-powergrid-lang
53 | ```
54 | 


--------------------------------------------------------------------------------
/docs/get-started/introduction.md:
--------------------------------------------------------------------------------
 1 | # Introduction
 2 | 
 3 | ## PowerGrid
 4 | 
 5 | [Livewire PowerGrid](https://github.com/Power-Components/livewire-powergrid) creates modern, powerful and easy-to-customize data tables using  [Laravel Livewire](https://laravel-livewire.com).
 6 | 
 7 | With PowerGrid, you can effortlessly create advanced data tables in a matter of minutes. To get started,  just head over to the [installation page](/get-started/install.html).
 8 | 
 9 | ![Output](/screenshot.png)
10 | 
11 | ## Features
12 | 
13 | PowerGrid offers a range of features that are readily available:
14 | 
15 | | Feature                                                            | PowerGrid                               |
16 | | :--------------------------------------------------------------------- | :-------------------------------------- |
17 | | Bootstrap 5 or Tailwind CSS 3x                                         | ✅                                      |
18 | | Pagination                                                             | ✅                                      |
19 | | Column Sorting                                                         | ✅                                      |
20 | | Filters & Global Search                                                | ✅                                      |
21 | | Custom Filter Builder                                                  | ✅                                      |
22 | | Inline Editing (Click to edit)                                         | ✅                                      |
23 | | Row Buttons, Checkboxes, Dropdown menu, and Toggle Switch              | ✅                                      |
24 | | Custom Cell Content (Links, images, currency formatting)               | ✅                                      |
25 | | Multi-row Bulk Actions                                                 | ✅                                      |
26 | | Conditional Action Rules for Rows, Buttons, and Checkboxes             | ✅                                      |
27 | | Column Summaries (Sum, Count & Average)                                | ✅                                      |
28 | | Data Export to XLSX/CSV (OpenSpout)                                    | ✅                                      |
29 | | Queue Export for large datasets                                        | ✅                                      |
30 | | Responsive                                                             | ✅                                      |
31 | | Livewire Modal Integration (Wire Elements Modal)                       | ✅                                      |
32 | | Multi Language                                                         | Available in 🇺🇸 🇧🇷 🇪🇸 🇮🇹 🇩🇪 and [more...](https://github.com/Power-Components/livewire-powergrid/tree/5.x/resources/lang) |
33 | 
34 | ## Credits
35 | 
36 | PowerGrid is an open-source project created by [Luan Freitas](https://twitter.com/luanfreitasdev) and [@DanSysAnalyst](https://github.com/dansysanalyst), built with contributions by over 80 [Contributors](https://github.com/Power-Components/livewire-powergrid/graphs/contributors) and the support of our sponsors.
37 | 
38 | Logo & artwork by [Caneco](https://github.com/caneco)
39 | 
40 | ## Sponsors
41 | 
42 | 

43 |   
44 |   
45 |     DevSquad
46 |   
47 | 
48 | 

49 | 

50 | 

51 | 
Supported by:

52 | 

53 |   
54 |   
55 |     PHPStorm
56 |   
57 | 

58 | 

59 |   
60 |   
61 |     Araxis Merge
62 |   
63 | 

64 | 
65 | 
66 | ## Disclaimer
67 | 
68 | Notice of Non-Affiliation and Disclaimer: Livewire PowerGrid is not affiliated with, associated with, endorsed by, or in any way officially connected with the Laravel Livewire - copyright by Caleb Porzio. Laravel is a trademark of Taylor Otwell.
69 | 


--------------------------------------------------------------------------------
/docs/get-started/powergrid-configuration.md:
--------------------------------------------------------------------------------
  1 | # PowerGrid Configuration
  2 | 
  3 | This section covers the PowerGrid config file, along with the configurations for assets and plugins.
  4 | 
  5 | Here you will find:
  6 | 
  7 | [[toc]]
  8 | 
  9 | ## Introduction
 10 | 
 11 | Once the [installation](/get-started/install.html) is complete, you must perform these [Essential Configuration](/get-started/powergrid-configuration.html#essential-configuration) steps to start using PowerGrid in your Laravel application.
 12 | 
 13 | ## Essential Configuration
 14 | 
 15 | ### 1. Import Javascript Assets
 16 | 
 17 | First, import PowerGrid's JavaScript assets.
 18 | 
 19 | Add the following code to your project's `resources/js/app.js` file.
 20 | 
 21 | ```javascript{3}
 22 | // resources/js/app.js
 23 | 
 24 | import './../../vendor/power-components/livewire-powergrid/dist/powergrid' // [!code ++]
 25 | ```
 26 | 
 27 | ### 2. Choose a CSS theme
 28 | 
 29 | PowerGrid provides Tailwind 3 and Bootstrap 5 themes. Tailwind is selected by default.
 30 | 
 31 | To use Bootstrap 5, simply change the `theme` key in the `config/livewire-powergrid.php` file. Here's an example:
 32 | 
 33 | ```php{10}
 34 | // config/livewire-powergrid.php
 35 | 
 36 | /*
 37 | |--------------------------------------------------------------------------
 38 | | Theme
 39 | |--------------------------------------------------------------------------
 40 | */
 41 | 
 42 | 'theme' => \PowerComponents\LivewirePowerGrid\Themes\Bootstrap5::class, 
 43 | 'theme' => \PowerComponents\LivewirePowerGrid\Themes\Tailwind::class, 
 44 | 
 45 | 'theme' => \PowerComponents\LivewirePowerGrid\Themes\DaisyUI::class, // [!code ++]
 46 | ```
 47 | 
 48 | ::: info 📝 NOTE
 49 | Currently, the following features are exclusive to the Tailwind theme.
 50 | 
 51 | * [Responsive Table](/table-features/filters.html#filter-position)
 52 | * [Filters outside](/table-features/filters.html#filter-position)
 53 |   :::
 54 | 
 55 | ### 3. Theme
 56 | 
 57 | Next, you must import the theme assets in the file `resources/css/app.css`.
 58 | 
 59 | ::: code-group
 60 | 
 61 | 
 62 | ```css [Tailwind v4]
 63 | /*resources/css/app.css*/
 64 | 
 65 | @import "tailwindcss";
 66 | @import '../../vendor/power-components/livewire-powergrid/resources/css/tailwind4.css';
 67 | 
 68 | /** enable dark mode */
 69 | @custom-variant dark (&:where(.dark, .dark *));
 70 | 
 71 | @source '../../app/Livewire/*Table.php';
 72 | @source '../../app/Livewire/**/*Table.php';
 73 | @source '../../vendor/power-components/livewire-powergrid/src/Themes/Tailwind.php';
 74 | @source '../../vendor/power-components/livewire-powergrid/resources/views/**/*.php';
 75 | 
 76 | /* Custom theme */
 77 | @theme {
 78 |  --color-pg-primary-50: oklch(0.985 0 0);
 79 |  --color-pg-primary-100: oklch(0.97 0 0);
 80 |  --color-pg-primary-200: oklch(0.922 0 0);
 81 |  --color-pg-primary-300: oklch(0.87 0 0);
 82 |  --color-pg-primary-400: oklch(0.708 0 0);
 83 |  --color-pg-primary-500: oklch(0.556 0 0);
 84 |  --color-pg-primary-600: oklch(0.439 0 0);
 85 |  --color-pg-primary-700: oklch(0.371 0 0);
 86 |  --color-pg-primary-800: oklch(0.269 0 0);
 87 |  --color-pg-primary-900: oklch(0.205 0 0);
 88 |  --color-pg-primary-950: oklch(0.145 0 0);
 89 | }
 90 | ```
 91 | 
 92 | ```css [Tailwind v3]
 93 | /*resources/css/app.css*/
 94 | 
 95 | @import './../../vendor/power-components/livewire-powergrid/dist/tailwind.css'
 96 | ```
 97 | 
 98 | ```css [DaisyUI 5]
 99 | /*resources/css/app.css*/
100 | 
101 | @import "tailwindcss";
102 | 
103 | @custom-variant dark (&:where([data-theme=night], [data-theme=night] *));
104 | 
105 | @source '../../app/Livewire/*Table.php';
106 | @source '../../app/Livewire/**/*Table.php';
107 | @source '../../vendor/power-components/livewire-powergrid/src/Themes/DaisyUI.php';
108 | @source '../../vendor/power-components/livewire-powergrid/resources/views/**/*.php';
109 | ```
110 | 
111 | ```css [Bootstrap 5+]
112 | /*resources/css/app.css*/
113 | @import './../../vendor/power-components/livewire-powergrid/dist/bootstrap5.css'
114 | ```
115 | 
116 | :::
117 | 
118 | ### 4. Tailwind v3 Configuration
119 | 
120 | ::: tip
121 | If you are using Tailwind v3, you may configure the options below.
122 | :::
123 | 
124 | #### Dark Mode
125 | 
126 | To enable Dark Mode, configure the `DarkMode` class in the file `tailwind.config.js` as follows.
127 | 
128 | ```javascript{4}
129 | // tailwind.config.js
130 | 
131 | module.exports = {
132 |     darkMode: 'class',// [!code ++]
133 | }
134 | ```
135 | 
136 | #### JIT Production
137 | 
138 | If you use Tailwind JIT you must add PowerGrid files in `purge` inside the file `tailwind.config.js`:
139 | 
140 | ```javascript{6-8}
141 | // tailwind.config.js
142 | 
143 | module.exports = {
144 |   content: [
145 |       // ....
146 |       './app/Livewire/**/*Table.php',// [!code ++]
147 |       './vendor/power-components/livewire-powergrid/resources/views/**/*.php',// [!code ++]
148 |       './vendor/power-components/livewire-powergrid/src/Themes/Tailwind.php'// [!code ++]
149 |   ]
150 |   // ....
151 | }
152 | ```
153 | 
154 | ::: tip 💡 TIP
155 | Read more about [Tailwind just-in-time](https://tailwindcss.com/docs/just-in-time-mode).  
156 | If you are already using Tailwind version 3 or greater JIT is enabled by default. So you need to add these files to your `tailwind.config.js` because otherwise the styles won't apply correctly.
157 | [Read more here](https://tailwindcss.com/docs/upgrade-guide#migrating-to-the-jit-engine)
158 | :::
159 | 
160 | #### Presets
161 | 
162 | PowerGrid uses the **slate** color by default.
163 | 
164 | To use a different color, insert the PowerGrid preset in the file `tailwind.config.js`.
165 | 
166 | ```js{9,15}
167 | // tailwind.config.js
168 | 
169 | const colors = require('tailwindcss/colors')
170 | 
171 | /** @type {import('tailwindcss').Config} */
172 | module.exports = {
173 |     presets: [
174 |         require("./vendor/wireui/wireui/tailwind.config.js"),
175 |         require("./vendor/power-components/livewire-powergrid/tailwind.config.js"), // [!code ++]
176 |     ],
177 |     // optional
178 |     theme: {
179 |         extend: {
180 |             colors: {
181 |                 "pg-primary": colors.gray, // [!code ++]
182 |             },
183 |         },
184 |     },
185 | }
186 | ```
187 | 
188 | ::: tip 💡 TIP
189 | Read more about [Tailwind Presets](https://tailwindcss.com/docs/presets).
190 | :::
191 | 
192 | ### 5. Bootstrap Configuration
193 | 
194 | Currently, there are no specific Bootstrap theme configuration instructions.
195 | 
196 | ### 6. Next step
197 | 
198 | 

199 |   
🎉 Everything ready!

200 |   
Now, we can go to the next step and create a PowerGrid Table.

201 | 

202 | 
203 | ## General Configuration
204 | 
205 | ### Persist Driver
206 | 
207 | This section defines how [Persist](/table-component/component-configuration.html#persist) data is stored. By default, information is stored in `cookies`. You may change this configuration in the key `persist_driver` in `config/livewire-powergrid.php`.
208 | 
209 | Possible Persist Drivers:
210 | 
211 | | Driver          | Description                      |
212 | |-----------------|----------------------------------|
213 | | `cookies` | Store data in cookies.                 |
214 | | `session` | Store data in the session.             |
215 | 
216 | Example:
217 | 
218 | ```php
219 | // config/livewire-powergrid.php
220 |     /*
221 |     |--------------------------------------------------------------------------
222 |     | Persisting
223 |     |--------------------------------------------------------------------------
224 |     |
225 |     */
226 | 
227 |     'persist_driver' => 'cookies',// [!code --]
228 |     'persist_driver' => 'session',// [!code ++]
229 | ```
230 | 
231 | ### Filter Position Configuration
232 | 
233 | To configure how filters are displayed, change the value in the key `filter` in `config/livewire-powergrid.php`.
234 | 
235 | | Filter          | Description                                          | Notes                             |
236 | |-----------------|------------------------------------------------------|-----------------------------------|
237 | | `inline` | Filters are displayed below the Table Header                |                 -                 |
238 | | `outside`  | Filters are displayed outside the Table, above the Header | only available for Tailwind theme |
239 | 
240 | Example:
241 | 
242 | ```php{10}
243 | // config/livewire-powergrid.php
244 | 
245 | /*
246 | |--------------------------------------------------------------------------
247 | | Filters
248 | |--------------------------------------------------------------------------
249 | */
250 |     'filter' => 'inline',// [!code --]
251 |     'filter' => 'outside',// [!code ++]
252 | ```
253 | 
254 | ### New Release Notification
255 | 
256 | PowerGrid can let you know when a new release is available.
257 | 
258 | Require composer as a developer dependency, running:
259 | 
260 |  ```bash
261 |  composer require composer/composer --dev
262 |  ```
263 | 
264 | Run `powergrid:update`
265 | 
266 |  ```bash
267 |  php artisan powergrid:update
268 |  ```
269 | 
270 | ## Advanced Configuration
271 | 
272 | ### Custom Namespace
273 | 
274 | By default, PowerGrid will create components following the location specified under Livewire's Config Key `livewire.class_namespace`.
275 | 
276 | To adjust the configuration, run: `php artisan livewire:publish --config` to publish the file `config/livewire.php`.
277 | 
278 | The example below changes the namespace to "Domain".
279 | 
280 | ```php
281 | // config/livewire.php
282 | 
283 | /*
284 | |---------------------------------------------------------------------------
285 | | Class Namespace
286 | |---------------------------------------------------------------------------
287 | */
288 | 
289 | 'class_namespace' => 'App\\Livewire',// [!code --]
290 | 'class_namespace' => 'Domain', // [!code ++]
291 | ```
292 | 
293 | Now, your Components will be created inside the top `/Domain` directory.
294 | 
295 | The next example will create a component `ClientList` inside the path `/Domain/Client/Tables`
296 | 
297 | ```shell
298 |   > php artisan powergrid:create
299 | 
300 |  ┌ What is the name of your Table Component? ───────────────────┐
301 |  │ Client\Tables\ClientList                                     │
302 |  └──────────────────────────────────────────────────────────────┘
303 | 
304 | ```
305 | 
306 | Resulting in:
307 | 
308 | ```shell
309 |  ⚡ ClientList was successfully created at [Domain/Client/Tables/ClientList.php].
310 | 
311 |  💡 include the ClientList component using the tag: 
312 | ```
313 | 
314 | ### Auto-Discover Models
315 | 
316 | By default, PowerGrid auto discovers Models living in the directory `app/Models/`.
317 | 
318 | If your application is organized in a different architecture (E.g, Domain-Driven Design), you may add other directory paths inside the configuration key `livewire-powergrid.auto_discover_models_paths` in PowerGrid's [configuration file](/get-started/install.html#_2-publish-config-files).
319 | 
320 | The example below adds the main directory `/Domain` to be scanned for Eloquent Models.
321 | 
322 | ```php
323 | // config/livewire-powergrid.php
324 | 
325 | /*
326 | |--------------------------------------------------------------------------
327 | | Auto-Discover Models
328 | |--------------------------------------------------------------------------
329 | |
330 | | PowerGrid will search for Models in the directories listed below.
331 | | These Models be listed as options when you run the
332 | | "artisan powergrid:create" command.
333 | |
334 | */
335 | 
336 | 'auto_discover_models_paths' => [
337 |     app_path('Models'),// [!code --]
338 |     base_path('Domain'),// [!code ++]
339 | ],
340 |   ```
341 | 
342 | As a result, when creating a PowerGrid Component, all Models under `/Domain` will be available in the select list.
343 | 
344 | ```shell
345 |  ┌ Select a Model or enter its Fully qualified name. ───────────┐
346 |  ├──────────────────────────────────────────────────────────────┤
347 |  │› Domain\Dish\Models\Dish                                     │
348 |  │  Domain\Invoice\Models\Invoice                               │
349 |  │  Domain\User\Models\User                                     │
350 |  └──────────────────────────────────────────────────────────────┘
351 | 
352 | ```
353 | 
354 | ## Plugins Configuration
355 | 
356 | ### Flatpickr
357 | 
358 | PowerGrid relies on [Flatpickr](https://flatpickr.js.org/) to render the [Datetime Picker Filter](/table-features/filters.html#datetime-picker-filter) and the [Date Picker Filter](/table-features/filters.html#date-picker-filter).
359 | 
360 | To install Flatpickr in your project, run the following command:
361 | 
362 | ```shell
363 | npm i flatpickr --save
364 | ```
365 | 
366 | Then, you must configure your application to load Flatpickr's assets.
367 | 
368 | Add the following code to your project's `resources/js/app.js` file.
369 | 
370 | ```javascript
371 | // resources/js/app.js
372 | 
373 | import flatpickr from "flatpickr"; // [!code ++]
374 | ```
375 | 
376 | Next, we need to load Flatpickr CSS.
377 | 
378 | Add the following code to your project's `resources/css/app.css` file.
379 | 
380 | ```css
381 | /* resources/css/app.css */
382 | 
383 | @import "flatpickr/dist/flatpickr.min.css"; // [!code ++]
384 | ```
385 | 
386 | Alternatively, you may import the CSS from the `resources/js/app.js` file.
387 | 
388 | ```javascript
389 | // resources/js/app.js
390 | 
391 | import 'flatpickr/dist/flatpickr.min.css';// [!code ++]
392 | ```
393 | 
394 | Finally, adjust the language configuration to match your app's locale within the `config/livewire-powergrid.php` file, specifically in the `plugins` > `flatpickr` section.
395 | 
396 | Example:
397 | 
398 | ```php
399 | // config/livewire-powergrid.php
400 | 
401 |  'plugins' => [
402 |         // ...
403 |         'flatpickr' => [// [!code ++:17]
404 |             // ..
405 |             'locales'   => [
406 |                 'pt_BR' => [
407 |                     'locale'     => 'pt',
408 |                     'dateFormat' => 'd/m/Y H:i',
409 |                     'enableTime' => true,
410 |                     'time_24hr'  => true,
411 |                 ],
412 |                 'us' => [
413 |                     'locale'     => 'us',
414 |                     'dateFormat' => 'm/d/Y',
415 |                     'enableTime' => true,
416 |                     'time_24hr'  => false,
417 |                 ],
418 |             ],
419 |         ],
420 |     ],
421 | ```
422 | 
423 | ### TomSelect
424 | 
425 | PowerGrid can use [TomSelect](https://tom-select.js.org) to render a [Multi Select Filter](/table-features/filters.html#multi-select-filter).
426 | 
427 | To install TomSelect in your project, run the following command:
428 | 
429 | ```shell
430 | npm i tom-select
431 | ```
432 | 
433 | Then, you must configure your application to load TomSelect's assets.
434 | 
435 | Add the following code to your project's `resources/js/app.js` file.
436 | 
437 | ```javascript
438 | // resources/js/app.js
439 | 
440 | import TomSelect from "tom-select";// [!code ++:2]
441 | window.TomSelect = TomSelect
442 | ```
443 | 
444 | Next, add the following code to your project's `resources/js/app.css` file.
445 | 
446 | ```css
447 | /* resources/js/app.css */
448 | 
449 | @import "~tom-select/dist/scss/tom-select.bootstrap5";// [!code ++]
450 | ```
451 | 
452 | Finally, configure PowerGrid to use TomSelect as default within the `config/livewire-powergrid.php` file, specifically in the `select` > `default` section. You may also configure Slim's settings inside the `select` > `tom` key.
453 | 
454 | Example:
455 | 
456 | ```php
457 | // config/livewire-powergrid.php
458 | 
459 | 'select' => [
460 |     'default' => 'tom', // [!code ++:10]
461 | 
462 |        'tom' => [
463 |             'plugins' => [
464 |                 'clear_button' => [
465 |                     'title' => 'Remove all selected options',
466 |                 ],
467 |             ],
468 |        ,
469 |     ],
470 | ],
471 | ```
472 | 
473 | ### SlimSelect
474 | 
475 | PowerGrid can use [SlimSelect](https://slimselectjs.com/) to render a [Multi Select Filter](/table-features/filters.html#multi-select-filter).
476 | 
477 | To install SlimSelect in your project, run the following command:
478 | 
479 | ```shell
480 | npm i slim-select
481 | ```
482 | 
483 | Then, you must configure your application to load SlimSelect's assets.
484 | 
485 | Add the following code to your project's `resources/js/app.js` file.
486 | 
487 | ```javascript
488 | // resources/js/app.js
489 | 
490 | import SlimSelect from 'slim-select'// [!code ++:2]
491 | window.SlimSelect = SlimSelect
492 | ```
493 | 
494 | Next, add the following code to your project's `resources/js/app.css` file.
495 | 
496 | ```css
497 | /* resources/js/app.css */
498 | 
499 | @import "~slim-select/dist/slimselect.css";// [!code ++]
500 | ```
501 | 
502 | Finally, configure PowerGrid to use SlimSelect as default within the `config/livewire-powergrid.php` file, specifically in the `select` > `default` section. You may also configure Slim's settings inside the `select` > `slim` key.
503 | 
504 | Example:
505 | 
506 | ```php
507 | // config/livewire-powergrid.php
508 | 
509 | 'select' => [
510 |     'default' => 'slim', // [!code ++:7]
511 | 
512 |     'slim' => [ 
513 |        'settings' => [
514 |              'alwaysOpen' => false,
515 |        ],
516 |     ],
517 | ],
518 | ```
519 | 


--------------------------------------------------------------------------------
/docs/get-started/rendering-a-powergrid-table.md:
--------------------------------------------------------------------------------
  1 | # Rendering a PowerGrid Table
  2 | 
  3 | This section covers how to render your PowerGrid Component in a Blade View.
  4 | 
  5 | Here you will find:
  6 | 
  7 | [[toc]]
  8 | 
  9 | ## Blade View
 10 | 
 11 | ### HTML Tag
 12 | 
 13 | To display your PowerGrid Table, you can use the `` tag as demonstrated below.
 14 | 
 15 | Following our example of `DishTable` (`app/Livewire/DishTable.php`), we will use the tag:
 16 | 
 17 | ```php
 18 | // resources/views/my-view.blade.php
 19 | 
 20 |  // [!code ++]
 21 | ```
 22 | 
 23 | ### Blade Directive
 24 | 
 25 | Alternatively, you can use the Livewire Blade directive.
 26 | 
 27 | ```php
 28 | // resources/views/my-view.blade.php
 29 | 
 30 | @livewire('dish-table') // [!code ++]
 31 | ```
 32 | 
 33 | 

 34 |   
🎉 Great, we have a table!

 35 |   
Now, let's move forward to configure the Datasource.

 36 | 

 37 | 
 38 | ### Component in sub-folder
 39 | 
 40 | If the PowerGrid Table is located in a sub-folder, you can easily specify its path using dot notation.
 41 | 
 42 | For reference, the following example utilizes the class `app/Livewire/Tables/DishTable.php`:
 43 | 
 44 | ```php
 45 | // resources/views/my-view.blade.php
 46 | 
 47 |  // [!code ++]
 48 | ```
 49 | 
 50 | ## From route
 51 | 
 52 | If you do not need a Blade view, you can render your Table directly from route :
 53 | 
 54 | ```php
 55 | // routes/web.php
 56 | 
 57 | Route::get('/dish', DishTable::class)->name('dish-table'); // [!code ++]
 58 | ```
 59 | 
 60 | ## Multiple Components Per Page
 61 | 
 62 | To render more than one PowerGrid component on the same page, you must first assign a unique `TableName` to each component. Read more about [configuring table name](/table-component/component-configuration.html#table-name).
 63 | 
 64 | Furthermore, if you have pagination enabled, you might have to configure the `?page=` parameter for each component. Learn more about the [URL Page Parameter](/table-features/pagination.html#url-page-parameter).
 65 | 
 66 | Then, you can just include two `` tags as demonstrated below.
 67 | 
 68 | ```php
 69 | // resources/views/my-view.blade.php
 70 | 
 71 |  // [!code ++:3]
 72 | 
 73 | 
 74 | ```
 75 | 
 76 | ## Component Attributes
 77 | 
 78 | ### Passing Attributes
 79 | 
 80 | To pass data to your PowerGrid Table, you can add attributes to the `` HTML tag.
 81 | 
 82 | In the next example, we are passing the [`tableName`](/table-component/component-configuration.html#table-name) via an attribute.
 83 | 
 84 | ```php
 85 | // resources/views/my-view.blade.php
 86 | 
 87 |  // [!code ++:3]
 88 | 
 89 | 
 90 | ```
 91 | 
 92 | ### Passing Custom Attributes
 93 | 
 94 | To pass a custom attribute, you must to declare it as a `public` property within the PowerGrid Table Component.
 95 | 
 96 | Example:
 97 | 
 98 | ```php
 99 | // app/Livewire/DishTable.php
100 | 
101 | class DishTable extends PowerGridComponent
102 | {
103 |     //Custom attribute currency
104 |     public string $currency; // [!code ++]
105 | }
106 | ```
107 | 
108 | Then, you can simply add this attribute in the `` tag, as demonstrated below.
109 | 
110 | ```php
111 | // resources/views/my-view.blade.php
112 | 
113 |  // [!code --]
114 |  // [!code ++]
115 | ```
116 | 


--------------------------------------------------------------------------------
/docs/get-started/troubleshooting.md:
--------------------------------------------------------------------------------
 1 | # Troubleshooting
 2 | 
 3 | This section covers the most frequent issues that users may encounter while using PowerGrid.
 4 | 
 5 | Here you will find:
 6 | 
 7 | [[toc]]
 8 | 
 9 | ## Multiple instances of Alpine
10 | 
11 | If you are installing PowerGrid with Laravel Breeze, you may come across this particular issue.
12 | 
13 | Please refer to Livewire Documentation [Multiple instances of Alpine](https://livewire.laravel.com/docs/troubleshooting#multiple-instances-of-alpine).
14 | 
15 | ## Undefined variable "$foobar"
16 | 
17 | Please refer to [Theme, layout, view and "variable undefined" errors](/get-started/troubleshooting.html#theme-layout-view-and-variable-undefined-errors).
18 | 
19 | ## Call to undefined method "fooBar()"
20 | 
21 | Please check the [Upgrade Guide](/release-notes-and-upgrade/upgrade-guide.html).
22 | 
23 | Additionally, you may also learn the section [Theme, layout, view and "variable undefined" errors](/get-started/troubleshooting.html#theme-layout-view-and-variable-undefined-errors).
24 | 
25 | ## Theme, layout, view and "variable undefined" errors
26 | 
27 | Most likely you have published the PowerGrid views, and they have become outdated. This can happen after updating PowerGrid while using customized views.
28 | 
29 | To solve this problem, first back up your PowerGrid resource: Copy the `resources/views/vendor/livewire-powergrid` directory to `resources/views/vendor/livewire-powergrid-BACKUP`.
30 | 
31 | Then, proceed to republish your views. Run the command below.
32 | 
33 | ```shell
34 | php artisan vendor:publish --tag=livewire-powergrid-views
35 | ```
36 | 
37 | Next, clear Laravel caches. Run the command below.
38 | 
39 | ```shell
40 | php artisan optimize:clear
41 | ```
42 | 
43 | ## Failed to mount filter: Filter::datetime
44 | 
45 | You must install Flatpickr. Please refer to the section [Plugins Configuration >
46 | Flatpickr](/get-started/powergrid-configuration.html#flatpickr).
47 | 
48 | ## Flatpickr Locale Support
49 | 
50 | Sometimes Flatpickr will not support your location's locale setting.
51 | 
52 | For example, consider that your application is configured for `pt_BR` in `config/app.php` with `'locale' => 'pt_BR'`,
53 | 
54 | In the file `config/livewire-powergrid.php`, you might have tried to add the same locale `pt_BR`.
55 |  the same string for locale.  
56 | 
57 | However, Flatpick doesn't accept `pt_BR`. Instead, change it to `pt`.
58 | 
59 | ```php{7}
60 |      'plugins' => [
61 |         // ...
62 |         'flatpickr' => [
63 |             // ...
64 |             'locales'   => [
65 |                 'pt_BR' => [
66 |                     'locale'     => 'pt_BR', // [!code --]
67 |                     'locale'     => 'pt', // [!code ++]
68 |                     'dateFormat' => 'd/m/Y H:i',
69 |                     'enableTime' => true,
70 |                     'time_24hr'  => true,
71 |                 ],
72 |             ],
73 |         ],
74 |     ],
75 | ```
76 | 
77 | ---
78 | 


--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | # https://vitepress.dev/reference/default-theme-home-page
 3 | layout: home
 4 | 
 5 | hero:
 6 |   name: "Livewire PowerGrid"
 7 |   tagline: PowerGrid creates modern, powerful and easy to customize Datatables based on Laravel Livewire library.
 8 |   image:
 9 |     src: /logomark3x.png
10 |     alt: PowerGrid
11 |   actions:
12 |     - theme: brand
13 |       text: 📚 Get started
14 |       link: /get-started/introduction.md
15 |     - theme: alt
16 |       text: ⌨️ Source Code
17 |       link: https://github.com/Power-Components/livewire-powergrid
18 | 
19 | features:
20 |   - title: Minimal Configuration
21 |     icon: 🚀
22 |     details: Tables have basic features activated by default. Ready to go!
23 |   - title: It fits your needs
24 |     icon: 👍
25 |     details: Extend and customize your Table including components (checkbox, action buttons, editable fields), global search feature, column data filters and data export tool.
26 |   - title: Easy to Use
27 |     icon: 🛠️
28 |     details: Table components include feature examples. Just uncomment some code, enter your data, and it works!
29 | ---
30 | 


--------------------------------------------------------------------------------
/docs/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/android-chrome-192x192.png


--------------------------------------------------------------------------------
/docs/public/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/android-chrome-512x512.png


--------------------------------------------------------------------------------
/docs/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/apple-touch-icon.png


--------------------------------------------------------------------------------
/docs/public/examples/measure-retrieve-data-pulse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/examples/measure-retrieve-data-pulse.png


--------------------------------------------------------------------------------
/docs/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/favicon-16x16.png


--------------------------------------------------------------------------------
/docs/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/favicon-32x32.png


--------------------------------------------------------------------------------
/docs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/favicon.ico


--------------------------------------------------------------------------------
/docs/public/logomark1x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/logomark1x.png


--------------------------------------------------------------------------------
/docs/public/logomark2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/logomark2x.png


--------------------------------------------------------------------------------
/docs/public/logomark3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/logomark3x.png


--------------------------------------------------------------------------------
/docs/public/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/screenshot.png


--------------------------------------------------------------------------------
/docs/public/screenshot_dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/screenshot_dark.png


--------------------------------------------------------------------------------
/docs/public/screenshot_light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/screenshot_light.png


--------------------------------------------------------------------------------
/docs/public/screenshot_orange.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/screenshot_orange.png


--------------------------------------------------------------------------------
/docs/public/site.webmanifest:
--------------------------------------------------------------------------------
1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}


--------------------------------------------------------------------------------
/docs/public/sponsors/araxis.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/sponsors/araxis.png


--------------------------------------------------------------------------------
/docs/public/sponsors/devsquad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/sponsors/devsquad.png


--------------------------------------------------------------------------------
/docs/public/sponsors/phpstorm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Power-Components/powergrid-doc/4aeba7aa120ab5f533a98855c058217e4164c859/docs/public/sponsors/phpstorm.png


--------------------------------------------------------------------------------
/docs/release-notes-and-upgrade/release-notes.md:
--------------------------------------------------------------------------------
  1 | # Release Notes
  2 | 
  3 | [[toc]]
  4 | 
  5 | ### Deprecations
  6 | 
  7 | The following items have been deprecated in this release:
  8 | 
  9 | * Using `dynamicProperties` in Button macros.
 10 | * Drop support for `openspout/openspout` v3.
 11 | * Removed `Cache::make()->forever()` method.
 12 | * Removed Cache `rememberForever()` via config `cache_data` key.
 13 | * Removed from `Button::make()->method()` method.
 14 | * Removed `Button::make()->target()` method (now in route method).
 15 | * Removed `Button::make()->bladeComponent()` method available only for `actionRules()`.
 16 | * Removed `Button::make()->render()` method You can work around this by using `bladeComponent` in `actionRules()` method.
 17 | * Removed `tom-select.css` from dist. Use native CSS instead of PowerGrid dist path
 18 | ---
 19 | 
 20 | ### New Properties
 21 | 
 22 | * `$supportModel` (default: true) to control model support. By default, forceFill on the model loads all model attributes.
 23 | * `$withoutResourcesActions`: Disable process of icons in javascript memory
 24 | 
 25 | ### Config Keys
 26 | 
 27 | **Added**:
 28 | 
 29 | - `cache_ttl`: (default: ) Value in seconds to keep some PowerGrid actions in the cache, such as actions and rules.
 30 | - `icon_resources`: Specifies resources settings for load SVG icons in the Javascript window.
 31 | 
 32 | **Removed**
 33 | 
 34 | * `cache_data` - Cache forever for collections.
 35 | * `check_version` - Enable release notification in powergrid:create command.
 36 | 
 37 | ---
 38 | 
 39 | ### Changes
 40 | 
 41 | `Button::route` needs 3rd parameters called target (_self, _blank)
 42 | `Button::toggleDetail()` button needs row id
 43 | 
 44 | ### Improves & Features
 45 | 
 46 | ### ✨ Javascript Actions Rendering
 47 | 
 48 | ::: info
 49 | * Action rendering has been refactored for better performance and flexibility.
 50 | :::
 51 | 
 52 | **💡How it works**:
 53 | 
 54 | PowerGrid will load SVG icons (using Blade) at the beginning of the request and store them in JavaScript memory (window). This is configured via the config file (`icon_resources`). JavaScript-based action processing
 55 | 
 56 | Actions will be processed using JavaScript instead of PHP, reducing PHP memory usage and minimizing Livewire's payload. Reduced PHP memory usage
 57 | 
 58 | By processing actions with JavaScript, unnecessary PHP memory usage is eliminated, resulting in more efficient performance.
 59 | 
 60 | ---
 61 | 
 62 | **Example**:
 63 | 
 64 | When adding the icon paths, PowerGrid will keep them saved in javascript to be used in the actions.
 65 | Suppose we are using icons provided by [wireui](https://wireui.dev/), and we want to use our actions, like this:
 66 | 
 67 | ```php [MyTable.php]
 68 | Button::make('edit')
 69 |     ->icon('solid-pencil', [
 70 |        'x-tooltip' => __('Edit'),
 71 |     ])
 72 |     ->class('btn-icon-secondary')
 73 |     ->dispatch('save', [
 74 |          'payload' => ['key' => $row->id],
 75 |     ]),
 76 | ```
 77 | 
 78 | So, our setup will look like this:
 79 | 
 80 | `config/livewire-powergrid.php`
 81 | ```php
 82 |     'icon_resources' => [
 83 |         'paths' => [
 84 |             'outline' => 'vendor/wireui/wireui/resources/views/components/icons/outline',
 85 |             'solid'   => 'vendor/wireui/wireui/resources/views/components/icons/solid',
 86 |         ],
 87 | 
 88 |         'allowed' => [
 89 |             'cog',
 90 |             'pencil',
 91 |             'arrow-right',
 92 |         ],
 93 | 
 94 |         'attributes' => ['class' => 'size-5'],
 95 |     ],
 96 | ```
 97 | 
 98 | | icon_resources | list of icons (SVG) that will be loaded into javascript memory              |
 99 | |----------------|-----------------------------------------------------------------------------|
100 | | paths          | path containing the icons                                                   |
101 | | allowed        | Only the icons defined here will be processed. If empty, all will be loaded |
102 | | attributes     | attributes that will be added by default to the SVG                         |
103 | 
104 | ### ✨ Column Macros
105 | 
106 | * If you need to add different query logic when searching for example, you can create a new macro (let's assume `searchableDateFormat`):
107 | 
108 | `AppServiceProvider`, boot method.
109 | ```php
110 | Column::macro('searchableDateFormat', function () {
111 |       $this->rawQueries[] = [
112 |           'method'   => 'orWhereRaw',
113 |           'sql'      => 'DATE_FORMAT('.$this->dataField.', "%d/%m/%Y") like ?',
114 |           'bindings' => ['%{search}%'],
115 |           'enabled'  => function (PowerGridComponent $component) {
116 |               return filled($component->search);
117 |           },
118 |       ];
119 | 
120 |       return $this;
121 | });
122 | ```
123 | 
124 | Now, in any PowerGrid table component:
125 | ```php
126 |  Column::make('Created At', 'created_at')
127 |      ->searchableDateFormat(),
128 | ```
129 | 
130 | ### Row Template
131 | 
132 | If you want to customize a record in the table without using Blade's processing, you can use the rowTemplate() method. This approach prevents the unnecessary creation of Blade components for the same field across different rows by leveraging JavaScript instead.
133 | 
134 | **Consider the following example:**
135 | 
136 | ::: info
137 | For each rendered row in the 'name' field, a view will be created in PHP during the rendering process:
138 | ::: 
139 | 
140 | ```php
141 | public function fields(): PowerGridFields
142 | {
143 |     return PowerGrid::fields()
144 |         ->add('id')
145 |         ->add('name', function ($row) {
146 |             return \Blade::render(<<\$name
148 |             blade, [
149 |                 'id'   => $row->id,
150 |                 'name' => $row->name,
151 |             ]);
152 |         })
153 | }
154 | ```
155 | 
156 | We can simplify this by using JavaScript to handle the rendering, as shown below:
157 | 
158 | ```php{5-11,15-20}
159 |  public function fields(): PowerGridFields
160 | {
161 |     return PowerGrid::fields()
162 |         ->add('id')
163 |         ->add('name', function ($row) {
164 |             return [
165 |                 'template-name' => [
166 |                     'id'   => $row->id,
167 |                     'name' => $row->name,
168 |                 ],
169 |             ];
170 |         });
171 | }
172 | 
173 | public function rowTemplates(): array
174 | {
175 |     return [
176 |         'template-name' => '
{{ name }}
',
177 |     ];
178 | }
179 | ```
180 | 
181 | In this setup, we instruct PowerGrid to look for 'template-name' and replace the HTML with the corresponding template during rendering. 
182 | By doing so, the layout and styling are managed by JavaScript, which dynamically populates the fields with the appropriate data for each row.
183 | 
184 | This approach reduces the overhead associated with generating Blade views for each row, leading to improved performance and easier maintenance, especially when dealing with large datasets. 
185 | Instead of repeatedly rendering Blade components, the JavaScript-based solution efficiently handles the customization directly in the browser, making your application more responsive and streamlined.
186 | 


--------------------------------------------------------------------------------
/docs/release-notes-and-upgrade/upgrade-guide.md:
--------------------------------------------------------------------------------
  1 | # Upgrade Guide
  2 | 
  3 | ## Upgrade From V5
  4 | 
  5 | This page will provide you with important information to upgrade from version 5.x.
  6 | 
  7 | ### Dependency Upgrades
  8 | 
  9 | The following items have been updated in this release:
 10 | 
 11 | * PHP 8.2+
 12 | 
 13 | ## PowerGrid Facade namespace
 14 | 
 15 | ```php
 16 | use PowerComponents\LivewirePowerGrid\PowerGrid;// [!code --]
 17 | use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;// [!code ++]
 18 | ```
 19 | 
 20 | ## `$tableName` must be unique/required
 21 | 
 22 | Sets the `$tableName` as unique and required for all existing tables.
 23 | 
 24 | ::: info
 25 | New tables will have a pre-configured name via the `powergrid:create` command.
 26 | :::
 27 | 
 28 | ```php
 29 | public string $tableName = 'default';// [!code --]
 30 | public string $tableName = 'users-table'; // [!code ++]
 31 | // Ex: admin-users-table, dishes, category-table 
 32 | ```
 33 | 
 34 | ## JS Imports
 35 | 
 36 | ```js
 37 | import './../../vendor/power-components/livewire-powergrid/dist/powergrid.css' // [!code --]
 38 | 
 39 | import './../../vendor/power-components/livewire-powergrid/dist/tailwind.css' // [!code ++] // bootstrap5.css
 40 | 
 41 | ```
 42 | 
 43 | ## setUp method
 44 | 
 45 | ```php{4}
 46 | use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
 47 | 
 48 | Header::make(); // [!code --]
 49 | PowerGrid::header(); // [!code ++]
 50 | 
 51 | Footer::make(); // [!code --]
 52 | PowerGrid::footer(); // [!code ++]
 53 | 
 54 | Responsive::make(); // [!code --]
 55 | PowerGrid::responsive(); // [!code ++]
 56 | 
 57 | Exportable::make(); // [!code --]
 58 | PowerGrid::exportable(); // [!code ++]
 59 | 
 60 | Lazy::make(); // [!code --]
 61 | PowerGrid::lazy(); // [!code ++]
 62 | 
 63 | Cache::make(); // [!code --]
 64 | PowerGrid::cache(); // [!code ++]
 65 | 
 66 | Detail::make(); // [!code --]
 67 | PowerGrid::detail(); // [!code ++]
 68 | ```
 69 | 
 70 | ---
 71 | 
 72 | ## Custom Theme
 73 | 
 74 | * Rename `template` to `customTemplateClass` method
 75 | 
 76 | ```php
 77 | public function template(); // [!code --]
 78 | public function customThemeClass(); // [!code ++]
 79 | 
 80 | ```
 81 | 
 82 | ## Change your theme class, and follow new template style
 83 | 
 84 | ::: info
 85 | This change simplifies how PowerGrid handles theme changes dynamically and removes many classes and unnecessary things to reduce processing in PHP.
 86 | :::
 87 | 
 88 | ::: warning
 89 | ⚠️ Follow the example available in `vendor/.../src/Themes/Tailwind.php` or `vendor/.../src/Themes/Bootstrap5.php` as all methods follow this new standard.
 90 | :::
 91 | 
 92 | **5.x**
 93 | 
 94 | ```php
 95 | public function table(): array
 96 | {
 97 |     return Theme::table('min-w-full dark:!bg-primary-800')
 98 |         ->container('-my-2 overflow-x-auto sm:-mx-3 lg:-mx-8')
 99 |         ->base('p-3 align-middle inline-block min-w-full w-full sm:px-6 lg:px-8')
100 |         ->div('rounded-t-lg relative border-x border-t border-pg-primary-200 dark:bg-pg-primary-700 dark:border-pg-primary-600')
101 |         ->thead('shadow-sm rounded-t-lg bg-pg-primary-100 dark:bg-pg-primary-900')
102 |         ->thAction('!font-bold')
103 |         ->tdAction('')
104 |         ->tr('')
105 |         ->trFilters('bg-white shadow-sm dark:bg-pg-primary-800')
106 |         ->th('font-extrabold px-2 pr-4 py-3 text-left text-xs text-pg-primary-700 tracking-wider whitespace-nowrap dark:text-pg-primary-300')
107 |         ->tbody('text-pg-primary-800')
108 |         ->trBody('border-b border-pg-primary-100 dark:border-pg-primary-600 hover:bg-pg-primary-50 dark:bg-pg-primary-800 dark:hover:bg-pg-primary-700')
109 |         ->tdBody('p-2 whitespace-nowrap dark:text-pg-primary-200')
110 |         ->tdBodyEmpty('p-2  whitespace-nowrap dark:text-pg-primary-200')
111 |         ->trBodyClassTotalColumns('')
112 |         ->tdBodyTotalColumns('p-2 whitespace-nowrap dark:text-pg-primary-200 text-sm text-pg-primary-600 text-right space-y-2')
113 | }
114 | ```
115 | 
116 | **6.x**
117 | 
118 | ```php
119 | public function table(): array
120 | {
121 |     return [
122 |         'layout' => [
123 |             'base'      => 'p-3 align-middle inline-block min-w-full w-full sm:px-6 lg:px-8',
124 |             'div'       => 'rounded-t-lg relative border-x border-t border-pg-primary-200 dark:bg-pg-primary-700 dark:border-pg-primary-600',
125 |             'table'     => 'min-w-full dark:!bg-primary-800',
126 |             'container' => '-my-2 overflow-x-auto sm:-mx-3 lg:-mx-8',
127 |             'actions'   => 'flex gap-2',
128 |         ],
129 | 
130 |         'header' => [
131 |             'thead'    => 'shadow-sm rounded-t-lg bg-pg-primary-100 dark:bg-pg-primary-900',
132 |             'tr'       => '',
133 |             'th'       => 'font-extrabold px-3 py-3 text-left text-xs text-pg-primary-700 tracking-wider whitespace-nowrap dark:text-pg-primary-300',
134 |             'thAction' => '!font-bold',
135 |         ],
136 | 
137 |         'body' => [
138 |             'tbody'              => 'text-pg-primary-800',
139 |             'tbodyEmpty'         => '',
140 |             'tr'                 => 'border-b border-pg-primary-100 dark:border-pg-primary-600 hover:bg-pg-primary-50 dark:bg-pg-primary-800 dark:hover:bg-pg-primary-700',
141 |             'td'                 => 'px-3 py-2 whitespace-nowrap dark:text-pg-primary-200',
142 |             'tdEmpty'            => 'p-2 whitespace-nowrap dark:text-pg-primary-200',
143 |             'tdSummarize'        => 'p-2 whitespace-nowrap dark:text-pg-primary-200 text-sm text-pg-primary-600 text-right space-y-2',
144 |             'trSummarize'        => '',
145 |             'tdFilters'          => '',
146 |             'trFilters'          => '',
147 |             'tdActionsContainer' => 'flex gap-2',
148 |         ],
149 |     ];
150 | }
151 | ```
152 | 


--------------------------------------------------------------------------------
/docs/table-component/data-source-fields.md:
--------------------------------------------------------------------------------
  1 | # Data Source Fields
  2 | 
  3 | This section covers the PowerGrid Data Source fields.
  4 | 
  5 | Here you will find:
  6 | 
  7 | [[toc]]
  8 | 
  9 | ## Introduction
 10 | 
 11 | Once your [Table Data Source](/table-component/data-source) method is properly configured, it's time to decide which fields you want to bring as columns to be later displayed on your Table.
 12 | 
 13 | ## Adding Fields
 14 | 
 15 | To include fields from your data source, call the `PowerGrid::fields()` inside the `fields()` method. Then, proceed to chain as many data source fields as you need.
 16 | 
 17 | The next example adds the fields `id`, `name`, and `price`, bringing data directly from the database.
 18 | 
 19 | ```php
 20 | // app/Livewire/DishTable.php
 21 | 
 22 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
 23 | use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;// [!code ++:2]
 24 | use PowerComponents\LivewirePowerGrid\PowerGridFields;
 25 | 
 26 | class DishTable extends PowerGridComponent
 27 | {
 28 |     public function fields(): PowerGridFields// [!code ++:7]
 29 |     {
 30 |         return PowerGrid::fields()
 31 |             ->add('id')
 32 |             ->add('name')
 33 |             ->add('price');
 34 |     }
 35 | }
 36 | ```
 37 | 
 38 | 

 39 |   
🎉 Super!

 40 |   
Now, let's check out how to Add Columns.

 41 | 

 42 | 
 43 | ## Custom Fields
 44 | 
 45 | Sometimes, we need to modify data from the database before showing it on the Table Component.
 46 | 
 47 | In addition to a data source field name, `PowerGrid::fields()->add()` also accepts a `closure` as a second parameter, allowing you to modify the data coming from the database.
 48 | 
 49 | ::: danger ❗ WARNING
 50 | **Be careful:** Data returned in Custom Fields is **NOT escaped** by default. As a result, your application might be vulnerable to [XSS attacks](https://owasp.org/www-community/attacks/xss/).
 51 | 
 52 | It's highly recommended to use Laravel's [`e() helper`](https://laravel.com/docs/strings#method-e) to escape data return in Custom Fields.
 53 | :::
 54 | 
 55 | In the next example, in addition to the database `name` and `price` fields, the data source will have two new `Custom Fields`. These Custom Fields will output the `name` in UPPER CASE and the `price` with a 10% discount.
 56 | 
 57 | ```php
 58 | // app/Livewire/DishTable.php
 59 | 
 60 | use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;// [!code ++:2]
 61 | use PowerComponents\LivewirePowerGrid\PowerGridFields;
 62 | 
 63 | public function fields(): PowerGridFields
 64 | {
 65 |     return PowerGrid::fields()
 66 |     ->add('id')
 67 |     ->add('name')
 68 |     ->add('price')
 69 |     ->add('name_uppercase', function ($dish) {// [!code ++:6]
 70 |         return e(strtoupper($dish->name));
 71 |     })
 72 |     ->add('price_with_discount', function ($dish) {
 73 |         return floatval($dish->price - ($dish->price * 0.1));
 74 |     });
 75 | }
 76 | ```
 77 | 
 78 | ## Formatting Data Examples
 79 | 
 80 | Sometimes, you need might to display data in a human-friendly way. This is often the case with dates, currencies and boolean values.
 81 | 
 82 | [`Custom Fields`](/table-component/data-source-fields.html#custom-fields) provides you a convenient way to prepare and format your data.
 83 | 
 84 | Here are examples of some common ways of data formatting.
 85 | 
 86 | ---
 87 | 
 88 | ### Date
 89 | 
 90 | This example adds a new column `created_at_formatted` to display the formatted `created_at` datetime column.
 91 | 
 92 | ```php
 93 | // app/Livewire/DishTable.php
 94 | 
 95 | use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
 96 | use PowerComponents\LivewirePowerGrid\PowerGridFields;
 97 | use Illuminate\Support\Carbon;// [!code ++]
 98 | 
 99 | public function fields(): PowerGridFields
100 | {
101 |     return PowerGrid::fields()
102 |         ->add('created_at') // 2024-01-20 10:05:44
103 |         ->add('created_at_formatted', function ($dish) {// [!code ++:3]
104 |             return Carbon::parse($dish->created_at)->format('d/m/Y H:i'); //20/01/2024 10:05
105 |         });
106 | }
107 | ```
108 | 
109 | ---
110 | 
111 | ### Currency
112 | 
113 | Displaying formatted currency can vastly improve the user experience.
114 | 
115 | This example adds a new column `price_in_eur` to display the formatted `price`.
116 | 
117 | ```php
118 | // app/Livewire/DishTable.php
119 | 
120 | use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
121 | use PowerComponents\LivewirePowerGrid\PowerGridFields;
122 | use Illuminate\Support\Number;// [!code ++]
123 | 
124 | public function fields(): PowerGridFields
125 | {
126 |   return PowerGrid::fields()
127 |         ->add('price') // 170.90
128 |         ->add('price_in_eur', function ($dish) {// [!code ++:3]
129 |             return Number::currency($dish->price, in: 'EUR', locale: 'pt_PT'); //€ 170,90
130 |         });
131 | }
132 | ```
133 | 
134 | ---
135 | 
136 | ### Boolean
137 | 
138 | Boolean values are not user-friendly.
139 | 
140 | This example adds a new column `in_stock_label` to return yes/no instead of true/false in `in_stock`.
141 | 
142 | ```php
143 | // app/Livewire/DishTable.php
144 | 
145 | use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
146 | use PowerComponents\LivewirePowerGrid\PowerGridFields;
147 | 
148 | public function fields(): PowerGridFields
149 | {
150 |   return PowerGrid::fields()
151 |         ->add('in_stock') // 1/0
152 |         ->add('in_stock_label', function ($dish) {// [!code ++:3]
153 |             return $dish->in_stock ? 'Yes' : 'No'; // Yes/No
154 |         });
155 | }
156 | ```
157 | 
158 | ---
159 | 
160 | ### Text summary
161 | 
162 | Large amounts of text can compromise the readability of your Table
163 | 
164 | This example adds a `description_excerpt` with only the first 8 words of the `description` field.
165 | 
166 | ```php
167 | // app/Livewire/DishTable.php
168 | 
169 | use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
170 | use PowerComponents\LivewirePowerGrid\PowerGridFields;
171 | 
172 | public function fields(): PowerGridFields
173 | {
174 |     return PowerGrid::fields()
175 |         ->add('description')
176 |         ->add('description_excerpt', function ($dish) {// [!code ++:3]
177 |            return str(e($dish->description))->words(8); //Gets the first 8 words
178 |        });
179 | }
180 | ```
181 | 
182 | ::: danger ❗ WARNING
183 | **Be careful:** Data returned in Custom Fields is **NOT escaped** by default. As a result, your application might be vulnerable to [XSS attacks](https://owasp.org/www-community/attacks/xss/).
184 | 
185 | It's highly recommended to use Laravel's [`e() helper`](https://laravel.com/docs/strings#method-e) to escape data return in Custom Fields.
186 | :::
187 | 
188 | ---
189 | 
190 | ### HTML Link
191 | 
192 | Sometimes, you may need to render an HTML link inside a Table cell.
193 | 
194 | This example adds a `search_dish_name` column with a link to search for a dish name on Google, based on the `name` field.
195 | 
196 | ```php
197 | // app/Livewire/DishTable.php
198 | 
199 | use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
200 | use PowerComponents\LivewirePowerGrid\PowerGridFields;
201 | 
202 | public function fields(): PowerGridFields
203 | {
204 |     return PowerGrid::fields()
205 |         ->add('name')
206 |         ->add('search_dish_name', function ($dish) {// [!code ++:7]
207 |             return sprintf(
208 |                 'Search "%s"',
209 |                 urlencode(e($dish->name)),
210 |                 e($dish->name)
211 |             );
212 |         });
213 | }
214 | ```
215 | 
216 | ::: danger ❗ WARNING
217 | **Be careful:** Data returned in Custom Fields is **NOT escaped** by default. As a result, your application might be vulnerable to [XSS attacks](https://owasp.org/www-community/attacks/xss/).
218 | 
219 | It's highly recommended to use Laravel's [`e() helper`](https://laravel.com/docs/strings#method-e) to escape data return in Custom Fields.
220 | :::
221 | 
222 | 

223 |   
🚀 See it in action

224 |   
See an interactive example generating an HTML Link.

225 | 

226 | 
227 | ---
228 | 
229 | ### Dropdown Menu
230 | 
231 | Dropdown menus allow users to choose an option from a pre-established list. This can be very useful in a grid for manipulating data.
232 | 
233 | In the example below, we have created a [Blade component](https://laravel.com/docs/blade) that receives a list of options and the select category ID of each item. The component is rendered as a Custom Field, and it displays a select input with the category of each dish pre-selected.
234 | 
235 | ::: code-group
236 | 
237 | ```php [DishTable.php]
238 | // app/Livewire/DishTable.php
239 | 
240 | use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
241 | use PowerComponents\LivewirePowerGrid\PowerGridFields;
242 | 
243 |  public function fields(): PowerGridFields
244 |     {
245 |         $options = collect([1 => 'Category A', 2 => 'Category B',  1 => 'Category C' ]);// [!code ++]
246 |  
247 |         return PowerGrid::fields()
248 |             ->add('id')
249 |             ->add('name')
250 |             ->add('category_name', function ($dish){// [!code ++:8]
251 |                return Blade::render('',
252 |                 [
253 |                     'options' => $options, 
254 |                     'dishId' => intval($dish->id), 
255 |                     'selected' => intval($dish->category_id)
256 |                 ]);
257 |             });
258 |     }
259 | ```
260 | 
261 | ```php [SelectCategory.php]
262 | //app/View/Components/SelectCategory.php
263 | 
264 | namespace App\View\Components;
265 | 
266 | use Closure;
267 | use Illuminate\Contracts\View\View;
268 | use Illuminate\Support\Collection;
269 | use Illuminate\View\Component;
270 | 
271 | class SelectCategory extends Component
272 | {
273 |     /**
274 |      * Create a new component instance.
275 |      */
276 |     public function __construct(public Collection $options, public int $dishId, public string $selected)
277 |     {
278 |     }
279 | 
280 |     /**
281 |      * Get the view / contents that represent the component.
282 |      */
283 |     public function render(): View|Closure|string
284 |     {
285 |         return view('components.select-category');
286 |     }
287 | }
288 | ```
289 | 
290 | ```php [select-category.blade.php]
291 | //resources/views/components/select-category.blade.php
292 | 
293 | @props(['selected', 'dishId'])
294 | 

295 |     
307 | 

308 | ```
309 | 
310 | :::
311 | 
312 | 

313 |   
🚀 See it in action

314 |   
See an interactive example using Dropdown Menu on a Table.

315 | 
316 | 

317 | 
318 | ---
319 | 
320 | ### Image
321 | 
322 | This example demonstrates how to display images within a cell.
323 | 
324 | ```php
325 | // app/Livewire/DishTable.php
326 | 
327 | use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
328 | use PowerComponents\LivewirePowerGrid\PowerGridFields;
329 | 
330 | public function fields(): PowerGridFields
331 | {
332 |     return PowerGrid::fields()
333 |         ->add('name')
334 |         ->add('avatar', function ($dish) { // [!code ++:3]
335 |             return 'id}.jpg") . '">';
336 |         });
337 | }
338 | ```
339 | 
340 | 

341 |   
🚀 See it in action

342 |   
See an interactive example using Images on a Table.

343 | 
344 | 

345 | 
346 | ---
347 | 
348 | ### Blade Component
349 | 
350 | Combining [`Custom Fields`](/table-component/data-source-fields.html#custom-fields) with [Blade components](https://laravel.com/docs/blade) can be a powerful tool to display customized content inside cells.
351 | 
352 | You can return a Blade Component as demonstrated below:
353 | 
354 | ```php
355 | // app/Livewire/DishTable.php
356 | 
357 | use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
358 | use PowerComponents\LivewirePowerGrid\PowerGridFields;
359 | use Illuminate\Support\Facades\Blade; // [!code ++]
360 | 
361 | public function fields(): PowerGridFields
362 | {
363 |     return PowerGrid::fields()
364 |         ->add('name')
365 |         ->add('rating_stars', fn ($dish) => Blade::render('')); // [!code ++]
366 | }
367 | ```
368 | 
369 | 

370 |   
🚀 See it in action

371 |   
See an interactive example using  a Custom Field Blade Component.

372 | 
373 | 

374 | 
375 | ---
376 | 
377 | ### Enum
378 | 
379 | When you have an Enum with labels, you can use a `closure` to display label values instead of the default `case` values.
380 | 
381 | ```php
382 | // app/Enums/Diet.php
383 | 
384 | enum Diet: int
385 | {
386 |     case ALL      = 0;
387 |     case VEGAN    = 1;
388 |     case CELIAC   = 2;
389 | 
390 |     public function labels(): string
391 |     {
392 |         return match ($this) {
393 |             self::ALL         => "🍽️ All diets",
394 |             self::VEGAN       => "🌱 Suitable for Vegans",
395 |             self::CELIAC      => "🥜 Suitable for Celiacs",
396 |         };
397 |     }
398 | }
399 | ```
400 | 
401 | The following example renders `🍽️ All diets` instead of the database value `0`.
402 | 
403 | ```php
404 | // app/Livewire/DishTable.php
405 | 
406 | use PowerComponents\LivewirePowerGrid\PowerGridFields;
407 | use App\Enums\Diet;// [!code ++]
408 | 
409 | public function fields(): PowerGridFields
410 | {
411 | 
412 |   return PowerGrid::fields()
413 |         ->add('name')
414 |         ->add('diet', function ($dish) {// [!code ++:3]
415 |             return Diet::from($dish->diet)->labels();
416 |         });
417 | }
418 | ```
419 | 
420 | 

421 |   
🚀 See it in action

422 |   
See an interactive example using  Enums.

423 | 
424 | 

425 | 
426 | ## Exporting Data
427 | 
428 | Sometimes, it may be necessary to omit certain formatted Columns when exporting data but still show them in the grid. This might be the case with images or HTML links.
429 | 
430 | To remove these Columns, see [Exclude Columns From Exporting](/table-features/exporting-data.html#exclude-columns-from-exporting).
431 | 


--------------------------------------------------------------------------------
/docs/table-component/data-source.md:
--------------------------------------------------------------------------------
  1 | # Data Source
  2 | 
  3 | This section covers your PowerGrid Component's Data Source configuration.
  4 | 
  5 | Here you will find:
  6 | 
  7 | [[toc]]
  8 | 
  9 | ## Introduction
 10 | 
 11 | The Data Source is responsible for feeding data into your PowerGrid Table Component.
 12 | 
 13 | Currently, PowerGrid can receive data from the Eloquent Builder, Query Builder, Collections, and arrays.
 14 | 
 15 | ## Configuring the Data Source
 16 | 
 17 | You may return the following types as in your Table's `datasource()` method.
 18 | 
 19 | | Type      | Type                                         | Online Example                                                       |
 20 | | ---------------- | -------------------------------------------- | -------------------------------------------------------------------- |
 21 | | [Eloquent Builder](https://laravel.com/docs/eloquent) | Illuminate\Database\Eloquent\Builder::class | 🌎 [Eloquent Builder](https://demo.livewire-powergrid.com/examples/datasource-relationship) |
 22 | | [Query Builder](https://laravel.com/docs/queries)    | Illuminate\Database\Query\Builder::class    | 🌎 [Query Builder](https://demo.livewire-powergrid.com/examples/datasource-query-builder)   |
 23 | | [Collection](https://laravel.com/docs/collections)       | Illuminate\Support\Collection::class        | 🌎 [Collection](https://demo.livewire-powergrid.com/examples/datasource-collection)         |
 24 | | Native PHP Array | `array`                                        | -                                                                    |
 25 | 
 26 | Here is an example using Eloquent to get the data of the Model `Dish`.
 27 | 
 28 | ```php{9-12}
 29 | // app/Livewire/DishTable.php
 30 | 
 31 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
 32 | use Illuminate\Database\Eloquent\Builder;// [!code ++]
 33 | use App\Models\Dish;// [!code ++]
 34 | 
 35 | class DishTable extends PowerGridComponent
 36 | {
 37 |   public function datasource(): ?Builder// [!code ++:4]
 38 |   {
 39 |     return Dish::query();
 40 |   }
 41 | }
 42 | ```
 43 | 
 44 | 

 45 |   
🎉 Job done!

 46 |   
Let's jump to the Data Source Fields section and configure the fields from your Data Source.

 47 | 

 48 | 
 49 | ## Relationships
 50 | 
 51 | Of course, you can also load Relationships in your data source.
 52 | 
 53 | In this example, let's bring in the `Kitchen` relationship, to show where each dish was cooked.
 54 | 
 55 | ```php
 56 | // app/Livewire/DishTable.php
 57 | 
 58 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
 59 | use Illuminate\Database\Eloquent\Builder;
 60 | use App\Models\Dish;
 61 | 
 62 | class DishTable extends PowerGridComponent
 63 | {
 64 |   public function datasource(): ?Builder
 65 |   {
 66 |     return Dish::query();// [!code --]
 67 |     return Dish::query()->with('kitchen');// [!code ++]
 68 |   }
 69 | }
 70 | ```
 71 | 
 72 | The Dish Model might look something like this:
 73 | 
 74 | ```php
 75 | // app/Models/Dish.php
 76 | 
 77 | class Dish extends Model
 78 | {
 79 |     public function kitchen(): BelongsTo
 80 |     {
 81 |         return $this->belongsTo(Kitchen::class);
 82 |     }
 83 | 
 84 |     // ...
 85 | }
 86 | ```
 87 | 
 88 | 

 89 |   
🚀 See it in action

 90 |   
See an interactive example using  Relationships in Data Source.

 91 | 
 92 | 

 93 | 
 94 | ## Join Tables
 95 | 
 96 | Some features like [Column sortable()](/table-component/component-columns.html#sortable) or [Column Filters](/table-features/filters.html) may require you to join your relationship in your data source. This will make the relationship Table fields available in the same result row.
 97 | 
 98 | This example loads joins the `categories` relationship.
 99 | 
100 | ```php
101 | // app/Livewire/DishTable.php
102 | 
103 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
104 | use Illuminate\Database\Eloquent\Builder;
105 | use App\Models\Dish;
106 | 
107 | class DishTable extends PowerGridComponent
108 | {
109 |   public function datasource(): ?Builder
110 |   {
111 |     return Dish::query();// [!code --]
112 |     return Dish::query()// [!code ++:9]
113 |               ->join('categories', function ($categories) {
114 |                   $categories->on('dishes.category_id', '=', 'categories.id');
115 |               })
116 |               ->select([
117 |                   'dishes.id',
118 |                   'dishes.calories',
119 |                   'categories.name as category_name',
120 |               ]);
121 |   }
122 | }
123 | ```
124 | 
125 | 

126 |   
🚀 See it in action

127 |   
See an interactive example using  Join in Data Source.

128 | 
129 | 

130 | 
131 | ## Custom Primary Key
132 | 
133 | By default, PowerGrid uses the field `id` as your Model's primary key.
134 | 
135 | If you need to use a different database column, just add the property `$primaryKey` in your PowerGrid Component.
136 | 
137 | You may also configure the `$sortField` property to match your primary key.
138 | 
139 | ```php
140 | // app/Livewire/DishTable.php
141 | 
142 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
143 | 
144 | class DishTable extends PowerGridComponent
145 | {
146 |     public string $primaryKey = 'dishes.custom_dish_id';// [!code ++]
147 | 
148 |     public string $sortField = 'dishes.custom_dish_id';// [!code ++]
149 | }
150 | ```
151 | 
152 | ## Column/Key conflict
153 | 
154 | You might encounter a conflict between primary keys using the same field name (E.g,  `id`).
155 | 
156 | To solve this problem, you must define your key in the `$primaryKey` and `$sortField` proprieties.
157 | 
158 | Read more in the [Custom Primary Key](#custom-primary-key) subsection.
159 | 


--------------------------------------------------------------------------------
/docs/table-features/bulk-actions.md:
--------------------------------------------------------------------------------
  1 | # Bulk Actions
  2 | 
  3 | This section covers the Bulk Action feature.
  4 | 
  5 | Here you will find:
  6 | 
  7 | [[toc]]
  8 | 
  9 | ## Introduction
 10 | 
 11 | PowerGrid offers a convenient perform multi-row actions by displaying a [Button](/table-features/button-class.html) in your Table Component Header and [Checkboxes](/table-features/rows.html#checkboxes) in each Table row.
 12 | 
 13 | Currently, this feature is only available on the Tailwind theme.
 14 | 
 15 | ## Display the Bulk Button
 16 | 
 17 | To implement Bulk Actions in PowerGrid, you must add a [Button](/table-features/button-class.html) inside the `header()` method of your Table Component.
 18 | 
 19 | Typically, a Bulk Button will dispatch an event that can be handled by your component.
 20 | 
 21 | The next example displays a button at the Table header which will dispatch the `bulkDelete` concatenated with the Table name.
 22 | 
 23 | ```php
 24 | // app/Livewire/DishTable.php
 25 | 
 26 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
 27 | use PowerComponents\LivewirePowerGrid\Button;
 28 | 
 29 | class DishTable extends PowerGridComponent
 30 | {
 31 |     public function header(): array// [!code ++:8]
 32 |     {
 33 |         return [
 34 |             Button::add('bulk-delete')
 35 |                 ->slot('Bulk Delete')
 36 |                 ->dispatch('bulkDelete.' . $this->tableName, []),
 37 |         ];
 38 |     }
 39 | }
 40 | ```
 41 | 
 42 | 

 43 |   
🚀 See it in action

 44 |   
See an interactive example using Bulk Actions in PowerGrid.

 45 | 
 46 | 

 47 | 
 48 | ## Handling the Bulk Event
 49 | 
 50 | You may handle the event using the [#[On]](https://livewire.laravel.com/docs/events#listening-for-events) Livewire Attribute.
 51 | 
 52 | The selected item's IDs will be available in the global `pgBulkActions` JavaScript component:
 53 | 
 54 | ```javascript
 55 | window.pgBulkActions.get('name-of-your-table');
 56 | ```
 57 | 
 58 | The example below will simply display an alert containing the row IDs.
 59 | 
 60 | ```php  
 61 | // app/Livewire/DishTable.php
 62 | 
 63 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
 64 | use Livewire\Attributes\On; 
 65 | 
 66 | class DishTable extends PowerGridComponent
 67 | {
 68 |     #[On('bulkDelete.{tableName}')]// [!code ++:5]
 69 |     public function bulkDelete(): void
 70 |     {
 71 |         $this->js('alert(window.pgBulkActions.get(\'' . $this->tableName . '\'))');
 72 |         if($this->checkboxValues){
 73 |             YouModel::destroy($this->checkboxValues);
 74 |             $this->js('window.pgBulkActions.clearAll()'); // clear the count on the interface.
 75 |         }
 76 |     }
 77 | }
 78 | ```
 79 | 
 80 | ## Show Select Items Count
 81 | 
 82 | The selected items count is available in the global `pgBulkActions` JavaScript component, in the `count` property:
 83 | 
 84 | ```javascript
 85 | window.pgBulkActions.count('detail');
 86 | ```
 87 | 
 88 | To display the selected items count in the button, you must add a [`slot()`](/table-features/button-class.html#slot), using the Alpine [x-text](https://alpinejs.dev/directives/text) directive to display the count.
 89 | 
 90 | Example:
 91 | 
 92 | ```php{5}
 93 | public function header(): array
 94 | {
 95 |      return [
 96 |         Button::add('bulk-delete')
 97 |             ->slot('Bulk Delete')// [!code --]
 98 |             ->slot(__('Bulk delete ()'))// [!code ++]
 99 |             ->class('cursor-pointer block bg-white-200 text-gray-700 ')
100 |             ->dispatch('bulkDelete-' . $this->tableName, []),
101 |      ];
102 |  }
103 | ```
104 | 


--------------------------------------------------------------------------------
/docs/table-features/button-class.md:
--------------------------------------------------------------------------------
  1 | # Button Class
  2 | 
  3 | This section covers the PowerGrid Buttons Class.
  4 | 
  5 | Here you will find:
  6 | 
  7 | [[toc]]
  8 | 
  9 | ## Introduction
 10 | 
 11 | PowerGrid offers a convenient way to display buttons in your [Table Rows](/table-features/rows.html#buttons) and a Header button for [Bulk Actions](/table-features/bulk-actions.html).
 12 | 
 13 | Please, refer to the sections linked above to see how to use buttons in each case. Below, we will explore the configuration methods for the `Button::class`.
 14 | 
 15 | ## Usage
 16 | 
 17 | See [Table Rows](/table-features/rows.html#buttons) and  [Bulk Actions](/table-features/bulk-actions.html).
 18 | 
 19 | ## Button Methods
 20 | 
 21 | The methods below can be chained to the `PowerComponents\LivewirePowerGrid\Button` class.
 22 | 
 23 | ### add()
 24 | 
 25 | Creates a new button.
 26 | 
 27 | | Parameter        | Description                  |
 28 | |------------------|------------------------------|
 29 | | (string) $action | internal name of this button |
 30 | 
 31 | Example:
 32 | 
 33 | ```php
 34 | use PowerComponents\LivewirePowerGrid\Button;
 35 | 
 36 | Button::add('create-dish'),
 37 | ```
 38 | 
 39 | ---
 40 | 
 41 | ### slot()
 42 | 
 43 | Render the given HTML.
 44 | 
 45 | | Parameter         | Description |
 46 | |-------------------|-------------|
 47 | | (string) $slot    | HTML string |
 48 | 
 49 | Example:
 50 | 
 51 | ```php
 52 | use PowerComponents\LivewirePowerGrid\Button;
 53 | 
 54 | Button::add('create-dish')  
 55 |         ->slot("⚡ Edit"),
 56 | ```
 57 | 
 58 | ---
 59 | 
 60 | ### icon()
 61 | 
 62 | For the icons to be rendered, you need to define in which location (path) PowerGrid should look for them.
 63 | Define in `paths` between key and value, where the key should be used in the Button class, followed by the name of the blade file:
 64 | 
 65 | `config/livewire-powergrid.php`
 66 | ```php{3,4}
 67 |     'icon_resources' => [
 68 |         'paths' => [
 69 |             'default' => 'resources/views/components/icons',
 70 |           //'solid'   => 'vendor/wireui/heroicons/src/views/components/solid',
 71 | ```
 72 | 
 73 | ```php{4}
 74 | use PowerComponents\LivewirePowerGrid\Button;
 75 | 
 76 | Button::add('delete-dish')  
 77 |     ->icon('default-trash') // 'default' => 'resources/views/components/icons/trash.blade.php',
 78 |   //->icon('solid-trash') // 'solid' => 'resources/views/components/icons/solid/trash.blade.php',
 79 |     ->class('bg-red-500 text-white'),
 80 | ```
 81 | 
 82 | #### Custom attributes
 83 | 
 84 | * You can also set attributes for that icon. By default, `w-5 text-red-600` will be added to all icons.
 85 | 
 86 | `config/livewire-powergrid.php`
 87 | ```php{3}
 88 |     'icon_resources' => [
 89 |         // ...
 90 |         'attributes' => ['class' => 'w-5 text-red-600'],
 91 | ```
 92 | 
 93 | * To add other attributes to the icons, you should do this:
 94 | 
 95 | ```php{4}
 96 | use PowerComponents\LivewirePowerGrid\Button;
 97 | 
 98 | Button::add('delete-dish')  
 99 |     ->icon('default-trash', ['id' => 'my-custom-icon-id', 'class' => 'font-bold'])
100 |     ->class('bg-red-500 text-white'),
101 | ```
102 | 
103 | #### allowed icons
104 | 
105 | * You may want to define some icons that will be allowed (this may help to consume less memory)
106 | 
107 | `config/livewire-powergrid.php`
108 | ```php
109 |     'icon_resources' => [
110 |         // ...
111 |         'allowed' => ['pencil', 'eye'],
112 | ```
113 | 
114 | 
115 | | Parameter               | Description                                      |
116 | |-------------------------|--------------------------------------------------|
117 | | (string) $icon          | Name of the icon that will be loaded from memory |
118 | | (array) $iconAttributes | Icon HTML attributes                             |
119 | 
120 | ---
121 | 
122 | ### class()
123 | 
124 | Sets the button's CSS class attribute.
125 | 
126 | | Parameter           | Description      |
127 | |---------------------|------------------|
128 | | (string) $classAttr | CSS class        |
129 | 
130 | Example:
131 | 
132 | ```php
133 | use PowerComponents\LivewirePowerGrid\Button;
134 | 
135 | Button::add('create-dish')  
136 |     ->slot('Create a dish')
137 |     ->class('bg-indigo-500 text-white'),
138 | ```
139 | 
140 | ---
141 | 
142 | ### attributes()
143 | 
144 | * Define the HTML attributes that should be loaded in the action
145 | 
146 | ::: info
147 | 💡Under the hood, PowerGrid renders using Javascript instead of PHP
148 | :::
149 | 
150 | ```php
151 | use PowerComponents\LivewirePowerGrid\Button;
152 | 
153 | Button::add('create-dish')  
154 |     ->slot('Create a dish')
155 |     ->attributes([
156 |         'id' => 'my-custom-id',
157 |         'class' => 'another-class'
158 |     ]),
159 | ```
160 | 
161 | The code above is equivalent to:
162 | 
163 | ```html{2}
164 | 

165 |     
166 | 

167 | ```
168 | ---
169 | 
170 | ### dispatch()
171 | 
172 | Dispatch events.
173 | 
174 | | Parameter                | Description   |
175 | |--------------------------|---------------|
176 | | (string) $event          | Name of event |
177 | | (array, Closure) $params | Parameters    |
178 | 
179 | Example:
180 | 
181 | ```php
182 | use PowerComponents\LivewirePowerGrid\Button;
183 | 
184 | Button::add('create-dish')  
185 |     ->slot('Create a dish')
186 |     ->class('bg-indigo-500 text-white')
187 |     ->dispatch('postAdded', ['key' => $row->id]),
188 | ```
189 | 
190 | The code above is equivalent to:
191 | 
192 | ```html{2}
193 | 

194 |     

196 | ```
197 | 
198 | ::: tip 💡 TIP
199 | Read more about [Events](https://livewire.laravel.com/docs/events###dispatching-events) in the Livewire documentation.
200 | :::
201 | 
202 | ---
203 | 
204 | ### dispatchTo()
205 | 
206 | Dispatch Events to a target.
207 | 
208 | | Parameter                | Description    |
209 | |--------------------------|----------------|
210 | | (string) $to             | Component name |
211 | | (string) $event          | Name of event  |
212 | | (array, Closure) $params | Parameters     |
213 | 
214 | The code below:
215 | 
216 | ```php
217 | use PowerComponents\LivewirePowerGrid\Button;
218 | 
219 | Button::add('view')
220 |     ->slot('View')
221 |     ->class('btn btn-primary')
222 |     ->dispatchTo('admin-component', 'postAdded', ['key' => $row->id]),
223 | ```
224 | 
225 | is equivalent to:
226 | 
227 | ```html{2}
228 | 

229 |     

231 | ```
232 | 
233 | ::: tip 💡 TIP
234 | Read more about [Events](https://livewire.laravel.com/docs/events###dispatching-events) in the Livewire documentation.
235 | :::
236 | 
237 | ---
238 | 
239 | ### openModal()
240 | 
241 | Opens a modal window using [wire-elements/modal](https://github.com/wire-elements/modal) package. You must install Wire Elements to use this functionality.
242 | 
243 | | Parameter                | Description                                           |
244 | |--------------------------|-------------------------------------------------------|
245 | | (string) $component      | You must pass the `View` of Livewire Modal component. |
246 | | (array, Closure) $params | This is the component parameter.                      |
247 | 
248 | Example:
249 | 
250 | ```php
251 | use PowerComponents\LivewirePowerGrid\Button;
252 | 
253 | Button::add('view')
254 |     ->slot('View')
255 |     ->class('btn btn-primary')
256 |     ->openModal('view-dish', ['dish' => 'id']),
257 | ```
258 | 
259 | ---
260 | 
261 | ### route()
262 | 
263 | Sets the Action route.
264 | 
265 | | Parameter        | Description         |
266 | |------------------|---------------------|
267 | | (string) $route  | Valid Laravel route |
268 | | (array) $params  | Route parameters    |
269 | | (string) $target | HTML href target    |
270 | 
271 | Example:
272 | 
273 | ```php
274 | use PowerComponents\LivewirePowerGrid\Button;
275 | 
276 | Button::add('view')
277 |     ->slot('View')
278 |     ->class('btn btn-primary')
279 |     ->route('dish.edit', ['dish' => $row->id], '_blank'),
280 | ```
281 | 
282 | ---
283 | 
284 | 
285 | ### can()
286 | 
287 | Checks if the button has permission to be rendered.
288 | 
289 | | Parameter     | Default                                         | Default |
290 | |---------------|-------------------------------------------------|---------|
291 | | (string) $allowed | If `false`, the button will not be rendered. | true    |
292 | 
293 | Example:
294 | 
295 | ```php
296 | use PowerComponents\LivewirePowerGrid\Button;
297 | 
298 | Button::add('edit-dish')
299 |     ->slot('Edit')
300 |     ->route('dish.edit', ['dish' => $row->id])
301 |     ->can(allowed: auth()->check()),
302 | ```
303 | 
304 | ---
305 | 
306 | ### tag()
307 | 
308 | Change the button tag to a designated HTML element.
309 | 
310 | | Parameter     | Default                                         | Default |
311 | |---------------|-------------------------------------------------|---------|
312 | | (?string) $tag | If `null`, the button tag will default to `button`. | `null`    |
313 | 
314 | Example:
315 | 
316 | ```php
317 | use PowerComponents\LivewirePowerGrid\Button;
318 | 
319 | Button::add('download-recipe')
320 |     ->slot('Download Recipe')
321 |     ->tag('a')
322 |     ->attributes([
323 |         'href' => url('/destination-to-file.pdf'),
324 |     ]),
325 | ```
326 | 
327 | ---
328 | 
329 | ### tooltip()
330 | 
331 | Sets the button's tooltip (title attribute).
332 | 
333 | | Parameter         |
334 | |-------------------|
335 | | (string) $tooltip |
336 | 
337 | Example:
338 | 
339 | ```php
340 | use PowerComponents\LivewirePowerGrid\Button;
341 | 
342 | Button::add('edit-dish')
343 |     ->slot('Edit')
344 |     ->route('dish.edit', ['dish' => $row->id])
345 |     ->tooltip('Edit Record'),
346 | ```
347 | 
348 | ---
349 | 
350 | ### toggleDetail()
351 | 
352 | Toggle (expand/collapse) the [Detail Row](/table-component/component-configuration.html#detail-row).
353 | 
354 | Example:
355 | 
356 | ```php
357 | use PowerComponents\LivewirePowerGrid\Button;
358 | 
359 | Button::add('toggle-detail')
360 |     ->slot('Toggle Detail')
361 |     ->toggleDetail($row->id),
362 | ```
363 | 
364 | ---
365 | 
366 | ### id()
367 | 
368 |  Add custom html id attribute.
369 | 
370 | | Parameter       |
371 | |-----------------|
372 | | (string) $value |
373 | 
374 | The code below:
375 | 
376 | ```php
377 | use PowerComponents\LivewirePowerGrid\Button;
378 | 
379 | Button::add('view')
380 |     ->slot('View')
381 |     ->class('btn btn-primary')
382 |     ->id('view'), 
383 | ```
384 | 
385 | is equivalent to:
386 | 
387 | ```html
388 | 
144 |     @else
145 |         - out of sock -
146 |     @endif
147 | 
148 | ```
149 | 
150 | 

151 |   
🚀 See it in action

152 |   
See an interactive example using Action From View.

153 | 
154 | 

155 | 
156 | ## Image in Cell
157 | 
158 | See Formatting Data [Image](/table-component/data-source-fields.html#image).
159 | 
160 | ## Cell Data Formatting
161 | 
162 | See [Custom Fields](/table-component/data-source-fields.html#custom-fields) and [Formatting Data Examples](/table-component/data-source-fields.html#formatting-data-examples).
163 | 
164 | ## Conditionally Show/Hide Controls
165 | 
166 | See [Conditional Rules](/table-features/conditional-rules.html).
167 | 
168 | ## Collapsible Rows
169 | 
170 | See [Detail Row](/table-component/component-configuration.html#detail-row).
171 | 
172 | ## Multi-row Bulk Actions
173 | 
174 | See [Bulk Actions](/table-features/bulk-actions.html).
175 | 


--------------------------------------------------------------------------------
/docs/table-features/searching-data.md:
--------------------------------------------------------------------------------
  1 | # Searching Data
  2 | 
  3 | This section covers PowerGrid's Search functionality.
  4 | 
  5 | Here you will find:
  6 | 
  7 | [[toc]]
  8 | 
  9 | ## Introduction
 10 | 
 11 | The methods in this section apply to Table Header [Search Input](/table-features/header-and-footer.html#search-input) and/or the individual [Column Filters](/table-features/filters.html).
 12 | 
 13 | ## Before Search Hook
 14 | 
 15 | Sometimes, you may need to reverse [data formatting](/table-component/data-source-fields.html#formatting-data-examples) before executing a [Search Input](/table-features/header-and-footer.html#search-input) database query. This is often the case with currency, boolean phone numbers, and other field types.
 16 | 
 17 | With PowerGrid you can use the method `beforeSearch()` to intercept a search string, and prepare it to be searched in the database.
 18 | 
 19 | The next example demonstrates cleaning a phone number before searching. Users might search for a "+1-999-123-1235", while the database record is "19991231235".
 20 | 
 21 | ```php
 22 | // app/Livewire/DishTable.php
 23 | 
 24 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
 25 | 
 26 | class DishTable extends PowerGridComponent
 27 | {
 28 |     public function beforeSearch(string $field = null, string $search = null)// [!code ++:9]
 29 |     {
 30 |         if ($field === 'phone') {
 31 |             //+1-999-123-1235 => 19991231235
 32 |             return str($search)->replaceMatches('/[^0-9]+/', '')->toString();
 33 |         }
 34 | 
 35 |         return $search;
 36 |     }
 37 | }
 38 | ```
 39 | 
 40 | You may also create a dedicated method for each field you want to intercept.
 41 | 
 42 | The method name must be: `beforeSearch`+ `fieldname` in camel case. For example, `beforeSearchPhone()` for the field `phone`.
 43 | 
 44 | ```php
 45 | // app/Livewire/DishTable.php
 46 | 
 47 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
 48 | 
 49 | class DishTable extends PowerGridComponent
 50 | {
 51 |     public function beforeSearchPhone($search): string// [!code ++:4]
 52 |     {
 53 |         return str($search)->replaceMatches('/[^0-9]+/', '')->toString();
 54 |     }
 55 | }
 56 | ```
 57 | 
 58 | 

 59 |   
🚀 See it in action

 60 |   
See an interactive example using  Before Search Hook.

 61 | 
 62 | 

 63 | 
 64 | ## Searching Custom Fields
 65 | 
 66 | Here you will find examples using the [`beforeSearch()`](/table-features/searching-data.html#before-search-hook) method to reverse Custom Field [Data Formatting](/table-component/data-source-fields.html#formatting-data-examples), preparing data for database searches.
 67 | 
 68 | ### Currency
 69 | 
 70 | The example below reverses the [Currency](/table-component/data-source-fields.html#currency) data formatting.
 71 | 
 72 | ```php
 73 | // app/Livewire/DishTable.php
 74 | 
 75 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
 76 | 
 77 | class DishTable extends PowerGridComponent
 78 | {
 79 |     public function beforeSearch(string $field = null, string $search = null)
 80 |     {
 81 |         if ($field === 'price') {// [!code ++:6]
 82 |             $parsedCurrency = (new \NumberFormatter('pt-PT', \NumberFormatter::CURRENCY))
 83 |                 ->parse(preg_replace('/\s+/', "\u{A0}", $search));
 84 | 
 85 |             return $parsedCurrency == false ? floatval($search) : $parsedCurrency;
 86 |         }
 87 | 
 88 |         return $search;
 89 |     }
 90 | }
 91 | ```
 92 | 
 93 | ---
 94 | 
 95 | ### Boolean
 96 | 
 97 | The example below reverses the [Boolean](/table-component/data-source-fields.html#boolean) data formatting.
 98 | 
 99 | ```php
100 | // app/Livewire/DishTable.php
101 | 
102 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
103 | 
104 | class DishTable extends PowerGridComponent
105 | {
106 |     public function beforeSearch(string $field = null, string $search = null)
107 |     {
108 |         if ($field === 'in_stock') {// [!code ++:7]
109 |             return match (strtolower(trim($search))) {
110 |                 'yes'   => '1',
111 |                 'no'    => '0',
112 |                 default => $search,
113 |             };
114 |         }
115 | 
116 |         return $search;
117 |     }
118 | }
119 | ```
120 | 
121 | ---
122 | 
123 | ### Date
124 | 
125 | Consider using the [`searchableRaw()`](/table-component/component-columns.html#searchableraw) column method.
126 | 
127 | ---
128 | 
129 | ### Enum Field
130 | 
131 | Currently, PowerGrid does not support searching Enum fields with the [Search Input](/table-features/header-and-footer.html#search-input). Consider using a [Filter Enum Select](/table-features/filters.html#enum-select) instead.
132 | 
133 | ## Searching with Relationship
134 | 
135 | To include relationships when searching with [Search Input](/table-features/header-and-footer.html#search-input) or [Column Filters](/table-features/filters.html), you must indicate these relationships in the `relationSearch()` method in your Table Component.
136 | 
137 | The method returns an associative array with `model_name` => `columns to be searched`. Nested relationships should also be indicated in this array.
138 | 
139 | The next example adds the relationship to the `kitchen` Model and includes the column `name` and the nested relationship with the `Chef` Model. A Dish has a Kitchen, and a Kitchen has a Chef.
140 | 
141 | ```php
142 | // app/Livewire/DishTable.php
143 | 
144 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
145 | 
146 | class DishTable extends PowerGridComponent
147 | {
148 |     public function relationSearch(): array// [!code ++:9]
149 |     {
150 |         return [
151 |             'kitchen' => [ // relationship on dishes model
152 |                 'name', // column enabled to search
153 |                 'chef' => ['name'] // nested relation and column enabled to search
154 |             ],
155 |         ];
156 |     }
157 | }
158 | ```
159 | 
160 | 

161 |   
🚀 See it in action

162 |   
See an interactive example using Relation Search.

163 | 
164 | 

165 | 
166 | ## Query String
167 | 
168 | To enable the Query functionality, you must declare a method `queryString()` inside your Table Component class. 
169 | 
170 | ```php
171 | // app/Livewire/DishTable.php
172 | 
173 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
174 | 
175 | class DishTable extends PowerGridComponent
176 | {
177 |     protected function queryString(): array// [!code ++:8]
178 |     {
179 |         return $this->powerGridQueryString();
180 |     }
181 | }
182 | ```
183 | 
184 | You can also exclude some fields from the query string, as demonstrated below.  For more information, visit Livewire [excluding query string](https://livewire.laravel.com/docs/url#excluding-certain-values) documentation section.
185 | 
186 | Example:
187 | 
188 | ```php
189 | // app/Livewire/DishTable.php
190 | 
191 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
192 | 
193 | class DishTable extends PowerGridComponent
194 | {
195 |     protected function queryString(): array// [!code ++:8]
196 |     {
197 |         return [
198 |             'search' => ['except' => ''],
199 |             'page' => ['except' => 1],
200 |             ...$this->powerGridQueryString(),
201 |         ];
202 |     }
203 | }
204 | ```
205 | 


--------------------------------------------------------------------------------
/docs/table-features/sorting-data.md:
--------------------------------------------------------------------------------
 1 | # Sorting Data
 2 | 
 3 | This section covers how to configure Data Sorting in your Table Component.
 4 | 
 5 | Here you will find:
 6 | 
 7 | [[toc]]
 8 | 
 9 | ## Sort by Field and Direction
10 | 
11 | To configure your Table sort field and direction, you must declare the properties `$sortField` and `$sortDirection` (`asc`/`desc`) in your Components class.
12 | 
13 | Example:
14 | 
15 | ```php
16 | // app/Livewire/DishTable.php
17 | 
18 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
19 | 
20 | class DishTable extends PowerGridComponent
21 | {
22 |       public string $sortField = 'name'; // [!code ++:3]
23 | 
24 |       public string $sortDirection = 'desc';
25 | }
26 | ```
27 | 
28 | ## Natural Sorting (String as Number)
29 | 
30 | Occasionally, you may need to sort alphanumeric strings in natural order, just like PHP's when using [natsort()](https://www.php.net/manual/en/function.natsort.php) function.
31 | 
32 | ```plain
33 | Standard sorting: img1.png, img10.png, img12.png, img2.png
34 | 
35 | Natural sorting:  img1.png, img2.png, img10.png, img2.png
36 | ```
37 | 
38 | To enable this feature, you must declare the property `$withSortStringNumber` as `true` in your Components class.
39 | 
40 | Example:
41 | 
42 | ```php
43 | // app/Livewire/DishTable.php
44 | 
45 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
46 | 
47 | class DishTable extends PowerGridComponent
48 | {
49 |       public bool $withSortStringNumber = true; // [!code ++]
50 | }
51 | ```
52 | 
53 | ## Multi Column Sorting
54 | 
55 | Sometimes, you may need to sort your Table by the combination of two or more columns.
56 | 
57 | To enable multi sorting, you must set the property `$multiSort` to `true` in your PowerGrid Table class.
58 | 
59 | Even if this feature is disabled, users can still select multiple columns by holding `shift` and clicking on different column headers.
60 | 
61 | ```php
62 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
63 | 
64 | class YourPowerGridTable extends PowerGridComponent
65 | {
66 |      public bool $multiSort = true;// [!code ++]
67 | }
68 | ```
69 | 


--------------------------------------------------------------------------------
/docs/table-features/updating-data.md:
--------------------------------------------------------------------------------
  1 | # Updating Data
  2 | 
  3 | This section covers validating and updating in your Table Component.
  4 | Here you will find:
  5 | 
  6 | [[toc]]
  7 | 
  8 | ## Introduction
  9 | 
 10 | Some PowerGrid features like  [Toggleable](/table-features/columns.html#toggleable) and [Edit On Click](/table-features/columns.html#edit-on-click) provide a quick way to edit and update data directly from the grid.
 11 | 
 12 | On this page, you can find information on handling, processing, validating, and update data coming from the user input via.
 13 | 
 14 | ## Toggleable Switch
 15 | 
 16 | Data submitted by the user via a [Toggleable](/table-features/columns.html#toggleable) switch will be handled by the method `onUpdatedToggleable()`.
 17 | 
 18 | To update your records, you must create a method `onUpdatedToggleable()` in your Table Component. This method will receive the parameters `string|int` `$id`, `string` `$field`, and `string` `$value`.
 19 | 
 20 | Using those parameters, you will have access to the record's primary key, the field being updated, and the value submitted, so you can perform an update operation.
 21 | 
 22 | ```php
 23 | // app/Livewire/DishTable.php
 24 | 
 25 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
 26 | use App\Models\Dish;
 27 | 
 28 | class DishTable extends PowerGridComponent
 29 | {
 30 |     public function onUpdatedToggleable(string|int $id, string $field, string $value): void// [!code ++:6]
 31 |     {
 32 |         Dish::query()->find($id)->update([
 33 |             $field => e($value),
 34 |         ]);
 35 |     }
 36 | }
 37 | ```
 38 | 
 39 | 

 40 |   
🚀 See it in action

 41 |   
See an interactive example of Saving Toggleable Data.

 42 | 
 43 | 

 44 | 
 45 | ## Edit On Click
 46 | 
 47 | Data submitted by the user via [Edit On Click](/table-features/columns.html#edit-on-click) will be handled by the method `onUpdatedEditable()`.
 48 | 
 49 | To update your records, you must create a method `onUpdatedEditable()` in your Table Component. This method will receive the parameters `string|int` `$id`, `string` `$field`, and `string` `$value`.
 50 | 
 51 | Using those parameters, you will have access to the record's primary key, the field being updated, and the value submitted, so you can perform an update operation.
 52 | 
 53 | Example:
 54 | 
 55 | ```php
 56 | // app/Livewire/DishTable.php
 57 | 
 58 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
 59 | use App\Models\Dish;
 60 | 
 61 | class DishTable extends PowerGridComponent
 62 | {
 63 |     public function onUpdatedEditable(string|int $id, string $field, string $value): void // [!code ++:6]
 64 |     {
 65 |         Dish::query()->find($id)->update([
 66 |             $field => e($value),
 67 |         ]);
 68 |     }
 69 | }
 70 | ```
 71 | 
 72 | ::: danger ❗ WARNING
 73 | For security reasons, data input must be escaped and validated before it is stored in the database.
 74 | 
 75 | It's highly recommended to use Laravel's [`e() helper`](https://laravel.com/docs/strings#method-e) and [Livewire Validation](https://livewire.laravel.com/docs/validation#real-time-validation) when dealing with user input.
 76 | :::
 77 | 
 78 | 

 79 |   
🚀 See it in action

 80 |   
See an interactive example of Saving Edit On Click Data.

 81 | 
 82 | 

 83 | 
 84 | ## Updating Custom Fields
 85 | 
 86 | When using [Custom Fields](/table-component/data-source-fields.html#custom-fields), most likely the field name in the `$field` variable will not match your database column name.
 87 | 
 88 | Since you probably have formatted the data, the data received in the `$value` variable will not match your column data type.
 89 | 
 90 | To update Custom Fields, you must first "catch" the custom field name, override it with the original field name, and then, most likely, reverted its data formatting.
 91 | 
 92 | The next example demonstrates handling data from a formatted currency input (E.g, 10.000,00 $) to be saved in a `double` database field (E.g, 10000.00).
 93 | 
 94 | ```php
 95 | // app/Livewire/DishTable.php
 96 | 
 97 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
 98 | use App\Models\Dish;
 99 | 
100 | class DishTable extends PowerGridComponent
101 | {
102 |     public function onUpdatedEditable(string|int $id, string $field, string $value): void
103 |     {
104 |         //Catch the "price_formatted" field // [!code ++:13]
105 |         if ($field === 'price_formatted') { 
106 | 
107 |             //Override the field
108 |             $field = 'price'; 
109 |             
110 |             // Parse the value
111 |             // 10.000,00 $ => 10000.00
112 |             $value = str($value)->replace('.', '')
113 |                 ->replace(',', '.')
114 |                 ->replaceMatches('/[^Z0-9\.]/', '')
115 |                 ->toString();
116 |         }
117 | 
118 |         Dish::query()->find($id)->update([
119 |             $field => e($value),
120 |         ]);
121 |     }
122 | }
123 | ```
124 | 
125 | The field `price_formatted`, which the `$value` is formatted currency (E.g, 10.000,00 $). The formatted string will be reverted to `10000.00`, for a `double` database column. Moreover, note that the parameter `$field` is set to `price`, which is the database column to be updated.
126 | 
127 | ## Reload Data on Update
128 | 
129 | You may call the method `$this->fillData()` to reload data after a successful update.
130 | 
131 | Example:
132 | 
133 | ```php
134 | // app/Livewire/DishTable.php
135 | 
136 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
137 | use App\Models\Dish;
138 | 
139 | class DishTable extends PowerGridComponent
140 | {
141 |     public function onUpdatedEditable(string|int $id, string $field, string $value): void
142 |     {
143 |        $updated = Dish::query()->find($id)->update([// [!code highlight:1]
144 |             $field => e($value),
145 |         ]);
146 | 
147 |         if ($updated) {// [!code ++:3]
148 |             $this->fillData();
149 |         }
150 |     }
151 | }
152 | ```
153 | 
154 | ## Reload Data from External Component
155 | 
156 | A web application might have other components that interact with the data displayed in your grid, requiring you to refresh your Table after an update has occurred.
157 | 
158 | In order to  refresh the data, first you must set a unique [Table Name](/table-component/component-configuration.html#table-name) for your Component.
159 | 
160 | Then, you can dispatch the [event](/table-component/component-configuration.html#events) `pg:eventRefresh-YourTableName` within your component to refresh your Table.
161 | 
162 | Example:
163 | 
164 | ```php
165 | namespace App\Livewire;
166 | 
167 | use Livewire\Component;
168 | 
169 | class SomeComponent extends Component
170 | {
171 |     public function save()
172 |     {
173 |         //... some code ...
174 | 
175 |         $this->dispatch('pg:eventRefresh-DishTable');// [!code ++]
176 |     }
177 | }
178 | ```
179 | 
180 | ## Skip Reload After Update
181 | 
182 | You may use Livewire's [Skipping re-renders](https://livewire.laravel.com/docs/actions#skipping-re-renders) functionality by calling the method `$this->skipRender()` after the update.
183 | 
184 | Example:
185 | 
186 | ```php
187 | // app/Livewire/DishTable.php
188 | 
189 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
190 | use App\Models\Dish;
191 | 
192 | class DishTable extends PowerGridComponent
193 | {
194 |     public function onUpdatedToggleable($id, $field, $value): void
195 |     {
196 |         Dish::query()->where('id', $id)->update([
197 |             $field => $value,
198 |         ]);
199 | 
200 |         $this->skipRender();// [!code ++]
201 |     }
202 | }
203 | ```
204 | 
205 | ## Data Validation
206 | 
207 | PowerGrid Table Components can use the [Livewire Validation](https://livewire.laravel.com/docs/validation#real-time-validation) feature to validate inputted data.
208 | 
209 | Just add a call to `$this->validate()` inside the `onUpdatedEditable()` or `onUpdatedToggleable()` methods.
210 | 
211 | Example:
212 | 
213 | ```php
214 | // app/Livewire/DishTable.php
215 | 
216 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
217 | use App\Models\Dish;
218 | 
219 | class DishTable extends PowerGridComponent
220 | {
221 |     public function rules()// [!code ++:6]
222 |     {
223 |         return [
224 |             'name.*' => ['required', 'alpha', 'max:130'],
225 |         ];
226 |     }
227 | 
228 |     public function onUpdatedEditable(string|int $id, string $field, string $value): void
229 |     {
230 |         $this->validate(); // [!code ++]
231 |         
232 |         Dish::query()->find($id)->update([
233 |             $field => e($value),
234 |         ]);
235 |     }
236 | }
237 | ```
238 | 
239 | 

240 |   
🚀 See it in action

241 |   
See an interactive example using Data Validation in PowerGrid.

242 | 
243 | 

244 | 
245 | ## Custom Field Validation
246 | 
247 | If you are rendering a Blade component via a [Custom Fields](/table-component/data-source-fields.html#custom-fields), you may share your Validation Errors as exemplified below:
248 | 
249 | ```php
250 | // app/Livewire/DishTable.php
251 | 
252 | use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
253 | use PowerComponents\LivewirePowerGrid\PowerGridFields;
254 | use PowerComponents\LivewirePowerGrid\PowerGridComponent;
255 | use Illuminate\Support\Facades\Blade;
256 | 
257 | class DishTable extends PowerGridComponent
258 | {
259 |     public bool $showErrorBag = true;
260 | 
261 |     public function fields(): PowerGridFields// [!code ++:12]
262 |     {
263 |         return PowerGrid::fields()
264 |             ->add('id')
265 |             ->add('dish_review', function ($dish) {
266 |                 $error = isset($this->getErrorBag()->getMessages()['dish_review.'.$dish->id])
267 |                     ? $this->getErrorBag()->getMessages()['dish_review.'.$dish->id][0]
268 |                     : null;
269 | 
270 |                 return Blade::render('');
271 |             });
272 |     }
273 | }
274 | ```
275 | 
276 | The Blade component may look something like this:
277 | 
278 | ```php
279 | // app/View/Components/Editable.php
280 | 
281 | @props([
282 |     'id' => null,
283 |     'errors' => null
284 | ])
285 | 

286 |     
287 |     @if($errors)
288 |         

289 |             {!! $errors !!}
290 |         

291 |     @endif
292 | 

293 | ```
294 | 


--------------------------------------------------------------------------------
/docs/testing/index.md:
--------------------------------------------------------------------------------
  1 | # Testing
  2 | 
  3 | Create a test component inside the `tests` folder in your application, for example `tests/Feature/Livewire/UsersTableTest.php`
  4 | 
  5 | You should follow the same concept defined in the [livewire documentation](https://livewire.laravel.com/docs/testing), and then you will be able to use other native assertions in PowerGrid:
  6 | 
  7 | ### Testing Actions Buttons
  8 | 
  9 | Reference: [action button](.././table-features/button-class.html)
 10 | 
 11 | PowerGrid provides a simple testing utility to ensure that a button's structure complies with standards for later rendering with JavaScript. 
 12 | 
 13 | See this example.
 14 | 
 15 | Component: **UsersTable**
 16 | ```php
 17 | class UsersTable extends PowerGridComponent {
 18 |     // ...
 19 |     
 20 |     public function datasource(): Collection
 21 |     {
 22 |         return collect([
 23 |             [
 24 |                 'id'         => 29,
 25 |                 'name'       => 'Luan',
 26 |                 'balance'    => 241.86,
 27 |                 'is_online'  => true,
 28 |                 'created_at' => '2023-01-01 00:00:00',
 29 |             ],
 30 |             [
 31 |                 'id'         => 57,
 32 |                 'name'       => 'Daniel',
 33 |                 'balance'    => 166.51,
 34 |                 'is_online'  => true,
 35 |                 'created_at' => '2023-02-02 00:00:00',
 36 |             ],
 37 |             [
 38 |                 'id'         => 93,
 39 |                 'name'       => 'Claudio',
 40 |                 'balance'    => 219.01,
 41 |                 'is_online'  => false,
 42 |                 'created_at' => '2023-03-03 00:00:00',
 43 |             ],
 44 |             [
 45 |                 'id'         => 104,
 46 |                 'name'       => 'Vitor',
 47 |                 'balance'    => 44.28,
 48 |                 'is_online'  => true,
 49 |                 'created_at' => '2023-04-04 00:00:00',
 50 |             ],
 51 |         ]);
 52 |     }
 53 | 
 54 |     public function actions($row): array
 55 |     {
 56 |         return [
 57 |             Button::add('view')
 58 |                 ->icon('default-eye', [
 59 |                     'class' => '!text-green-500',
 60 |                 ])
 61 |                 ->slot('View')
 62 |                 ->class('text-slate-500 flex gap-2 hover:text-slate-700 hover:bg-slate-100 font-bold p-1 px-2 rounded')
 63 |                 ->dispatch('clickToEdit', ['dishId' => $row?->id, 'dishName' => $row?->name]),
 64 |         ];
 65 |     }
 66 | };
 67 | ```
 68 | 
 69 | Component Test: **UsersTableTest.php**
 70 | 
 71 | ### assertHasAction
 72 | 
 73 | ```php{3}
 74 | it('should be able to see "view" action', function (string $component, object $params) {
 75 |     livewire(UsersTableTest::class)
 76 |         ->assertHasAction('view')
 77 |         // other assertions;
 78 | })
 79 | ```
 80 | 
 81 | ### assertActionContainsAttribute
 82 | 
 83 | `class` attribute example:
 84 | 
 85 | ```php{3-6}
 86 | it('should be able to see "class" attribute in "view" action', function (string $component, object $params) {
 87 |     livewire(UsersTableTest::class)
 88 |         ->assertActionContainsAttribute(
 89 |             action: 'view', 
 90 |             attribute: 'class', 
 91 |             expected: 'flex gap-2 hover:text-slate-700'
 92 |         )
 93 |         // other assertions;
 94 | })
 95 | ```
 96 | 
 97 | ### assertActionContainsAttribute
 98 | 
 99 | `wire:click` attribute example:
100 | 
101 | ```php{3-7}
102 | it('should be able to see "wire:click" in "view" action', function (string $component, object $params) {
103 |     livewire(UsersTableTest::class)
104 |         ->assertActionContainsAttribute(
105 |             action: 'view', 
106 |             attribute: 'wire:click', 
107 |             expected: 'clickToEdit',
108 |             expectedParams: ['dishId' => 29, 'dishName' => 'Luan']
109 |         )
110 |         // other assertions;
111 | })
112 | ```
113 | 
114 | ### assertActionHasIcon
115 | 
116 | `icon` example:
117 | 
118 | ```php{3-6}
119 | it('should be able to see "wire:click" in "view" action', function (string $component, object $params) {
120 |     livewire(UsersTableTest::class)
121 |         ->assertActionContainsAttribute(
122 |             action: 'view', 
123 |             icon: 'default-eye', 
124 |             expected: '!text-green-500'
125 |         )
126 |         // other assertions;
127 | })
128 | ```
129 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "powergrid-doc",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "license": "MIT",
 6 |   "scripts": {
 7 |     "docs:dev": "vitepress dev docs",
 8 |     "docs:build": "vitepress build docs",
 9 |     "docs:preview": "vitepress preview docs"
10 |   },
11 |   "devDependencies": {
12 |     "vitepress": "^1.6.3"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/run.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 |                   #╔═════════════════════╗#
 3 |                   #║   PowerGrid Doc     ║#
 4 |                   #╚═════════════════════╝#
 5 | 
 6 | # ══════════════ STYLES ═════════
 7 | 
 8 | NC='\033[0m'
 9 | GREEN='\033[0;32m'
10 | LABEL_ERROR="\n\033[048;5;9m ERROR ${NC} "
11 | 
12 | #Ascii Logo encoded in Base64
13 | LOGO=$(echo -n "ICAgICAgICAgICAgXDAzM1sxOzMzbSBfX1wwMzNbMG0gICAgIFwwMzNbMDszMm1fX19fICAgICAgICAgICAgICAgICAgICAgICAgICBfX19fX18gICAgIF8gICAgIF9fXDAzM1swbQogICAgICAgICAgICBcMDMzWzE7MzNtLyAvXyxcMDMzWzBtICBcMDMzWzA7MzJtLyBfXyBcX19fXyBfICAgICAgX19fX18gIF9fX19fLyBfX19fL19fX18oXylfX18vIC9cMDMzWzBtCiAgICAgICAgICAgIFwwMzNbMTszM20vXyAsJ1wwMzNbMG0gXDAzM1swOzMybS8gL18vIC8gX18gXCB8IC98IC8gLyBfIFwvIF9fXy8gLyBfXy8gX19fLyAvIF9fICAvIFwwMzNbMG0KICAgICAgICAgICAgXDAzM1sxOzMzbS8nXDAzM1swbSAgIFwwMzNbMDszMm0vIF9fX18vIC9fLyAvIHwvIHwvIC8gIF9fLyAvICAvIC9fLyAvIC8gIC8gLyAvXy8gLyAgXDAzM1swbQogICAgICAgICAgICAgICAgXDAzM1swOzMybS9fLyAgICBcX19fXy98X18vfF9fL1xfX18vXy8gICBcX19fXy9fLyAgL18vXF9fLF8vICAgXDAzM1swbSAg" | base64 --decode)
14 | 
15 | # ══════════════ FUNCTIONS ═════════
16 | 
17 | checkNpm () {
18 |   if ! npm --version >/dev/null 2>&1; then
19 |     echo -e "${LABEL_ERROR}${GREEN}Npm${NC} is required! Visit: https://nodejs.org/en/"
20 |     exit 1;
21 |   fi
22 | }
23 | 
24 | # ══════════════ SCRIPT ═════════
25 | 
26 | echo -e "${LOGO}\n"
27 | 
28 | echo -e "🙏 Thank you for contributing!\n"
29 | 
30 | checkNpm
31 | 
32 | npm install
33 | 
34 | if [ $1 == 'build' ]; then
35 |   npm run docs:build
36 |   exit 1
37 | fi
38 | 
39 | npm run docs:dev
40 | 


--------------------------------------------------------------------------------