{"id":49232730,"url":"https://github.com/ebenezerdon/react-table","last_synced_at":"2026-04-24T12:35:18.941Z","repository":{"id":226282827,"uuid":"768089622","full_name":"ebenezerdon/react-table","owner":"ebenezerdon","description":null,"archived":false,"fork":false,"pushed_at":"2024-04-02T11:48:27.000Z","size":151,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-02T13:14:45.281Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-table-flax.vercel.app","language":"TypeScript","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/ebenezerdon.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}},"created_at":"2024-03-06T12:59:55.000Z","updated_at":"2024-03-27T13:41:47.000Z","dependencies_parsed_at":"2024-04-02T12:49:38.762Z","dependency_job_id":"1df4a064-a50d-48b9-9640-3f4051d06ab2","html_url":"https://github.com/ebenezerdon/react-table","commit_stats":null,"previous_names":["ebenezerdon/react-table"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ebenezerdon/react-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ebenezerdon%2Freact-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ebenezerdon%2Freact-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ebenezerdon%2Freact-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ebenezerdon%2Freact-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ebenezerdon","download_url":"https://codeload.github.com/ebenezerdon/react-table/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ebenezerdon%2Freact-table/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32224402,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T10:26:35.452Z","status":"ssl_error","status_checked_at":"2026-04-24T10:25:27.643Z","response_time":64,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":"2026-04-24T12:35:16.378Z","updated_at":"2026-04-24T12:35:18.935Z","avatar_url":"https://github.com/ebenezerdon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React/TypeScript DataTable\n\nView the live app [here](https://react-table-flax.vercel.app)\n\nA user-friendly data table built with React, TypeScript, and Vite, designed to display and manage a list of persons with features including:\n\n- Data pagination\n- Row highlighting\n- Jump-to-row functionality\n- Detailed person information modal\n\n## Features\n\n- **Pagination:** Handles large datasets gracefully with efficient pagination controls.\n- **Row Selection and Highlighting:** Visually highlights the currently selected row.\n- **Jump-to-Row:** Quickly navigates to specific rows by entering the row number.\n- **Person Details Modal:** Provides in-depth information about a selected person.\n\n## Technologies\n\n- **React:** Core UI framework for building dynamic user interfaces.\n- **TypeScript:** Enhances code readability, maintainability, and type safety.\n- **Vite:** Provides lightning-fast development and production builds.\n- **SCSS:** Used for modular and maintainable styling.\n- **Bootstrap:** For responsive and mobile-first design.\n\n## Getting Started\n\n1. **Clone the Project**\n\n   ```bash\n   git clone https://github.com/ebenezerdon/react-table.git\n   ```\n\n2. **Install Dependencies**\n\n   ```bash\n   cd react-table\n   npm install\n   ```\n\n3. **Start the Development Server**\n\n   ```bash\n   npm run dev\n   ```\n\n   Typically the app will be available at \u003chttp://localhost:5173/\u003e\n\n## Project Structure\n\n- `src`\n  - `components`\n    - `DataTable.tsx` - The main data table component.\n    - `PersonDetailsModal.tsx` - Modal for displaying person details.\n    - `DataTable.scss` - Styles for the DataTable component.\n  - `data`\n    - `random-people-data.json` - user data in JSON format.\n    - `types.ts`: Contains TypeScript interfaces for the data.\n- `App.tsx` - Main application component.\n- `main.tsx` - Entry point for the application.\n- `index.html` - Main HTML file.\n- `package.json` - Project dependencies and scripts.\n- `tsconfig.json` - TypeScript configuration.\n- `vite.config.ts` - Vite configuration.\n\n## Design Decisions\n\n- **Component-Based Structure:** The project is organized into reusable React components for scalability and maintainability.\n- **Focused Scope:** The initial design centers on the core data table functionality, offering a base for expansion.\n- **TypeScript Usage:** TypeScript is used to ensure type safety and code clarity.\n- **Vite for Development:** Vite is chosen for its rapid development and production builds.\n\n## Future Enhancements\n\n- **Column Sorting:** Enable sorting by various data fields (name, email, etc.).\n- **Filtering/Searching:** Implement search functionality to filter the data table.\n- **Data Fetching:** Integrate with an API to fetch data dynamically.\n- **Robust Testing:** Add comprehensive unit and integration tests.\n- **Accessibility:** Ensure the app is fully accessible to all users.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Febenezerdon%2Freact-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Febenezerdon%2Freact-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Febenezerdon%2Freact-table/lists"}