{"id":16820474,"url":"https://github.com/techniq/mui-virtualized-table","last_synced_at":"2025-04-07T06:08:11.693Z","repository":{"id":39617175,"uuid":"145460646","full_name":"techniq/mui-virtualized-table","owner":"techniq","description":"Virtualized Material-UI table","archived":false,"fork":false,"pushed_at":"2022-12-08T16:51:58.000Z","size":4537,"stargazers_count":133,"open_issues_count":37,"forks_count":33,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-30T21:08:48.238Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://techniq.github.io/mui-virtualized-table/","language":"JavaScript","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/techniq.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":"2018-08-20T19:19:05.000Z","updated_at":"2024-05-07T06:32:54.000Z","dependencies_parsed_at":"2023-01-25T07:46:43.766Z","dependency_job_id":null,"html_url":"https://github.com/techniq/mui-virtualized-table","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Fmui-virtualized-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Fmui-virtualized-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Fmui-virtualized-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Fmui-virtualized-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/techniq","download_url":"https://codeload.github.com/techniq/mui-virtualized-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247601448,"owners_count":20964864,"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-13T10:56:55.686Z","updated_at":"2025-04-07T06:08:11.671Z","avatar_url":"https://github.com/techniq.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## mui-virtualized-table\n\nCombination of [Material UI](http://www.material-ui.com) visual components with react-virtualized for improved performance and features with a simple API.\n\nFor examples of `\u003cMuiTable\u003e` in action, see [demo](https://techniq.github.io/mui-virtualized-table/) or view the [source](https://github.com/techniq/mui-virtualized-table/tree/master/stories)\n\n### Features\n\n- Uses windowing for performance (via [react-virtualized](https://github.com/bvaughn/react-virtualized))\n- Freeze rows and/or columns\n- Fixed or variable (%) column widths\n- Resizable columns\n\n### Props\n\n| Property | Type | Required | Default | Description |\n| ------------------ | -------------- | -------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `data` | array | ✓ | | Data to render using defined `columns` |\n| `columns` | array | ✓ | | Defines the columns in the table.\u003cbr/\u003eColumn format: {'name', 'header', 'onHeaderClick', 'width', 'cell', ...cellProps }\u003cbr/\u003e`name`: Name of header\u003cbr/\u003e`header`: (optional) Name to display instead 'name'\u003cbr/\u003e`onHeaderClick`: (optional) Callback when header is clicked on (has precendence over `onHeaderClick` on table\u003cbr/\u003e`width`: (optional) Width of cell\u003cbr/\u003e`cell`: (optional) Callback for rendering associated column cell data. Passes the row data for the associated cell. |\n| `cellProps` | object | func | | | Pass initial props to [TableCell](https://material-ui.com/api/table-cell/) (ex. `cellProps={{ padding: 'dense' }}`). Specifying same property within the column definition `cellProps` will override. Can also be a function which is passed `column, rowData` similiarly to `onCellClick` |\n| `width` | number | ✓ | | Visible width of table. Will scroll horizontally if sum of column widths are greater than defined width |\n| `columnWidth` | number or func | | | Static column widths if number, calulated based on `columns` definitons if not specificed, or can pass in a function to peform own calcuation based on data |\n| `height` | number | | calculted from `data.length` or `pagination.rowsPerPage` if defined | Visible height of table. Will scroll vertically if sum of column heights are great than defined height |\n| `maxHeight` | number | | 0 | Maximum height of table. Useful when using calculated |\n| `fitHeightToRows` | boolean | | false | Always fit the content height to row data. Only useful when using pagination and you want to reduce the height on non-full pages (will move paginator on different length results) |\n| `rowHeight` | number | | 48 | Height of rows |\n| `fixedRowCount` | number | | 0 | Number of rows to remain fixed at the top of the viewport (freeze rows). Based on `columns` definition order |\n| `fixedColumnCount` | number | | 0 | Number of columns to remain fixed at the left of the viewport (freeze columns). Based on `columns` definition order |\n| `includeHeaders` | bool | | false | Add header row to top of data. Useful to also set `fixedRowCount` to `1` |\n| `onHeaderClick` | func | | | Called with column definition of header clicked on. Useful to set sort data and set `orderBy` and `orderDirection` |\n| `onCellClick` | func | | | Called with column definition and row data when non-header cell is clicked on (ex. `onCellClick={(event, { column, rowData, data} ) =\u003e alert(rowData[column.name])}`) |\n| `onCellDoubleClick` | func | | | Called with column definition and row data when non-header cell is double clicked on (ex. `onCellDoubleClick={(event, { column, rowData, data} ) =\u003e alert(rowData[column.name])}`) |\n| `onCellContextMenu` | func | | | Called with column definition when non-header cell is right clicked on (ex. `onCellContextMenu={(event, { column }) =\u003e alert(column.name)}`) |\n| `pagination` | object | | | If defined, will add pagination to bottom of table and pass props to Material-UI's [TablePagination](https://material-ui.com/api/table-pagination/) component. Must set `count`, `onChangePage`, `page`, and `rowsPerPage` if defined. |\n| `orderBy` | string | | | If defined, will show column's header with matching `name` using [TableSortLabel](https://material-ui.com/api/table-sort-label/) |\n| `orderDirection` | string | | 'desc' | The order of the sort direction |\n| `resizable` | bool | | | Enable column resizing handles |\n\n### Running Storybook\n\nThis project has some [storybook](https://github.com/storybooks/storybook) stories.\n\nTo run storybook, you have to install the story dependencies first:\n\n```bash\n$ cd stories\n$ yarn install\n$ cd ..\n```\n\nThen use yarn to run the `storybook` script:\n\n```bash\n$ yarn install\n$ yarn storybook\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechniq%2Fmui-virtualized-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechniq%2Fmui-virtualized-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechniq%2Fmui-virtualized-table/lists"}