{"id":13508127,"url":"https://github.com/fulmicoton/fattable","last_synced_at":"2025-04-08T17:16:40.672Z","repository":{"id":13769765,"uuid":"16464662","full_name":"fulmicoton/fattable","owner":"fulmicoton","description":"Javascript Library to create scrollable table with infinite rows and columns.","archived":false,"fork":false,"pushed_at":"2024-12-23T10:02:32.000Z","size":678,"stargazers_count":482,"open_issues_count":10,"forks_count":40,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-04-01T16:15:48.506Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","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/fulmicoton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"fulmicoton","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2014-02-02T22:18:14.000Z","updated_at":"2024-12-23T10:02:36.000Z","dependencies_parsed_at":"2025-01-13T22:13:53.154Z","dependency_job_id":"1bf5c4db-c5d8-4dde-a969-e48da07c77fa","html_url":"https://github.com/fulmicoton/fattable","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fulmicoton%2Ffattable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fulmicoton%2Ffattable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fulmicoton%2Ffattable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fulmicoton%2Ffattable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fulmicoton","download_url":"https://codeload.github.com/fulmicoton/fattable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247888559,"owners_count":21013001,"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-08-01T02:00:48.530Z","updated_at":"2025-04-08T17:16:40.642Z","avatar_url":"https://github.com/fulmicoton.png","language":"CoffeeScript","readme":"# Fattable\n\n## Demo\n\nCheckout the [demo](http://fulmicoton.com/fattable/index2.html) here.\n\n## What is it?\n\nFattable is a javascript Library to create table with infinite scroll, with infinite number of rows and number of columns.\n\nBig table (more 10,000 cells) don't do well with DOM.\nYour scroll will start getting choppy.\n\nAlso big tables can rapidly grow in sizes. It is not always possible to have clients download or even retain all of the table data. Fattable includes everything required to load your data asynchronously.\n\nThis library is\n\n - **light** : no library needed, smaller than 10KB)\n - **fast** (only visible element are in DOM, the exact same DOM element are recycled over and over, )\n - **async friendly** : the API makes it simple to fetch your data aysnchronously.\n - **powerful and unbloated** : Design is up to you. Style the table via\n css and use your painter to hook up events, and render your content in your cell.\n\n\n\n## API\n\n    var table = fattable({\n      \"painter\": painter,    // your painter (see below)\n      \"model\": model,          // model describing your data (see below)\n      \"nbRows\": 1000000,     // overall number of rows\n      \"rowHeight\": 35,       // constant row height (px)\n      \"headerHeight\": 100,   // height of the header (px)\n      \"columnWidths\": [300, 300, 300, 300] // array of column width (px) \n    })  \n\n## Painter\n\n``painter`` is an object which role is to fill the content of your cells, and columnHeaders. It is expected to implement the following interface.\n    \n    var painter = {\n        \n        \"setupHeader\": function(headerDiv) {\n            /* Setup method are called at the creation\n               of the column header. That is during\n               initialization and for all window resize\n               event. Columns are recycled. */\n        }\n    ,\n        \"setupCell\": function(cellDiv) {\n            /* The cell painter tells how \n               to fill, and style cells.\n               Do not set height or width.\n               in either fill and setup methods. */\n        }\n    ,\n        \"fillHeader\": function(headerDiv, data) {\n            /* Fills and style a column div.\n               Data is whatever the datalayer\n               is returning. A String, or a more\n               elaborate object. */\n            colHeaderDiv.textContent = data;\n        }\n    ,\n        \"fillCell\": function(cellDiv, data) {\n            /* Fills and style a cell div.\n               Data is whatever the datalayer\n               is returning. A String, or a more\n               elaborate object. */\n            cellDiv.textContent = data;\n        }\n    ,\n        \"fillHeaderPending\": function(headerDiv) {\n            /* Mark a column header as pending.\n               When using an asynchronous.\n               Its content is not in cache\n               and needs to be fetched */\n            cellDiv.textContent = \"NA\";\n        }\n    ,\n        \"fillCellPending\": function(cellDiv) {\n            /* Mark a cell content as pending\n               Its content is not in cache and \n               needs to be fetched */\n            cellDiv.textContent = \"NA\";\n        }\n    };\n    \n\nActually this very simple implementation is the default.\nAnd it is available as ``fattable.Painter``, so that you can just\noverride it.\n\n\n## DataLayer\n\n### Synchronous Data Layer\n\n[Demo](http://fulmicoton.com/fattable/index2.html)\n\nIf your data is not too big, you probably can just fetch your data all at once, and then display the table.\nFor this simple use case, the best is probably to extend the ``SyncTableData``\nobject.\n\nYou just need to extend ``fattable.SyncTableModel`` and implement the following methods\n\n    {\n      \"getCellSync\": function(i,j) {\n        return \"cell \" + i + \",\" + j;\n      },\n      \"getHeaderSync\": function(i,j) {\n        return \"col \" + j;\n      }\n    }\n\n\n### Asynchronous and paged async model\n\n[Demo](http://fulmicoton.com/fattable/index.html)\n\nYou probably don't want your backend to receive one request per\ncell displayed. A good solution to this problem is to partition your table into pages of cells. \n\nQueries are only sent when the user stops scrolling.\n\nTo use such a system, you just have to extend the ``PagedAsyncTableModel``class with the following methods. In addition, it include a simple LRU cache.\n\n    {\n      \"cellPageName\": function(i,j) {\n          // returns a string which stands for the id of \n          // the page the cell (i,j) belongs to.\n          var I = (i / 128) | 0;\n          var J = (j / 29) | 0;\n          return JSON.stringify([I,J]);\n      },\n      \"fetchCellPage\": function(pageName, cb) {\n          // Async method to return the page of \n          var coords = JSON.parse(pageName);\n          var I = coords[0];\n          var J = coords[1];\n          getJSON(\"data/page-\" + I + \"-\" + J + \".json\", function(data) {\n              cb(function(i,j) {\n                  return {\n                      rowId: i,\n                      content: data[i-I*128][j-J*29]\n                  };\n              });\n          });\n      },\n      \"headerCellPage\" : function(j) {\n       // Same as for cellPageName but for cells.\n      },\n      \"fetchHeaderPage\" : function(j) {\n        // Same as for fetchCellPage but for headers\n      }\n    }\n\n\n\n### Custom async model\n\nIf you want to go custom, you can implement your own data model, it just has to implement the following methods :\n  \n    {\n      hasCell: function(i,j) {\n        // returns true if getting the data of the cell (i,j )\n        // does not require an async call false if it does need it.\n      },\n      hasHeader: function(j) {\n        // ... same thing for column header j\n      },\n      getCell: function(i,j,cb) {\n          // fetch data associated to cell i,j \n          // and call the callback method cb with it\n          // as argument\n      },\n      getHeader: function(j,cb) {\n          // ... same thing for column header j\n      }\n    }\n\n### Troubleshooting\n\nUsing ``\u003c!DOCTYPE html\u003e`` for using the library with IE \u003e=9. IE \u003c 9 is simply not supported.\n\nThe library currently use a huge container with overflow.\nBrowser have a bit of limitation on the size of such a container.\nExpect some bug appearing at 40000 rows in IE, 500000 rows in other browsers.\n\n","funding_links":["https://github.com/sponsors/fulmicoton"],"categories":["CoffeeScript","22. 文档/表格/PDF ##","22. 文档/表格/PDF"],"sub_categories":["13.20 视差滚动(Parallax Scrolling) ###","13.20 视差滚动(Parallax Scrolling)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffulmicoton%2Ffattable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffulmicoton%2Ffattable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffulmicoton%2Ffattable/lists"}