{"id":13623951,"url":"https://github.com/githubocto/flat-ui","last_synced_at":"2025-05-15T08:02:54.298Z","repository":{"id":38288070,"uuid":"348801420","full_name":"githubocto/flat-ui","owner":"githubocto","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-26T20:55:28.000Z","size":3881,"stargazers_count":380,"open_issues_count":10,"forks_count":24,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-05T00:35:24.004Z","etag":null,"topics":["flat-data"],"latest_commit_sha":null,"homepage":"","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/githubocto.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":"2021-03-17T17:49:04.000Z","updated_at":"2025-04-14T17:52:39.000Z","dependencies_parsed_at":"2025-03-09T23:30:25.018Z","dependency_job_id":"3737f980-c9af-4495-8496-76bd09226664","html_url":"https://github.com/githubocto/flat-ui","commit_stats":null,"previous_names":[],"tags_count":74,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubocto%2Fflat-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubocto%2Fflat-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubocto%2Fflat-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubocto%2Fflat-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/githubocto","download_url":"https://codeload.github.com/githubocto/flat-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254301420,"owners_count":22047901,"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":["flat-data"],"created_at":"2024-08-01T21:01:37.284Z","updated_at":"2025-05-15T08:02:54.227Z","avatar_url":"https://github.com/githubocto.png","language":"TypeScript","readme":"# flat-ui\n\nWelcome friends! **flat-ui** is a React component that will render your flat dataset (an array of objects) in a table view:\n\n![screenshot](https://github.com/githubocto/flat-ui/raw/main/screenshot.png)\n\nIt will...\n\n- auto-detect types\n- show a distribution of each quantitative column\n- calculate a diff between the main dataset and a `diffData` dataset\n- give more information about a hovered row \u0026 column\n- allow the user to...\n  - filter each column\n  - sort by any column\n  - sticky any column to the left\n  - download the filtered \u0026 sorted data (csv or json)\n  - cycle through the diffs, scrolling to each changed row\n\n## Usage\n\nInstall using npm or yarn:\n\n```bash\nyarn add @githubocto/flat-ui\n```\n\nBasic usage:\n\n```javascript\nimport { Grid } from '@githubocto/flat-ui';\n\nconst MyComponent = () =\u003e {\n  const data = [{ column1: 123 }, { column1: 234 }];\n\n  return \u003cGrid data={data} /\u003e;\n};\n```\n\n## Props\n\n### data\n\n`array`\n\nYour dataset, formatted as an array of objects, where each object is a row in the table.\n\n## Optional props\n\n### diffData\n\n`array`\n\nA modified version of your main dataset, formatted as an array of objects, where each object is a row in the table. The table will show \"differences\" between this dataset and the main dataset:\n\n- added lines\n- removed lines\n- modified cells\n\n### metadata\n\n`object`\n\ncolumn names as keys and descriptions as values.\n\n### canDownload\n\n`boolean`\n\nWhether or not the table provides \"download csv\" and \"download json\" buttons.\n\n### downloadFilename\n\n`string`\n\nThe name of the downloaded CSV or JSON file (without extension).\n\n### defaultFilters\n\n`object`\n\ncolumn names as keys, with filter values as values:\n\n- `string` for text columns\n- `array of numbers` for quantitative columns (numbers or dates)\n\nThe user can interact with the table and update the filters, but the table will use the default filters when `defaultFilters` or `data` changes.\n\n### defaultSort\n\n`array`\n\nThe name of the column and the order you want the table to initialize sorting by (e.g. `[\"Location\", \"desc\"]`). The user can interact with the table and update the sort, but the table will use the default sort when `defaultSort` or `data` changes.\n\n### defaultStickyColumnName\n\n`string`\n\nThe name of the column you want the table to initialize stickied to the left. The user can interact with the table and update the sticky column, but the table will use the default sticky column when `defaultStickyColumnName` or `data` changes.\n\n### onChange\n\n`function`\n\nA callback function whose first parameter is the grid state:\n\n```javascript\n{\n  stickyColumnName: \"\",\n  columnNames: [\"\", \"\"],\n  filteredData: [{}, {}],\n  diffs: [{}, {}], // where __status__ is \"new\"|\"old\"|\"modified\"\n  filters: {},\n  sort: [\"column name\", \"asc\" or \"desc\"],\n  schema: {}, // column names : array|short-array|category|number|date\n}\n```\n\n### isEditable\n\n`boolean`\n\nWhether or not to allow the user to edit the table.\n\n### onEdit\n\n`(newData: any[]) =\u003e void`\n\nA callback when the user edits the data with the updated dataset. This is intended to be used as a controlled component, where the parent component handles data changes.\n\n## Developing locally\n\nTo get the example up \u0026 running:\n\n```bash\nyarn\nyarn start\n```\n\nand also start the **example** server:\n\n```bash\ncd example\nyarn\nyarn start\n```\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithubocto%2Fflat-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgithubocto%2Fflat-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithubocto%2Fflat-ui/lists"}