{"_id":"custom-table-search","_rev":"57-c349a8651e06450406968a0a8bb6bd45","name":"custom-table-search","dist-tags":{"latest":"1.2.9"},"versions":{"1.1.9":{"name":"custom-table-search","version":"1.1.9","keywords":["custom-table","table-search","react-table","data-table","pagination","sorting","filtering","grid-view","react-component","advanced-search","dynamic-table","frontend","UI-component"],"author":{"name":"Rakesh Singh"},"license":"MIT","_id":"custom-table-search@1.1.9","maintainers":[{"name":"rakeshsingh8484","email":"rakesh9370s@gmail.com"}],"homepage":"https://custom-table-sample.vercel.app/","bugs":{"url":"https://github.com/noobster101-ui/custom-table-search/issues"},"dist":{"shasum":"36e55375c620673e7108794d9437d87b6f18d697","tarball":"https://registry.npmjs.org/custom-table-search/-/custom-table-search-1.1.9.tgz","fileCount":5,"integrity":"sha512-7NFaXyZlqJlf64X3BIBtJ0fD3Bx/z0iOTr/cnLM1nagNagheZkYFm3WS50akk2nYYiQAPz2MNth173lXyA5yKQ==","signatures":[{"sig":"MEYCIQCsaLuw7Bkl5xCXyFXTiLjymDxMiOXiAtmmaWUwcrf1IAIhALLK3vtV0b3VJIwGPq4rBBsxpL3kiRSSUo9+x1vbBS2E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63851},"main":"dist/TableCustom.js","gitHead":"482390afed4d4e7fc10c911ae3001b9695d21ffa","scripts":{"build":"npx babel src --out-dir dist","prepare":"npm run build","postbuild":"cp src/TableCustom.css dist/TableCustom.css"},"_npmUser":{"name":"rakeshsingh8484","email":"rakesh9370s@gmail.com"},"repository":{"url":"git+https://github.com/noobster101-ui/custom-table-search.git","type":"git"},"_npmVersion":"10.5.0","description":"A customizable, dynamic table component with advanced search, sorting, and pagination for React.","directories":{},"_nodeVersion":"20.12.1","dependencies":{"yalc":"^1.0.0-pre.53"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","@babel/cli":"^7.25.9","@babel/core":"^7.26.0","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.25.9"},"peerDependencies":{"react":"^18.3.1","bootstrap":"^5.3.3","react-dom":"^18.3.1"},"_npmOperationalInternal":{"tmp":"tmp/custom-table-search_1.1.9_1733483445493_0.2144911490447443","host":"s3://npm-registry-packages"}},"1.2.3":{"name":"custom-table-search","version":"1.2.3","keywords":["custom-table","table-search","react-table","data-table","pagination","sorting","filtering","grid-view","react-component","advanced-search","dynamic-table","frontend","UI-component"],"author":{"name":"Rakesh Singh"},"license":"MIT","_id":"custom-table-search@1.2.3","maintainers":[{"name":"rakeshsingh8484","email":"rakesh9370s@gmail.com"}],"homepage":"https://custom-table-sample.vercel.app/","bugs":{"url":"https://github.com/noobster101-ui/custom-table-search/issues"},"dist":{"shasum":"728b437fb4140ae0fd9299baea85eff98ad4067f","tarball":"https://registry.npmjs.org/custom-table-search/-/custom-table-search-1.2.3.tgz","fileCount":5,"integrity":"sha512-gz9JRzztklhdRCWxrgdDTQSrdfp4hGqAcMPaXzLeOJ6EHer5phjB5APm8k+qfQiGjD79HIazMjbYji0MZXxSqA==","signatures":[{"sig":"MEYCIQDcR1giwaGWanRp4GaJm97JdXHQJb6gbtUDcxnhfBb6OwIhAJanYxn2Xl7nZ3tVrqvd5hTa1ZUYfKS8Lu/vxdHJ5tiE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63970},"main":"dist/TableCustom.js","types":"index.d.ts","gitHead":"482390afed4d4e7fc10c911ae3001b9695d21ffa","scripts":{"build":"npx babel src --out-dir dist","prepare":"npm run build","postbuild":"cp src/TableCustom.css dist/TableCustom.css"},"_npmUser":{"name":"rakeshsingh8484","email":"rakesh9370s@gmail.com"},"repository":{"url":"git+https://github.com/noobster101-ui/custom-table-search.git","type":"git"},"_npmVersion":"10.5.0","description":"A customizable, dynamic table component with advanced search, sorting, and pagination for React.","directories":{},"_nodeVersion":"20.12.1","dependencies":{"yalc":"^1.0.0-pre.53"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","@babel/cli":"^7.25.9","typescript":"^4.0.0","@babel/core":"^7.26.0","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.25.9"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","bootstrap":"^5.3.3","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/custom-table-search_1.2.3_1734438154781_0.5277001275363016","host":"s3://npm-registry-packages-npm-production"}},"1.2.6":{"name":"custom-table-search","version":"1.2.6","keywords":["custom-table","table-search","react-table","data-table","pagination","sorting","filtering","grid-view","react-component","advanced-search","dynamic-table","frontend","UI-component"],"author":{"name":"Rakesh Singh"},"license":"MIT","_id":"custom-table-search@1.2.6","maintainers":[{"name":"rakeshsingh8484","email":"rakesh9370s@gmail.com"}],"homepage":"https://custom-table-sample.vercel.app/","bugs":{"url":"https://github.com/noobster101-ui/custom-table-search/issues"},"dist":{"shasum":"bed41b9a60e55f171f7b994db46fa037d8b76e5f","tarball":"https://registry.npmjs.org/custom-table-search/-/custom-table-search-1.2.6.tgz","fileCount":5,"integrity":"sha512-3JUe44hWfiVFEyXvR0h+txZPf5PV4yaRQEBBIZsvkhEowL35l2ZS2jrmlzST8ORJ/oxelGEIi1Cn1FEY0SNONw==","signatures":[{"sig":"MEQCIGjsm/qdxz9wkHB4BXM/GZ6DovmsBF00Yi857WutsQdWAiAjevEq/V4yraa6lIEUqVwW6x15/wB55sm2Cfcr0n/zjw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66761},"main":"dist/TableCustom.js","types":"index.d.ts","gitHead":"6ebbffb968734c4e488e5aba96162623fb4bbe26","scripts":{"build":"npx babel src --out-dir dist","prepare":"npm run build","postbuild":"cp src/TableCustom.css dist/TableCustom.css"},"_npmUser":{"name":"rakeshsingh8484","actor":{"name":"rakeshsingh8484","type":"user","email":"rakesh9370s@gmail.com"},"email":"rakesh9370s@gmail.com"},"repository":{"url":"git+https://github.com/noobster101-ui/custom-table-search.git","type":"git"},"_npmVersion":"9.2.0","description":"A customizable, dynamic table component with advanced search, sorting, and pagination for React.","directories":{},"_nodeVersion":"18.19.1","dependencies":{"yalc":"^1.0.0-pre.53"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","@babel/cli":"^7.25.9","typescript":"^4.0.0","@babel/core":"^7.26.0","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.25.9"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","bootstrap":"^5.3.3","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/custom-table-search_1.2.6_1750425629308_0.31246876667405066","host":"s3://npm-registry-packages-npm-production"}},"1.2.8":{"name":"custom-table-search","version":"1.2.8","keywords":["custom-table","table-search","react-table","data-table","pagination","sorting","filtering","grid-view","react-component","advanced-search","dynamic-table","frontend","UI-component"],"author":{"name":"Rakesh Singh"},"license":"MIT","_id":"custom-table-search@1.2.8","maintainers":[{"name":"rakeshsingh8484","email":"rakesh9370s@gmail.com"}],"homepage":"https://custom-table-sample.vercel.app/","bugs":{"url":"https://github.com/noobster101-ui/custom-table-search/issues"},"dist":{"shasum":"8a380e8cb077dc3a0a42ce66eadb12f53a79fd40","tarball":"https://registry.npmjs.org/custom-table-search/-/custom-table-search-1.2.8.tgz","fileCount":5,"integrity":"sha512-RSP4z2yJJBWUQ89j4A0VPjN17UXQd+My6KBJRwz3gXrgeouf/PD7tSqLr7wriWyAuULQBueCaa54nIKFXja0nA==","signatures":[{"sig":"MEYCIQDvpvVQ+kcujXkwGKXiOmbb6XyK0iUIpoXtr7ibdubCAQIhAO89MoWbNKgoSGUFgYBxK4c+y+AjSNAfOpyxXuz1vIB0","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":67065},"main":"dist/TableCustom.js","types":"index.d.ts","gitHead":"2670870adbedb7e2d4fd4514a93aa85b57b5326a","scripts":{"build":"npx babel src --out-dir dist","prepare":"npm run build","postbuild":"cp src/TableCustom.css dist/TableCustom.css"},"_npmUser":{"name":"rakeshsingh8484","actor":{"name":"rakeshsingh8484","type":"user","email":"rakesh9370s@gmail.com"},"email":"rakesh9370s@gmail.com"},"repository":{"url":"git+https://github.com/noobster101-ui/custom-table-search.git","type":"git"},"_npmVersion":"9.2.0","description":"A customizable, dynamic table component with advanced search, sorting, and pagination for React.","directories":{},"_nodeVersion":"18.19.1","dependencies":{"yalc":"^1.0.0-pre.53"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","@babel/cli":"^7.25.9","typescript":"^4.0.0","@babel/core":"^7.26.0","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.25.9"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","bootstrap":"^5.3.3","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/custom-table-search_1.2.8_1750674456138_0.44883097500810165","host":"s3://npm-registry-packages-npm-production"}},"1.2.9":{"name":"custom-table-search","version":"1.2.9","homepage":"https://custom-table-sample.vercel.app/","description":"A customizable, dynamic table component with advanced search, sorting, and pagination for React.","main":"dist/TableCustom.js","types":"index.d.ts","keywords":["custom-table","table-search","react-table","data-table","pagination","sorting","filtering","grid-view","react-component","advanced-search","dynamic-table","frontend","UI-component"],"scripts":{"build":"npx babel src --out-dir dist","postbuild":"cp src/TableCustom.css dist/TableCustom.css","prepare":"npm run build"},"author":{"name":"Rakesh Singh"},"license":"MIT","peerDependencies":{"bootstrap":"^5.3.3","react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"devDependencies":{"@babel/cli":"^7.25.9","@babel/core":"^7.26.0","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.25.9","jest":"^29.7.0","typescript":"^4.0.0"},"overrides":{"@remix-run/router":">=1.23.2"},"repository":{"type":"git","url":"git+https://github.com/noobster101-ui/custom-table-search.git"},"bugs":{"url":"https://github.com/noobster101-ui/custom-table-search/issues"},"dependencies":{"yalc":"^1.0.0-pre.53"},"gitHead":"2670870adbedb7e2d4fd4514a93aa85b57b5326a","_id":"custom-table-search@1.2.9","_nodeVersion":"18.19.1","_npmVersion":"9.2.0","dist":{"integrity":"sha512-ndvx1QNFXW+afdmhi3qzPruEr2gygSeU5ygALflW5P8xgLmYJ1h8eU8TGPSlhYWH/nQzXlyA9urUiFYEap/B6Q==","shasum":"9dd39172047b20017f0e915ca3ed8cabd826f895","tarball":"https://registry.npmjs.org/custom-table-search/-/custom-table-search-1.2.9.tgz","fileCount":5,"unpackedSize":67123,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDfzx0AtAhun2krmGhbeuI9bFR3dGusgJHX9ZjtqQzVqAIhAK6LTOai781T9a/w+G0TNx4qMG5mSb1SYWhaJkSA+EJ/"}]},"_npmUser":{"name":"rakeshsingh8484","email":"rakesh9370s@gmail.com"},"directories":{},"maintainers":[{"name":"rakeshsingh8484","email":"rakesh9370s@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/custom-table-search_1.2.9_1767933989996_0.6557156964641464"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-04T11:26:55.989Z","modified":"2026-01-09T04:46:30.382Z","1.0.0":"2024-11-04T11:26:56.239Z","1.0.1":"2024-11-04T12:14:49.978Z","1.0.2":"2024-11-05T04:52:50.293Z","1.0.3":"2024-11-05T05:41:41.883Z","1.0.4":"2024-11-05T05:43:52.809Z","1.0.5":"2024-11-05T09:19:48.753Z","1.0.6":"2024-11-05T09:20:12.652Z","1.0.7":"2024-11-05T15:42:22.259Z","1.0.8":"2024-11-05T15:53:21.804Z","1.0.9":"2024-11-06T10:48:40.180Z","1.1.0":"2024-11-06T12:46:40.124Z","1.1.1":"2024-11-07T14:17:03.985Z","1.1.2":"2024-11-07T14:56:18.932Z","2.0.0":"2024-11-07T15:14:44.170Z","1.1.3":"2024-11-07T15:17:00.671Z","1.1.4":"2024-11-08T06:30:20.387Z","1.1.5":"2024-11-28T11:47:06.361Z","1.1.6":"2024-12-06T10:41:20.285Z","1.1.7":"2024-12-06T11:07:36.199Z","1.1.8":"2024-12-06T11:09:51.695Z","1.1.9":"2024-12-06T11:10:45.659Z","1.2.0":"2024-12-17T10:56:59.716Z","1.2.1":"2024-12-17T10:58:20.768Z","1.2.2":"2024-12-17T11:03:05.453Z","1.2.3":"2024-12-17T12:22:34.997Z","1.2.4":"2025-06-06T12:38:29.403Z","1.2.5":"2025-06-19T13:34:15.877Z","1.2.6":"2025-06-20T13:20:29.471Z","1.2.7":"2025-06-23T09:08:04.251Z","1.2.8":"2025-06-23T10:27:36.316Z","1.2.9":"2026-01-09T04:46:30.148Z"},"bugs":{"url":"https://github.com/noobster101-ui/custom-table-search/issues"},"author":{"name":"Rakesh Singh"},"license":"MIT","homepage":"https://custom-table-sample.vercel.app/","keywords":["custom-table","table-search","react-table","data-table","pagination","sorting","filtering","grid-view","react-component","advanced-search","dynamic-table","frontend","UI-component"],"repository":{"type":"git","url":"git+https://github.com/noobster101-ui/custom-table-search.git"},"description":"A customizable, dynamic table component with advanced search, sorting, and pagination for React.","maintainers":[{"name":"rakeshsingh8484","email":"rakesh9370s@gmail.com"}],"readme":"## Custom Table Search\n\ncustom-table-search is a React component that provides a dynamic, customizable table with features like advanced search, sorting, pagination, and a grid view toggle. It’s ideal for applications needing flexible data exploration and presentation.\nFeatures\n\nCustomizable Columns: Define columns with options like labels, searchability, and sortability.\nAdvanced Search and Filtering: Apply multiple conditions with SQL-like connectors (AND, OR).\nSorting: Sort data by clicking column headers.\nPagination: Control page size and navigate through records.\nGrid and Table Views: Toggle between grid and table views for versatile data display.\n\n## Features\n\n- Customizable Columns: Define table columns with labels, sortability, and search options.\n- Use `customRenderer` to display custom content like buttons or styled text in specific columns.\n- Advanced Search and Filtering: Apply multiple conditions with SQL-like connectors (AND, OR) for complex queries.\n- Sorting: Sort data by clicking on column headers.\n- Pagination: Control page size and navigate through data records.\n- Grid and Table Views: Toggle between grid and table views.\n- Action Buttons: Add custom action buttons (e.g., Edit, Delete, View) in rows to perform specific actions.\n\n## Installation\n\n### To install custom-table-search, run the following command:\n\n npm install custom-table-search\n\n## Example 1: Static Data\n\n### This example uses local static data and showcases pagination, sorting, and action buttons.\n\n import React, { useState, useEffect } from \"react\";\n import TableCustom from \"custom-table-search\";\n import \"bootstrap/dist/css/bootstrap.min.css\";\n\n const sampleData = [\n { id: 1, name: \"John Doe\", email: \"john@example.com\", status: \"Active\" },\n { id: 2, name: \"Jane Smith\", email: \"jane@example.com\", status: \"Inactive\" },\n { id: 3, name: \"Alice Johnson\", email: \"alice@example.com\", status: \"Active\" },\n // Add more data as needed\n ];\n\n const StaticDataPage = () => {\n const [data, setData] = useState([]);\n const [currentPage, setCurrentPage] = useState(1);\n const [pageSize, setPageSize] = useState(5); // Define setPageSize here\n const [totalRecords, setTotalRecords] = useState(sampleData.length);\n const customEntriesOptions = [5, 10, 20, 50];\n const customDefaultPageSize = 10;\n\n const columns = [\n { key: \"id\", label: \"ID\", sortable: true },\n { key: \"name\", label: \"Name\", sortable: true, searchable: true },\n { key: \"email\", label: \"Email\", sortable: true, searchable: true },\n {\n key: \"status\",\n label: \"Status\",\n textAlign: \"center\",\n customRenderer: (row) => (\n \n {row.status}\n \n ),\n },\n {\n key: \"actions\",\n label: \"Actions\",\n textAlign: \"center\",\n customRenderer: (row) => (\n alert(`Action for ${row.name}`)}\n >\n Action\n \n ),\n },\n ];\n\n\n // Pagination function\n const fetchPage = (page, size) => {\n setCurrentPage(page);\n setPageSize(size);\n const startIdx = (page - 1) * size;\n setData(sampleData.slice(startIdx, startIdx + size));\n };\n\n useEffect(() => {\n fetchPage(currentPage, pageSize);\n }, [currentPage, pageSize]);\n\n return (\n
\n

Static Data Table

\n \n
\n );\n };\n\n export default StaticDataPage;\n\n## Example 2: API Data\n\n### This example uses local static data and showcases pagination, sorting, and action buttons.\n\n import React, { useRef, useState, useEffect } from \"react\";\n import TableCustom from \"custom-table-search\";\n\n import \"bootstrap/dist/css/bootstrap.min.css\";\n\n const sampleData = [\n { id: 1, name: \"John Doe\", email: \"john@example.com\", status: \"Active\" },\n { id: 2, name: \"Jane Smith\", email: \"jane@example.com\", status: \"Inactive\" },\n { id: 3, name: \"Alice Johnson\", email: \"alice@example.com\", status: \"Active\" },\n // Add more data as needed\n ];\n\n const ApiDataExample = () => {\n const tableRef = useRef();\n const [data, setData] = useState([]);\n const [currentPage, setCurrentPage] = useState(1);\n const [pageSize, setPageSize] = useState(12);\n const [totalRecords, setTotalRecords] = useState(sampleData.length);\n // const customEntriesOptions = [5, 10, 20, 50];\n // const customDefaultPageSize = 10;\n\n const columns = [\n { key: \"id\", label: \"ID\", sortable: true },\n { key: \"name\", label: \"Name\", sortable: true, searchable: true },\n { key: \"email\", label: \"Email\", sortable: true, searchable: true },\n { key: \"status\", label: \"Status\", sortable: true, searchable: true },\n ];\n\n // Function to fetch page data (simulating an API call)\n const fetchPage = async (page, size) => {\n setCurrentPage(page);\n setPageSize(size);\n const startIdx = (page - 1) * size;\n const pagedData = sampleData.slice(startIdx, startIdx + size); // Simulate API data slice\n setData(pagedData);\n setTotalRecords(sampleData.length); // Set the total record count based on data length\n };\n\n useEffect(() => {\n const criteria = tableRef.current?.getSearchCriteria?.();\n const sort = tableRef.current?.getSortConfig?.();\n fetchPage(currentPage, pageSize, criteria, sort);\n }, []);\n\n return (\n
\n

API Data Table

\n \n
\n );\n };\n\n export default ApiDataPage;\n\n### Example Explanation\n\n - StaticDataTable:\n - Uses a local array (sampleData) and paginates by slicing the array based on currentPage and pageSize.\n - Action buttons for each row to demonstrate how custom buttons work within the table.\n - ApiDataTable:\n - Fetches data from a mock API with pagination and page size passed as parameters.\n - Action buttons are also included here, demonstrating row-specific interactions with API-based data.\n\n## Props\n\n### Core Props\n\n| Prop | Type | Default | Description |\n| ------------------- | ---------- | --------- | -------------------------------------------------------------------------------------- |\n| `data` | `Array` | `[]` | Array of data objects for each row. |\n| `columns` | `Array` | `[]` | Column configuration with options like label, searchability, and sortability. |\n| `gridViewEnabled` | `Boolean` | `true` | Enables toggle between grid and table view. |\n| `entriesEnabled` | `Boolean` | `true` | Enables page size dropdown to control entries per page. |\n| `paginationEnabled` | `Boolean` | `true` | Enables pagination controls for navigating pages. |\n| `searchEnabled` | `Boolean` | `true` | Enables column-specific search functionality. |\n| `currentPage` | `Number` | `1` | Current page number for pagination. |\n| `setCurrentPage` | `Function` | Required | Function to update the current page. |\n| `fetchPage` | `Function` | Required | Function to fetch data for the specified page and size, taking search/sort parameters. |\n| `pageSize` | `Number` | `12` | Number of records per page. |\n| `setPageSize` | `Function` | Required | Function to set the number of records per page. |\n| `totalRecords` | `Number` | `0` | Total number of records for accurate pagination. |\n| `bgColor` | `String` | `#f8f9fa` | Background color for the table. |\n| `txtColor` | `String` | `#333333` | Text color for the table. |\n\n### Column Configuration\n\nEach column object in the columns array can have the following properties:\n\n| Column Property | Type | Default | Description |\n| --------------- | --------- | -------- | --------------------------------------------------------- |\n| `key` | `String` | Required | Unique identifier for the column. |\n| `label` | `String` | `\"\"` | Display name for the column header. |\n| `sortable` | `Boolean` | `false` | Allows sorting when `true`. |\n| `searchable` | `Boolean` | `false` | Enables search/filtering for this column. |\n| `textAlign` | `String` | `\"left\"` | Aligns text within the column (e.g., `\"center\"`). |\n| `type` | `String` | `\"text\"` | Input type for search fields (e.g., `\"text\"`, `\"email\"`). |\n\n## Object Creted on Search and Filter\n\n#### Example : For a search where the user is filtering by name and email columns with multiple conditions, the searchCriteria payload might look like this:\n\n [\n {\n \"column\": \"name\",\n \"conditions\": [\n {\n \"value\": \"John Doe\",\n \"operator\": \"LIKE\",\n \"localConnector\": \"OR\"\n },\n {\n \"value\": \"Alice Johnson\",\n \"operator\": \"LIKE\"\n }\n ],\n \"columnConnector\": \"AND\"\n },\n {\n \"column\": \"email\",\n \"conditions\": [\n {\n \"value\": \"john@example.com\",\n \"operator\": \"LIKE\",\n \"localConnector\": \"OR\"\n },\n {\n \"value\": \"alice@example.com\",\n \"operator\": \"LIKE\"\n }\n ],\n \"columnConnector\": null\n }\n ]\n\nThis object can be included in the body of an API request for server-side filtering. The API can interpret this payload to construct a query like:\n\n WHERE (name LIKE 'John Doe' OR name LIKE 'Alice Johnson')\n AND (email LIKE 'john@example.com' OR email LIKE 'alice@example.com')\n\n## Parsing searchCriteria in Your Backend\n\nOn the server side, you’ll need to parse searchCriteria to generate a SQL or database query. For example:\n\n-Loop through each column in the searchCriteria.\n-Apply each condition in the column, using localConnector to connect multiple conditions within a column.\n-Combine columns using columnConnector to achieve the full logical structure.\n\nExample (in pseudo-code):\n\n // Example pseudo-code for building a query string from searchCriteria\n let query = \"SELECT * FROM table WHERE \";\n searchCriteria.forEach((columnObj, colIndex) => {\n const columnQuery = columnObj.conditions.map((cond, condIndex) => {\n return `${columnObj.column} ${cond.operator} '${cond.value}'` +\n (cond.localConnector ? ` ${cond.localConnector} ` : \"\");\n }).join(\"\");\n\n query += columnQuery + (columnObj.columnConnector ? ` ${columnObj.columnConnector} ` : \"\");\n });\n\n#### Tips for Using the searchCriteria Object\n\n- SQL Injection Safety: If using SQL, ensure values are sanitized or parameterized to avoid SQL injection risks.\n- Flexible Conditions: With operator, localConnector, and columnConnector, you can build highly customizable queries, ideal for advanced filtering.\n- Testing: Test searchCriteria generation and API handling with various combinations to ensure robust handling of complex queries.\n\nThis searchCriteria object structure enables powerful and flexible search capabilities for your data, allowing precise filtering directly from the frontend component.\n\n#### Example : Fetching data Search Inputs\n\n {\n \"page\": 1,\n \"size\": 10,\n \"searchCriteria\": [\n {\n \"column\": \"name\",\n \"conditions\": [\n {\n \"value\": \"John Doe\",\n \"operator\": \"LIKE\",\n \"localConnector\": \"OR\"\n },\n {\n \"value\": \"Alice Johnson\",\n \"operator\": \"LIKE\"\n }\n ],\n \"columnConnector\": \"AND\"\n },\n {\n \"column\": \"email\",\n \"conditions\": [\n {\n \"value\": \"john@example.com\",\n \"operator\": \"LIKE\",\n \"localConnector\": \"OR\"\n },\n {\n \"value\": \"alice@example.com\",\n \"operator\": \"LIKE\"\n }\n ],\n \"columnConnector\": null\n }\n ],\n \"sortConfig\": []\n }\n\n## Example Usage in API Calls\n\nHere’s how you might use the searchCriteria object as a payload for an API call to retrieve filtered data.\n\n const fetchData = async (page, size, searchCriteria, sortConfig) => {\n try {\n const response = await fetch('/api/your-endpoint', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n page,\n size,\n searchCriteria,\n sortConfig\n })\n });\n const result = await response.json();\n // Handle the data from the response, e.g., update state\n setData(result.data);\n setTotalRecords(result.totalRecords);\n } catch (error) {\n console.error(\"Error fetching data:\", error);\n }\n };\n\n## Action Buttons\n\nAction buttons (Edit, Delete, View) are added to each row by configuring the data prop with custom actions. Each button is attached to a function to handle its respective action:\n\n const dataWithActions = data.map((row) => ({\n ...row,\n actions: (\n
\n \n \n \n
\n ),\n }));\n\nThese buttons perform specific functions when clicked, allowing the user to interact with each row in the table. Customize the icons and actions as needed.## Advanced Usage\n\n### Search Conditions and SQL-like Filters\n\n- Multiple Conditions per Column: Apply multiple conditions per column (e.g., LIKE, EQUAL, CONTAINS).\n- Logical Operators: Use AND or OR to connect conditions for complex queries.\n\n## Custom Actions\n\nAdd action buttons (e.g., Edit, Delete) by including an actions key in your data. Customize these buttons to handle events such as editing, deleting, or viewing details of a row.\n\n## Styling\n\nThe component uses standard Bootstrap styles. To customize further, apply your own CSS or Bootstrap overrides.\nTroubleshooting\n\nDependency Conflicts: Ensure you have compatible versions of react, react-dom, and react-bootstrap.\nStyling Issues: Ensure Bootstrap is included in your project or adjust styles as needed.\nPagination Limits: Ensure totalRecords accurately reflects the number of entries for pagination to work correctly.\n\n## Troubleshooting\n\n- Dependency Conflicts: Ensure you have compatible versions of react, react-dom, and react-bootstrap.\n- Styling Issues: Ensure Bootstrap is included in your project or adjust styles as needed.\n- Pagination Limits: Ensure totalRecords accurately reflects the number of entries for pagination to work correctly.\n\n## Contributing\n\nFeel free to submit issues or pull requests for bug fixes or enhancements. Contributions are welcome!\n\n### License\n\nThis project is licensed under the MIT License.\n","readmeFilename":"README.md"}