{"id":17756939,"url":"https://github.com/graphieros/wc-smart-table","last_synced_at":"2026-01-08T08:38:58.659Z","repository":{"id":181576899,"uuid":"666938770","full_name":"graphieros/wc-smart-table","owner":"graphieros","description":null,"archived":false,"fork":false,"pushed_at":"2023-07-17T05:37:12.000Z","size":38,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-28T07:45:02.607Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/graphieros.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-16T05:09:45.000Z","updated_at":"2023-07-16T05:09:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"6c14fae4-19aa-41bc-b0dc-4d0dd42f4784","html_url":"https://github.com/graphieros/wc-smart-table","commit_stats":null,"previous_names":["graphieros/wc-smart-table"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fwc-smart-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fwc-smart-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fwc-smart-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fwc-smart-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graphieros","download_url":"https://codeload.github.com/graphieros/wc-smart-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246635950,"owners_count":20809329,"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":[],"created_at":"2024-10-26T16:10:46.219Z","updated_at":"2026-01-08T08:38:58.615Z","avatar_url":"https://github.com/graphieros.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wc-smart-table\n\nAre your dashboards so good that users still ask to export to Excel ?\n\nwc-smart-table is a web component that displays large datasets in a flexible table that offers readymade calculations and filtering options, avoiding the user to export the table to make their own averages or sums.\n\nwc-smart-table also provides a quick way to make a bar, line or donut chart on selected portions of the data.\n\nOf course, users can still also export to Excel as wc-smart-table provides this utility too ;)\n\n## setup\n\nInclude wc-smart-table.js in the head of your html:\n\n```\n\u003chtml\u003e\n\n\u003chead\u003e\n\n\u003cscript defer src=\"wc-smart-table.js\" type=\"module\"\u003e\u003c/script\u003e\n\n\u003c/head\u003e\n\n\u003c/html\u003e\n\n```\n\nOr: npm i wc-smart-table, and import it the usual way in your app\n\n## props\n\n### header\nThis prop configures the columns of your table and what they can perform.\nProvide a JSON format of an array of objects, as many as there are columns in your table.\nHere is the datastructure:\n\n```\n\"[\n    {\n        \"name\" : \"my column name\", (mandatory)\n        \"type\" : \"text\", // \"text\" | \"date\" | \"numeric\" (mandatory)\n        \"average\" : false, (optional, defaults to false. Use true if type is numeric to display the average on the table head)\n        \"decimals\" : undefined, (optional, defaults to undefined, provide a number for numeric columns to display decimals)\n        \"sum\": false, (optional, defaults to false. Use true if type is numeric to display the sum on the table head)\n        \"isSort\": false, (optional, defaults to false. Use true to show a sort button. Works for all column types)\n        \"isSearch\": false, (optional, defaults to false. Use true to show a search input. Use it for columns of type 'text')\n        \"isMultiselect\": false, (optional, defaults to false. Use true to show a dropdown menu to filter a column by category)\n        \"isPercentage\": false, (optional, defaults to false. Use true to display percentage values. Will convert 0.01 to 1%. If used, will require an empty slot in the td array provided in the table body)\n        \"percentageTo\": undefined, (optional, defaults to undefined. Use the name of another numeric column to base the calculation of percentages on its sum)\n        \"prefix\": \"\", (optional, defaults to empty string. If provided, adds a prefix to all values of the column)\n        \"suffix\": \"\", (optional, defaults to empty string. If provided, adds a suffix to all values of the column)\n        \"rangeFilter\": false (optional, defaults to false. Use true to show number inputs to filter values in a range)\n    }\n]\"\n\n```\n\n### body\nThis prop will feed the table with data.\nProvide a JSON format of an array of objects.\nEvery td attribute must contain an array in the same order as your header.\nHere is the datastructure, for a table with 2 columns, one \"text\" and one \"numeric\"\n\n```\n\"[\n    {\n        td: [\n            \"sales\",\n            100\n        ]\n    },\n    {\n        td: [\n            \"promotions\",\n            35\n        ]\n    },\n    {\n        td: [\n            \"promotions\",\n            42\n        ]\n    },\n    {\n        td: [\n            \"sales\",\n            120\n        ]\n    },\n]\"\n```\n\nNow let's say you want to provide a third column, with percentages based on the second column.\nSetup your header for the third column with \"isPercentage\": true, and \"percentageTo\": \"spend\" (example name for your second column)\nSince percentages will be calculated by wc-smart-table, you must provide an empty string inside your dataset:\n\n```\n\n\"[\n    {\n        td: [\n            \"sales\",\n            100,\n            \"\" // provide an empty string\n        ]\n    },\n    {\n        td: [\n            \"promotions\",\n            35,\n            \"\"\n        ]\n    },\n    {\n        td: [\n            \"promotions\",\n            42,\n            \"\"\n        ]\n    },\n    {\n        td: [\n            \"sales\",\n            120,\n            \"\"\n        ]\n    },\n]\"\n```\n\n\n### translations\nThis prop lets you adapt translations for labels used on wc-smart-table.\nHere are the default labels, you can override by passing your own JSON configuration:\n\n```\n\n\"{\n    \"average\": \"Average\",\n    \"by\": \"by\",\n    \"chooseCategoryColumn\": \"Choose category column\",\n    \"exportAllButton\": \"XLSX all\",\n    \"exportAllLabel\": \"Export all rows of your current filtered dataset\",\n    \"exportPageButton\": \"XLSX page\",\n    \"exportPageLabel\": \"Export rows of the current page\",\n    \"from\": \"Du\",\n    \"inputPlaceholder\": \"Search...\",\n    \"makeDonut\": \"Generate\",\n    \"nb\": \"Nb\",\n    \"page\": \"Page\",\n    \"paginatorLabel\": \"Rows per page\",\n    \"sizeWarning\": \"Displaying too many rows at a time can lead to slower performance\",\n    \"sum\": \"Somme\",\n    \"to\": \"Au\",\n    \"total\": 'Total',\n    \"totalRows\": \"Total rows\"\n}\"\n```\n\n### Other optional props\n- max-height: string, (defaults to \"500px\". You can use any css height, like \"calc(100vh - 200px)\" for example)\n\n- font-family: \"inherit\", (defaults to \"inherit\")\n\n- rows-per-page: 25, (defaults to 25. Over 200 can slightly affect performance)\n\n- use-chart: string, (defaults to \"true\". Use false if for some reason you don't want to use charts)\n\n- locale: string, (defaults to \"fr-fr\", used for date formatting)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Fwc-smart-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraphieros%2Fwc-smart-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Fwc-smart-table/lists"}