{"id":21428291,"url":"https://github.com/mlverse/pagedtablejs","last_synced_at":"2026-03-08T17:32:46.296Z","repository":{"id":55600781,"uuid":"265341661","full_name":"mlverse/pagedtablejs","owner":"mlverse","description":"JavaScript data table for Data Science","archived":false,"fork":false,"pushed_at":"2020-12-18T22:59:41.000Z","size":601,"stargazers_count":2,"open_issues_count":4,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-24T04:41:21.444Z","etag":null,"topics":["data-science","data-table","data-visualization"],"latest_commit_sha":null,"homepage":"https://mlverse.github.io/pagedtablejs/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mlverse.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}},"created_at":"2020-05-19T19:16:58.000Z","updated_at":"2020-12-12T01:47:12.000Z","dependencies_parsed_at":"2022-08-15T04:10:10.654Z","dependency_job_id":null,"html_url":"https://github.com/mlverse/pagedtablejs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mlverse/pagedtablejs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlverse%2Fpagedtablejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlverse%2Fpagedtablejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlverse%2Fpagedtablejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlverse%2Fpagedtablejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mlverse","download_url":"https://codeload.github.com/mlverse/pagedtablejs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlverse%2Fpagedtablejs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265280697,"owners_count":23739853,"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":["data-science","data-table","data-visualization"],"created_at":"2024-11-22T22:12:29.125Z","updated_at":"2026-03-08T17:32:46.265Z","avatar_url":"https://github.com/mlverse.png","language":"JavaScript","readme":"# Getting Started\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/pagedtablejs\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/pagedtablejs.svg\" alt=\"downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/pagedtablejs\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/pagedtablejs.svg\" alt=\"version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/pagedtablejs\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/pagedtablejs.svg\" alt=\"license\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nTo use `pagedtable.js` include its source:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"js/pagedtable.js\"\u003e\u003c/script\u003e\n```\n\nOr install from NPM:\n\n```bash\nnpm install pagedtablejs\n```\n\nYou can then easily create a table with the JSON from a URL:\n\n```html\n\u003cdiv data-pagedtable data-pagedtable-source=\"https://mlverse.github.io/pagedtablejs/data/iris.json\"\u003e\u003c/div\u003e\n```\n```html\n/*display*/\n\u003cdiv data-pagedtable\u003e\n  \u003cscript data-pagedtable-source type=\"application/json\"\u003e[{\"Sepal.Length\":5.1,\"Sepal.Width\":3.5,\"Petal.Length\":1.4,\"Petal.Width\":0.2,\"Species\":\"setosa\"},{\"Sepal.Length\":4.9,\"Sepal.Width\":3,\"Petal.Length\":1.4,\"Petal.Width\":0.2,\"Species\":\"setosa\"},{\"Sepal.Length\":4.7,\"Sepal.Width\":3.2,\"Petal.Length\":1.3,\"Petal.Width\":0.2,\"Species\":\"setosa\"},{\"Sepal.Length\":4.6,\"Sepal.Width\":3.1,\"Petal.Length\":1.5,\"Petal.Width\":0.2,\"Species\":\"setosa\"},{\"Sepal.Length\":5,\"Sepal.Width\":3.6,\"Petal.Length\":1.4,\"Petal.Width\":0.2,\"Species\":\"setosa\"}]\u003c/script\u003e\n\u003c/div\u003e\n```\n\nOr by embedding JSON directly into your HTML as follows:\n\n```html\n/*preview*/\n\u003cdiv data-pagedtable\u003e\n  \u003cscript data-pagedtable-source type=\"application/json\"\u003e\n    [\n      { \"name\": \"Mazda RX4\",         \"mpg\": 21.0 },\n      { \"name\": \"Mazda RX4 Wag\",     \"mpg\": 21.0 },\n      { \"name\": \"Datsun 710\",        \"mpg\": 22.8 },\n      { \"name\": \"Hornet 4 Drive\",    \"mpg\": 21.4 },\n      { \"name\": \"Hornet Sportabout\", \"mpg\": 18.7 }\n    ]\n  \u003c/script\u003e\n\u003c/div\u003e\n```\n\nNotice that the data is specified row-wise, which is the default serialization for tables in JSON.\n\n# Paging\n\nPaging is automatically enabled as needed. If there is not enough space to render all rows or all columns, `pagedtable.js` will add paging for you. \n\n```html\n/*preview*/\n\u003cdiv data-pagedtable\u003e\n  \u003cscript data-pagedtable-source type=\"application/json\"\u003e\n    [\n      { \"Column A\": 1, \"Column B\": 1, \"Column C\": 1, \"Column D\": 1, \"Column E\": 1},\n      { \"Column A\": 2, \"Column B\": 2, \"Column C\": 2, \"Column D\": 2, \"Column E\": 2},\n      { \"Column A\": 3, \"Column B\": 3, \"Column C\": 3, \"Column D\": 3, \"Column E\": 3},\n      { \"Column A\": 4, \"Column B\": 4, \"Column C\": 4, \"Column D\": 4, \"Column E\": 4},\n      { \"Column A\": 5, \"Column B\": 5, \"Column C\": 5, \"Column D\": 5, \"Column E\": 5},\n      { \"Column A\": 6, \"Column B\": 6, \"Column C\": 6, \"Column D\": 6, \"Column E\": 6}\n    ]\n  \u003c/script\u003e\n\u003c/div\u003e\n```\n\nYou can also customize the range of rows and columns to show by adding `options` in your data source:\n\n```html\n/*preview*/\n\u003cdiv data-pagedtable\u003e\n  \u003cscript data-pagedtable-source type=\"application/json\"\u003e\n    {\n      \"options\": {\n        \"rows\": { \"min\": 2, \"max\": 4 },\n        \"columns\": { \"min\": 2, \"max\": 3 }\n      },\n      \"data\": [\n        { \"Column A\": 1, \"Column B\": 1, \"Column C\": 1, \"Column D\": 1, \"Column E\": 1},\n        { \"Column A\": 2, \"Column B\": 2, \"Column C\": 2, \"Column D\": 2, \"Column E\": 2},\n        { \"Column A\": 3, \"Column B\": 3, \"Column C\": 3, \"Column D\": 3, \"Column E\": 3},\n        { \"Column A\": 4, \"Column B\": 4, \"Column C\": 4, \"Column D\": 4, \"Column E\": 4},\n        { \"Column A\": 5, \"Column B\": 5, \"Column C\": 5, \"Column D\": 5, \"Column E\": 5},\n        { \"Column A\": 6, \"Column B\": 6, \"Column C\": 6, \"Column D\": 6, \"Column E\": 6}\n      ]\n    }\n  \u003c/script\u003e\n\u003c/div\u003e\n```\n\n# Customizing\n\nAppart from specifying the minimum rows and columns to display, you can also customize the columns with specific labels, alignment and type.\n\n```html\n/*preview*/\n\u003cdiv data-pagedtable style=\"width: 50%; margin: auto;\"\u003e\n  \u003cstyle\u003e\n    .pagedtable {\n      font-style: italic;\n    }\n    .pagedtable .even {\n      background-color: rgba(140, 200, 140, 0.1);\n    }\n  \u003c/style\u003e\n  \u003cscript data-pagedtable-source type=\"application/json\"\u003e\n    {\n      \"columns\": [\n        { \"name\": \"name\", \"label\": \"Automobile\", \"type\": \"character\" },\n        { \"name\": \"mpg\",  \"label\": \"MPG\",        \"type\": \"numeric\" }\n      ],\n      \"options\": {\n        \"columns\": { \"min\": 1, \"max\": 20 },\n        \"rows\":    { \"min\": 10, \"max\": 20 },\n        \"shadowDOM\": true\n      },\n      \"data\": [\n        { \"name\": \"Mazda RX4\",         \"mpg\": 21.0 },\n        { \"name\": \"Mazda RX4 Wag\",     \"mpg\": 21.0 },\n        { \"name\": \"Datsun 710\",        \"mpg\": 22.8 },\n        { \"name\": \"Hornet 4 Drive\",    \"mpg\": 21.4 },\n        { \"name\": \"Hornet Sportabout\", \"mpg\": 18.7 }\n      ]\n    }\n  \u003c/script\u003e\n\u003c/div\u003e\n```\n\nNotice that the previous example also makes use of `\u003cstyle\u003e` to customize additional styles. Under the hood, a paged table makes use of the [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to have consistent styling, to turn this off set `shadowDOM` to `false` in the options.\n\n# HTML\n\nInline HTML can be rendered as needed. `pagedtable.js` will attempt to do some cleaning through [`DOMPurify`](https://github.com/cure53/DOMPurify), and will then render the html inside the table cell for you if it is valid HTML. By default the HTML will not be rendered, and needs to be enabled.\n\n```html\n/*preview*/\n\u003cdiv data-pagedtable\u003e\n  \u003cscript data-pagedtable-source type=\"application/json\"\u003e\n    {\n      \"columns\": [\n        { \"name\": \"name\",       \"label\": \"Automobile\", \"type\": \"character\" },\n        { \"name\": \"mpg\",        \"label\": \"MPG\",        \"type\": \"numeric\" },\n        { \"name\": \"car_image\",  \"label\": \"Picture\",    \"type\": \"image\", \"html\": true }\n      ],\n      \"data\": [\n        { \"name\": \"Mazda RX4\",         \"mpg\": 21.0, \"car_image\": \"\u003cimg src='https://upload.wikimedia.org/wikipedia/commons/5/5b/1974_Mazda_RX4_Coupe_%2824282369814%29.jpg' height=20/\u003e\"},\n        { \"name\": \"Mazda RX4 Wag\",     \"mpg\": 21.0, \"car_image\": \"\u003cimg src='https://upload.wikimedia.org/wikipedia/commons/1/16/Mazda_RX4_Wagon_%281976%2C_127_PS%29.JPG' height=20/\u003e\"},\n        { \"name\": \"Datsun 710\",        \"mpg\": 22.8, \"car_image\": \"\u003cimg src='https://upload.wikimedia.org/wikipedia/commons/9/95/Datsun_710_two-door_orange%2C_front_left.jpg' height=20/\u003e\"},\n        { \"name\": \"Hornet 4 Drive\",    \"mpg\": 21.4, \"car_image\": \"\u003cimg src='https://upload.wikimedia.org/wikipedia/commons/4/46/1970_AMC_Hornet_SST_2-door_green_Kenosha-f.jpg' height=20/\u003e\"},\n        { \"name\": \"Hornet Sportabout\", \"mpg\": 18.7, \"car_image\": \"\u003cimg src='https://upload.wikimedia.org/wikipedia/commons/c/cc/1976_AMC_Hornet_Sportabout.jpg' height=20/\u003e\"}\n      ]\n    }\n  \u003c/script\u003e\n\u003c/div\u003e\n```\n\n\n# Programmatic\n\nYou can also create a paged table programmatically by creating the `PagedTable` object on your:\n\n```html\n/*preview*/\n\u003cdiv id=\"pagedtable\"\u003e\u003c/div\u003e\n\u003cscript type=\"application/javascript\"\u003e\n  // create a data frame\n  var dataframe = []\n  for (var idx = 0; idx \u003c 26; idx++) {\n    dataframe[idx] = { letter: String.fromCharCode('A'.charCodeAt(0) + idx), number: idx + 1 };\n  }\n\n  // create a paged table\n  pagedtable.create(dataframe, \"pagedtable\");\n\u003c/script\u003e\n```\n\n# Loading\n\nYou can make use of [D3.js](https://d3js.org/) and other libraries to load data into `pagedtable.js`; for instance, using D3s `csv()` function we can load data as follows:\n\n```html\n\u003cdiv id=\"pagedtable-d3\"\u003e\u003c/div\u003e\n\u003cscript type=\"application/javascript\"\u003e\n  d3.csv(\"https://cdn.rawgit.com/vlandham/js_data/master/data/cities.csv\").then(function(dataframe) {\n    (new PagedTable(\"pagedtable-d3\", dataframe)).init();\n  });\n\u003c/script\u003e\n```\n```html\n/*display*/\n\u003cdiv id=\"pagedtable-d3\"\u003e\u003c/div\u003e\n```\n\n# Frameworks\n\nYou can also integrate `pagedetable.js` with frameworks like [Vue.js](http://vuejs.com/), [React](https://reactjs.org/), [Svelte](https://svelte.dev/) and many others. The next example shows how to make use of Vue.js, please make sure that you reference the framework docs to properly integrate and follow best practices.\n\n```html\n/*display*/\n\u003ciframe src=\"examples/vue.html\" style=\"height: 460px;\"\u003e\u003c/iframe\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlverse%2Fpagedtablejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmlverse%2Fpagedtablejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlverse%2Fpagedtablejs/lists"}