{"id":13401919,"url":"https://github.com/jlord/sheetsee-tables","last_synced_at":"2025-11-05T00:02:29.168Z","repository":{"id":11298287,"uuid":"13712693","full_name":"jlord/sheetsee-tables","owner":"jlord","description":"Module for creating tables with sheetsee.js","archived":false,"fork":false,"pushed_at":"2024-02-24T20:10:57.000Z","size":47,"stargazers_count":21,"open_issues_count":9,"forks_count":15,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-08-09T23:48:54.720Z","etag":null,"topics":["hello","hi","javascript","sheetsee"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/jlord.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":"2013-10-20T02:57:16.000Z","updated_at":"2023-03-01T13:07:58.000Z","dependencies_parsed_at":"2024-10-26T05:34:35.293Z","dependency_job_id":null,"html_url":"https://github.com/jlord/sheetsee-tables","commit_stats":{"total_commits":79,"total_committers":3,"mean_commits":"26.333333333333332","dds":0.3417721518987342,"last_synced_commit":"237915e7aceddeb711e5c0da568dfb82115d1bd0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jlord/sheetsee-tables","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlord%2Fsheetsee-tables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlord%2Fsheetsee-tables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlord%2Fsheetsee-tables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlord%2Fsheetsee-tables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jlord","download_url":"https://codeload.github.com/jlord/sheetsee-tables/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlord%2Fsheetsee-tables/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261119601,"owners_count":23112209,"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":["hello","hi","javascript","sheetsee"],"created_at":"2024-07-30T19:01:09.194Z","updated_at":"2025-11-05T00:02:29.117Z","avatar_url":"https://github.com/jlord.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","modules for working with excel/google spreadsheets:"],"sub_categories":[],"readme":"[![Standard - JavaScript Style Guide](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)\n\n# sheetsee-tables\n\nSheetsee,js uses this module to make tables. With this module you can create tables with your spreadsheet data that are sortable, searchable and paginate-able.\n\nYou'll need a placeholder `\u003cdiv\u003e` in your html, a `\u003cscript\u003e` with a [Mustache.js](https://mustache.github.io) template and a `\u003cscript\u003e` that tells Sheetsee to build the table.\n\n## Your HTML Placeholder\n\nThis is as simple as an empty `\u003cdiv\u003e` with an `id`.\n\n## Your Template\n\nYour template is the mockup of what you'd like your table to look like and what content it should show. The style is up to you! It is a [mustache](https://mustache.github.io) template inside of `\u003cscript\u003e` tags.\n\n**The `id` of the template should be the same as the HTML placeholder it corresponds to but with \"_template\" on the end.**\n\n### Sorting\n\nIf you want users to be able to click on headers and sort that column, your template must include table headers with the class `tHeader`.\n\nYou can then style `.tHeader` in your CSS to make them look how you want.\n\n**You must also make the inner text of your table headers have the same capitalization as in your spreadsheet. It's ok to have spaces in your table header but don't use spaces in your spreadsheet headers.**\n\n- Spreadsheet column name: 'PlaceName'\n  - OK table header: 'Place Name'\n  - Not OK table header:  'PLACENAME', 'placename'\n\n## Your Script\n\nYou'll want to set your table options and pass them into `Sheetsee.makeTable()`. If you want to add a search/filter, pass your options into `Sheetsee.initiateTableFilter()`.\n\n## Methods\n\nFunctions for you to use! There are just two, woo!\n\n### `Sheetsee.makeTable(tableOptions)`\n\nYou pass in an object containing:\n\n- `data` _array_ your data from Tabletop.js **required**\n- `pagination` _number_ how many rows displayed at one time, defaults to all\n- `tableDiv` _string_ the `\u003cdiv\u003e` `id` placeholder in your HTML, includes the hash `#` **required**\n- `filterDiv` _string_ the `\u003cdiv\u003e` `id` containing your `\u003cinput\u003e` filter if using search, includes the hash `#` **required if using filter**\n- `templateID` _string_ the `id` of your `\u003cscript\u003e` tag with the template, defaults to assume it's the same as `tableDiv` + `_template`.\n\n```javascript\nvar tableOptions = {\n  \"data\": data,\n  \"pagination\": 10,\n  \"tableDiv\": \"#fullTable\",\n  \"filterDiv\": \"#fullTableFilter\",\n  \"templateID\": \"fullTable_template\"\n}\nSheetsee.makeTable(tableOptions)\n```\n\n#### Pagination\n\nIf you do not put in a number for pagination, by default it will show all of the data at once. With pagination, HTML will be added at the bottom of your table for navigation, which you can style in your CSS:\n\n_HTML_\n\n```HTML\n\u003cdiv id='Pagination' currentPage class='table-pagination'\u003e\n  Showing page {{currentPage}} of {{totalPages}}\n  \u003ca class='pagination-pre'\u003ePrevious\u003c/a\u003e\u003ca class='pagination-next'\u003eNext\u003c/a\u003e\n\u003c/div\u003e\n```\n\n_CSS_\n\n```CSS\n#Pagination {}\n.pagination-next {}\n.pagination-pre {}\n.no-pag {}\n```\n\n### `Sheetsee.initiateTableFilter(tableOptions)`\n\nIf you want to have an input to allow users to search/filter the data in the table, you'll add an input to your HTML. Give it an id and if you want add placeholder text. You'll also need to add a 'clear' button using the `.clear` CSS class.\n\n```javascript\n\u003cinput id=\"tableFilter\" type=\"text\" placeholder=\"filter by..\"\u003e\u003c/input\u003e\n\u003ca href=\"#\" class=\".clear\"\u003eClear\u003c/a\u003e\n```\n\nThen you'll pass your `tableOptions` object into this method:\n\n```javascript\nSheetsee.initiateTableFilter(tableOptions)\n```\n\n## Example\n\n_HTML_\n\n```HTML\n\u003cinput id=\"siteTableFilter\" type=\"text\"\u003e\u003c/input\u003e\u003ca href=\"#\" class=\".clear\"\u003eClear\u003c/a\u003e\n\u003cdiv id=\"siteTable\"\u003e\u003c/div\u003e\n```\n\n_Template_\n\n```JavaScript\n\u003cscript id=\"tableTemplate\" type=\"text/html\"\u003e\n    \u003ctable\u003e\n    \u003ctr\u003e\u003cth class=\"tHeader\"\u003eCity\u003c/th\u003e\u003cth class=\"tHeader\"\u003ePlace Name\u003c/th\u003e\u003cth class=\"tHeader\"\u003eYear\u003c/th\u003e\u003cth class=\"tHeader\"\u003eImage\u003c/th\u003e\u003c/tr\u003e\n      {{#rows}}\n        \u003ctr\u003e\u003ctd\u003e{{city}}\u003c/td\u003e\u003ctd\u003e{{placename}}\u003c/td\u003e\u003ctd\u003e{{year}}\u003c/td\u003e\u003ctd\u003e{{image}}\u003c/td\u003e\u003c/tr\u003e\n      {{/rows}}\n  \u003c/table\u003e\n\u003c/script\u003e\n```\n\n_JavaScript_\n\n```javascript\n\u003cscript type=\"text/javascript\"\u003e\n  document.addEventListener('DOMContentLoaded', function() {\n    var tableOptions = {\n      \"data\": data,\n      \"pagination\": 10,\n      \"tableDiv\": \"#siteTable\",\n      \"filterDiv\": \"#siteTableFilter\",\n      \"templateID\": \"siteTable_template\"\n    }\n    Sheetsee.makeTable(tableOptions)\n    Sheetsee.initiateTableFilter(tableOptions)\n  })\n\u003c/script\u003e\n```\n\n_[View Demo](http://jlord.us/sheetsee.js/demos/demo-table.html)_\n_[Visit Site](http://jlord.us/sheetsee.js)_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjlord%2Fsheetsee-tables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjlord%2Fsheetsee-tables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjlord%2Fsheetsee-tables/lists"}