{"id":18224906,"url":"https://github.com/pandatecham/web-lib-panda-table","last_synced_at":"2025-04-10T18:44:43.185Z","repository":{"id":164109817,"uuid":"639545642","full_name":"PandaTechAM/web-lib-panda-table","owner":"PandaTechAM","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-09T12:48:57.000Z","size":1081,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T13:24:26.046Z","etag":null,"topics":["filter","library","npm","pandtech","table"],"latest_commit_sha":null,"homepage":"https://pandatecham.github.io/table-package/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PandaTechAM.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-11T17:19:17.000Z","updated_at":"2025-04-09T12:48:13.000Z","dependencies_parsed_at":"2023-10-11T16:27:36.987Z","dependency_job_id":"84dd44f9-cefe-47b2-bc03-c21ee0e1461c","html_url":"https://github.com/PandaTechAM/web-lib-panda-table","commit_stats":{"total_commits":155,"total_committers":3,"mean_commits":"51.666666666666664","dds":0.05161290322580647,"last_synced_commit":"f9c8e8b9755526bbbbd35025dd93e082d8c8d922"},"previous_names":["PandaTechAM/web-lib-panda-table","pandatecham/table-package"],"tags_count":130,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PandaTechAM%2Fweb-lib-panda-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PandaTechAM%2Fweb-lib-panda-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PandaTechAM%2Fweb-lib-panda-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PandaTechAM%2Fweb-lib-panda-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PandaTechAM","download_url":"https://codeload.github.com/PandaTechAM/web-lib-panda-table/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248271923,"owners_count":21075800,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["filter","library","npm","pandtech","table"],"created_at":"2024-11-04T02:05:08.905Z","updated_at":"2025-04-10T18:44:43.167Z","avatar_url":"https://github.com/PandaTechAM.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React App Table\n\nbeautiful-react-table is a customizable table component for React applications. It provides a flexible and feature-rich table implementation with various configuration options.\n\n# Installation\n\nTo install beautiful-react-table, use the following command:\n\nnpm install beautiful-react-table\nnpm install react-beautiful-dnd\nnpm install @mui/material\n\n# Usage\n\nImport the necessary components and interfaces from the \"beautiful-react-table\" package:\n\n```JSX\n\nimport { useState } from \"react\";\nimport {\n  IColumnConfig,\n  IColumnHeader,\n  IColumnConfigStructure,\n  IColumnHeaderStructure,\n  // ... other imports ...\n} from \"beautiful-react-table\";\n\nfunction App() {\n\n  const [data, setData] = useState\u003cany[]\u003e([\n    {\n      id: 1,\n      agentId: 1,\n      agentCreationDate: \"2023-03-22T00:00:00\",\n      agentName:\"Markos\",\n    },\n    {\n      id: 2,\n      agentId: 2,\n      agentCreationDate: \"2023-03-22T00:00:00\",\n      agentName: \"Daniel\",\n    },\n    {\n      id: 3,\n      agentId: 3,\n      agentCreationDate: \"2023-03-22T00:00:00\",\n      agentName: \"Mary\",\n    },\n  ]);\n\n  const [columnHeader] = useState\u003cIColumnHeader[]\u003e([\n    {\n      id: 1,\n      order: 1,\n      title: \"Id\",\n    },\n    {\n      id: 2,\n      order: 2,\n      title: \"Name\",\n    },\n    {\n      id: 3,\n      order: 3,\n      title: \"Creation Date\",\n    },\n  ]);\n\n  const [columnConfig] = useState\u003cIColumnConfig\u003cany\u003e[]\u003e([\n    {\n      id: 1,\n      title: (row: any, name: string) =\u003e (\n        \u003cdiv\u003e\n          \u003cp\u003e{row.title}\u003c/p\u003e\n        \u003c/div\u003e\n      ),\n      setRow: (row: any) =\u003e (\n        \u003cdiv\u003e\n          \u003cdiv\u003e{row.id}\u003c/div\u003e\n        \u003c/div\u003e\n      ),\n      isVisible: true,\n    },\n    {\n      id: 2,\n      title: (row: IColumnHeader, name: string) =\u003e (\n        \u003cdiv\u003e\n          \u003cp\u003e{row.title}\u003c/p\u003e\n        \u003c/div\u003e\n      ),\n      setRow: (row: any) =\u003e (\n        \u003cdiv\u003e\n          \u003cdiv\u003e{row.agentName}\u003c/div\u003e\n        \u003c/div\u003e\n      ),\n      isVisible: true,\n    },\n    {\n      id: 3,\n      title: (row: IColumnHeader, name: string) =\u003e (\n        \u003cdiv\u003e\n          \u003cp \u003e{row.title}\u003c/p\u003e\n        \u003c/div\u003e\n      ),\n      setRow: (row: any) =\u003e (\n        \u003cdiv\u003e\n          \u003cdiv\u003e{row.agentCreationDate}\u003c/div\u003e\n        \u003c/div\u003e\n      ),\n      isVisible: true,\n    },\n  ]);\n\n const [columnsConfigStructure, setColumnsConfigStructures] = useState\u003c\n    IColumnConfigStructure\u003cany\u003e\n  \u003e({\n    [StructureConfig.Main]: {\n      name: \"Columns\",\n      items: columnConfig,\n    },\n    [StructureConfig.Freezed]: {\n      name: \"Freezed\",\n      items: [],\n    },\n  });\n\n  const [columnsHeaderStructure, setColumnHeaderStructures] =\n    useState\u003cIColumnHeaderStructure\u003e({\n      [StructureConfig.Main]: {\n        name: \"Columns\",\n        items: columnHeader,\n      },\n      [StructureConfig.Freezed]: {\n        name: \"Freezed\",\n        items: [],\n      },\n    });\n\n  return (\n    \u003cdiv style={{ width: \"80%\", margin: \"0 auto\" }}\u003e\n      \u003cTable\n        data={data} // TableData\n        columnsConfigStructure={columnsConfigStructure} // Structure to store in the database - pin/hide/drag-drop\n        columnsHeaderStructure={columnsHeaderStructure} // headerStructure will automatically work with configStructure\n        // ... other props ...\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n# Table Structure\n\nWe can drag, hide and dock columns vertically and horizontally.\nAdd the \"draggableColumns\" details, then create the \"setColumnsConfigStructure\" and \"setColumnHeaderStructure\" functions.\n\n```JSX\n  const setColumnsConfigStructure = (option: IColumnConfigStructure\u003cany\u003e) =\u003e {\n    setColumnsConfigStructures(option);\n  };\n\n  const setColumnHeaderStructure = (option: IColumnHeaderStructure) =\u003e {\n    setColumnHeaderStructures(option);\n  };\n```\n\n![customizing](https://github.com/PandaTechAM/web-lib-panda-table/assets/69170986/723a5a7d-e2cc-40a6-9930-1e62630f6ae8)\n\nAnd if we want to add some functionality to the save button, we need to use the \"storeStructure\" function.\n\n```JSX\nconst storeStructure = () =\u003e {};\n```\n\nLet's add width to the column\n\n```JSX\ncolumnMinWidth={120}\n```\n\n![freezed_column](https://github.com/PandaTechAM/web-lib-panda-table/assets/69170986/970cd1bc-d752-461c-9147-46a155ce337b)\n\n# Hovered Row Actions\n\nWhen we use isHoveredRow props, we need to make actions.\nWe have default icons, but we can make custom.\n\n```JSX\nconst [rowActions] = useState\u003cIrowActions[]\u003e([\n    {\n      action: (e, item, index) =\u003e {\n        e.stopPropagation();\n      },\n    },\n    {\n      action: (e, item, index) =\u003e {\n        e.stopPropagation();\n      },\n    },\n  ]);\n```\n\n# Page Size Config\n\n```JSX\nconst [pageSize] = useState\u003cIPageSizes[]\u003e([\n    { id: 1, count: 10 },\n    { id: 2, count: 25 },\n    { id: 3, count: 50 },\n    { id: 4, count: 100 },\n  ]);\n```\n\n# Dropdown Menu Config\n\nWhen we use\n\n```JSX\nfreezedRightSide={\"dropdown\"}\n```\n\n, we have to make config for list.\n\n```JSX\nconst [links] = useState\u003cILinksList[]\u003e([\n    {\n      id: 1,\n      name: \"Overpayments\",\n      action: (option: any) =\u003e {},\n    },\n    {\n      id: 2,\n      name: \"Estate Owners\",\n      action: (option: any) =\u003e {},\n    },\n  ]);\n```\n\n# Right Freezed Column Config\n\nWe can create costume freezed columns in right side.\n\n```JSX\nconst [rightFreezeConfig] = useState\u003cIColumnConfig\u003cany\u003e[]\u003e([\n    {\n      id: 1,\n      title: (row: IColumnHeader, name: string) =\u003e (\n        \u003cdiv\u003e\n          \u003cp\u003e{row.title}\u003c/p\u003e\n        \u003c/div\u003e\n      ),\n      setRow: () =\u003e (\n        \u003cdiv\u003e\n          \u003cp\u003eView Details\u003c/p\u003e\n        \u003c/div\u003e\n      ),\n      isVisible: true,\n    },\n    {\n      id: 2,\n      title: (row: IColumnHeader, name: string) =\u003e (\n        \u003cdiv\u003e\n          \u003cp\u003e{row.title}\u003c/p\u003e\n        \u003c/div\u003e\n      ),\n      setRow: () =\u003e (\n        \u003cdiv\u003e\n          \u003cp\u003eView Details\u003c/p\u003e\n        \u003c/div\u003e\n      ),\n      isVisible: true,\n    },\n  ]);\n```\n\n# Aggregates\n\nList for filtering aggregates\nWorks with PandaTech.IEnumerableFilters nuget\n\n```JSX\nconst [listForDropdown] = useState\u003cITotalList[]\u003e([\n    {\n      id: 1,\n      title: \"AVG\",\n    },\n    {\n      id: 2,\n      title: \"MIN\",\n    },\n    {\n      id: 3,\n      title: \"MAX\",\n    },\n    {\n      id: 4,\n      title: \"SUM\",\n    },\n  ]);\n```\n\n# Filters\n\nFilters works with PandaTech.IEnumerableFilters nuget\n\n```JSX\n  const [selectedColumnName, setSelectedColumnName] = useState\u003cstring\u003e(\"\");\n  const [pagePerFilterField, setPagePerFilterField] = useState\u003cnumber\u003e(1);\n  const [perColumnTotalCount, setPerColumnTotalCount] = useState\u003cnumber\u003e(0);\n  const [filterDataForRequest, setFilterDataForRequest] = useState\u003cItemFields[]\u003e([]);\n  const [totalPagesCount, setTotalPagesCount] = useState\u003cnumber\u003e(0);\n  const [isLoadingFilters, setIsLoading] = useState\u003cboolean\u003e(false);\n  const [perColumnListForFilters, setPerColumnListForFilters] = useState\u003cstring[]\u003e();\n```\n\n# Functions\n\n```JSX\nconst setColumnsConfigStructure = (option: IColumnConfigStructure\u003cany\u003e) =\u003e {\n    setColumnsConfigStructures(option);\n  };\n  const setColumnHeaderStructure = (option: IColumnHeaderStructure) =\u003e {\n    setColumnHeaderStructures(option);\n  };\n  const handleEdit = (option: any) =\u003e {};\n  const handleDelete = (option: any[] | string) =\u003e {};\n  const RightSideSelfAction = (option: number | string) =\u003e {};\n  const storeStructure = () =\u003e {};\n  const getRow = (row: any) =\u003e {};\n  const getPageRowsCountAndCurrentPage = (pageNumber: number, rowsCount: IPageSizes) =\u003e {};\n  const handleChangePagePerFilterField = () =\u003e {};\n  const getFilteredDataForTable = (option?: ItemFields[]) =\u003e {};\n  const getDownloadType = (option: string, checkedRows: any[] | string) =\u003e {};\n  const customHeaderAction = (option: any[] | string) =\u003e ReactNode;\n```\n\n# Props\n\nThe \"Table\" component accepts the following props:\n\n```TS\ndata (required): An array of objects representing the table data.\ncolumnsConfigStructure (required): An object representing the column configuration structure.\ncolumnsHeaderStructure (required): An object representing the column header structure.\nallDataFromDb (optional): An array of objects representing the complete data set from the database.\ncolumnsTotalStructure (optional): An object representing the column total structure.\npageSize (optional): An array of page sizes for pagination.\nlinks (optional): An array of link items for navigation.\nlistForDropdown (optional): An array for choosing footer items type.\nrowActions (optional): An array of row actions for each table row.\nselectedPage (optional): An object representing the currently selected page.\ncurrentPage (optional): The current page number.\ntotalCount (optional): The total number of items in the table.\nmultipleCheck (optional): Boolean flag to enable multiple row selection.\nisStickyFirstColumn (optional): Boolean flag to enable sticking the first column.\nisHoveredRow (optional): Boolean flag to enable highlighting the hovered row.\ndraggableColumns (optional): Boolean flag to enable column reordering.\nfreezedRightSideVisible (optional): is dropdown.\nFreezeIcon (optional): The icon to display for freezing columns.\nheaderColor (optional): The color of the table header.\nfooterColor (optional): The color of the table footer.\nfreezedLeftSideColor (optional): The color of the left side of the table when frozen.\nfreezedRightSideColor (optional): The color of the right side of the table when frozen.\nfreezedRightSide (optional): The right side content of the frozen table.\ncolumnMinWidth (optional): The minimum width of each column.\nheaderHeight (optional): The height of the table header.\nfooterHeight (optional): The height of the table footer.\nleftFreezedColumnWidth (optional): The width of the left side column when frozen.\nrightFreezedColumnWidth (optional): The width of the right side column when frozen.\nleftSideIcon (optional): The icon to display for the left side of the table.\nRightSideSelfAction (optional): A function to handle the self-action on the right side of the table.\nsetColumnTotalStructures (optional): A function to set the column total structures.\nhandleEdit (optional): A function to handle the edit action for a table row.\nhandleDelete (optional): A function to handle the delete action for multiple table rows.\nsetColumnsConfigStructure (optional): A function to set the column configuration structure.\nsetColumnHeaderStructure (optional): A function to set the column header structure.\nhandleSelectDataSize (optional): A function to handle the selection of data size for pagination.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpandatecham%2Fweb-lib-panda-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpandatecham%2Fweb-lib-panda-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpandatecham%2Fweb-lib-panda-table/lists"}