jattac.libs.web.responsive-table 0.1.5 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +275 -275
- package/dist/index.js +1 -1
- package/gemini/project_analysis.md +41 -41
- package/gemini/release_git_steps.md +64 -0
- package/package.json +58 -58
- package/src/Data/IFooterColumnDefinition.ts +21 -21
- package/src/Styles/ResponsiveTable.module.css +2 -2
- package/src/UI/ResponsiveTable.tsx +381 -381
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
|
|
2
|
-
Based on the files, here's an in-depth understanding of the project:
|
|
3
|
-
|
|
4
|
-
**Project Goal:**
|
|
5
|
-
|
|
6
|
-
The project, `jattac.libs.web.responsive-table`, is a reusable **React component library** that provides a highly customizable and responsive table. The key feature is its ability to transform from a traditional tabular layout on larger screens to a more readable card-based layout on mobile devices.
|
|
7
|
-
|
|
8
|
-
**Core Functionality & Features:**
|
|
9
|
-
|
|
10
|
-
* **Responsiveness:** This is the primary selling point. It automatically adapts the table's presentation based on the screen width (`mobileBreakpoint` prop), ensuring a good user experience on both desktop and mobile.
|
|
11
|
-
* **Data-Driven:** The table is populated with data passed through the `data` prop. The structure of the table (columns) is defined by the `columnDefinitions` prop.
|
|
12
|
-
* **Customizable Rendering:** The `cellRenderer` function in the column definitions allows developers to render any React component within a cell, enabling rich content like buttons, links, formatted text, and more.
|
|
13
|
-
* **Dynamic Columns:** Column definitions can be functions, allowing for the dynamic creation of columns based on application state or data properties (e.g., showing an "Admin Actions" column only for admin users).
|
|
14
|
-
* **Interactivity:**
|
|
15
|
-
* **Row Clicks:** The `onRowClick` prop allows for handling clicks on entire table rows.
|
|
16
|
-
* **Header Clicks:** The `interactivity` property on a column definition enables click handlers for table headers, useful for sorting or filtering actions.
|
|
17
|
-
* **Loading and Empty States:**
|
|
18
|
-
* It provides a `isLoading` prop to display a skeleton loader while data is being fetched, improving the user experience.
|
|
19
|
-
* A customizable `noDataComponent` can be shown when there's no data to display.
|
|
20
|
-
* **Animations:** It supports optional staggered entrance animations for rows (`animateOnLoad` prop) to make the table feel more dynamic.
|
|
21
|
-
* **Table Footer:** The `footerRows` prop allows for adding a footer to the table, which is also responsive. This is useful for displaying summary information like totals.
|
|
22
|
-
* **Styling:** It uses CSS Modules (`ResponsiveTable.module.css`) for scoped styling, preventing style conflicts with other parts of an application. It also uses CSS variables for easy theming.
|
|
23
|
-
|
|
24
|
-
**Project Structure & Technology Stack:**
|
|
25
|
-
|
|
26
|
-
* **Language:** TypeScript (`.ts`, `.tsx`) and JavaScript for the build configuration.
|
|
27
|
-
* **Framework:** React.
|
|
28
|
-
* **Build Tool:** Rollup is used to bundle the library for distribution. The `rollup.config.js` file defines the build process, including plugins for handling TypeScript, PostCSS (for CSS Modules), and resolving dependencies.
|
|
29
|
-
* **Package Manager:** npm.
|
|
30
|
-
* **Linting & Formatting:** ESLint and Prettier are used to maintain code quality and consistency.
|
|
31
|
-
* **Testing:** While no test files are present, the `package.json` includes dependencies for `@testing-library/react`, indicating that testing is intended for this project.
|
|
32
|
-
* **Distribution:** The `dist` directory (ignored by Git) is the output for the bundled library, which is then published to npm. The `package.json` defines the entry points (`main`, `module`, `types`).
|
|
33
|
-
|
|
34
|
-
**Development & Maintenance:**
|
|
35
|
-
|
|
36
|
-
* The project includes shell scripts (`set-origin-urls.sh`, `update-dependancies.sh`) to help with development tasks like updating remote URLs and managing dependencies.
|
|
37
|
-
* The `README.md` is comprehensive, providing clear installation instructions, getting-started examples, and a detailed API reference. This is crucial for a library intended for other developers to use.
|
|
38
|
-
|
|
39
|
-
**Overall Impression:**
|
|
40
|
-
|
|
41
|
-
This is a well-structured and well-documented React component library. It solves a common problem (responsive tables) with a modern and flexible approach. The focus on customization, performance (debounced resize handling), and developer experience (clear documentation, helpful scripts) makes it a high-quality project. The use of TypeScript, CSS Modules, and a proper build process are all signs of a professional and maintainable codebase.
|
|
1
|
+
|
|
2
|
+
Based on the files, here's an in-depth understanding of the project:
|
|
3
|
+
|
|
4
|
+
**Project Goal:**
|
|
5
|
+
|
|
6
|
+
The project, `jattac.libs.web.responsive-table`, is a reusable **React component library** that provides a highly customizable and responsive table. The key feature is its ability to transform from a traditional tabular layout on larger screens to a more readable card-based layout on mobile devices.
|
|
7
|
+
|
|
8
|
+
**Core Functionality & Features:**
|
|
9
|
+
|
|
10
|
+
* **Responsiveness:** This is the primary selling point. It automatically adapts the table's presentation based on the screen width (`mobileBreakpoint` prop), ensuring a good user experience on both desktop and mobile.
|
|
11
|
+
* **Data-Driven:** The table is populated with data passed through the `data` prop. The structure of the table (columns) is defined by the `columnDefinitions` prop.
|
|
12
|
+
* **Customizable Rendering:** The `cellRenderer` function in the column definitions allows developers to render any React component within a cell, enabling rich content like buttons, links, formatted text, and more.
|
|
13
|
+
* **Dynamic Columns:** Column definitions can be functions, allowing for the dynamic creation of columns based on application state or data properties (e.g., showing an "Admin Actions" column only for admin users).
|
|
14
|
+
* **Interactivity:**
|
|
15
|
+
* **Row Clicks:** The `onRowClick` prop allows for handling clicks on entire table rows.
|
|
16
|
+
* **Header Clicks:** The `interactivity` property on a column definition enables click handlers for table headers, useful for sorting or filtering actions.
|
|
17
|
+
* **Loading and Empty States:**
|
|
18
|
+
* It provides a `isLoading` prop to display a skeleton loader while data is being fetched, improving the user experience.
|
|
19
|
+
* A customizable `noDataComponent` can be shown when there's no data to display.
|
|
20
|
+
* **Animations:** It supports optional staggered entrance animations for rows (`animateOnLoad` prop) to make the table feel more dynamic.
|
|
21
|
+
* **Table Footer:** The `footerRows` prop allows for adding a footer to the table, which is also responsive. This is useful for displaying summary information like totals.
|
|
22
|
+
* **Styling:** It uses CSS Modules (`ResponsiveTable.module.css`) for scoped styling, preventing style conflicts with other parts of an application. It also uses CSS variables for easy theming.
|
|
23
|
+
|
|
24
|
+
**Project Structure & Technology Stack:**
|
|
25
|
+
|
|
26
|
+
* **Language:** TypeScript (`.ts`, `.tsx`) and JavaScript for the build configuration.
|
|
27
|
+
* **Framework:** React.
|
|
28
|
+
* **Build Tool:** Rollup is used to bundle the library for distribution. The `rollup.config.js` file defines the build process, including plugins for handling TypeScript, PostCSS (for CSS Modules), and resolving dependencies.
|
|
29
|
+
* **Package Manager:** npm.
|
|
30
|
+
* **Linting & Formatting:** ESLint and Prettier are used to maintain code quality and consistency.
|
|
31
|
+
* **Testing:** While no test files are present, the `package.json` includes dependencies for `@testing-library/react`, indicating that testing is intended for this project.
|
|
32
|
+
* **Distribution:** The `dist` directory (ignored by Git) is the output for the bundled library, which is then published to npm. The `package.json` defines the entry points (`main`, `module`, `types`).
|
|
33
|
+
|
|
34
|
+
**Development & Maintenance:**
|
|
35
|
+
|
|
36
|
+
* The project includes shell scripts (`set-origin-urls.sh`, `update-dependancies.sh`) to help with development tasks like updating remote URLs and managing dependencies.
|
|
37
|
+
* The `README.md` is comprehensive, providing clear installation instructions, getting-started examples, and a detailed API reference. This is crucial for a library intended for other developers to use.
|
|
38
|
+
|
|
39
|
+
**Overall Impression:**
|
|
40
|
+
|
|
41
|
+
This is a well-structured and well-documented React component library. It solves a common problem (responsive tables) with a modern and flexible approach. The focus on customization, performance (debounced resize handling), and developer experience (clear documentation, helpful scripts) makes it a high-quality project. The use of TypeScript, CSS Modules, and a proper build process are all signs of a professional and maintainable codebase.
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
## Release Git Steps
|
|
2
|
+
|
|
3
|
+
This document outlines the sequence of Git commands to perform at the end of every release cycle to ensure the `master` branch is up-to-date, tagged, and all changes are pushed to the remote repository.
|
|
4
|
+
|
|
5
|
+
**Prerequisites:**
|
|
6
|
+
- Ensure all development work for the release is complete and committed to the `develop` branch.
|
|
7
|
+
- Ensure you are on the `develop` branch (`git checkout develop`).
|
|
8
|
+
|
|
9
|
+
**Steps:**
|
|
10
|
+
|
|
11
|
+
1. **Stage all changes (if any uncommitted changes exist on `develop`):**
|
|
12
|
+
```bash
|
|
13
|
+
git add .
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
2. **Commit changes on `develop` (if not already done):**
|
|
17
|
+
```bash
|
|
18
|
+
git commit -m "feat(release): Prepare for new release"
|
|
19
|
+
# Or, if you have a multi-line message, use a temporary file:
|
|
20
|
+
# echo "Your detailed commit message" > commit_message.txt
|
|
21
|
+
# git commit -F commit_message.txt
|
|
22
|
+
```
|
|
23
|
+
*(Note: We assume the main feature/bugfix commits are already on `develop`.)*
|
|
24
|
+
|
|
25
|
+
3. **Switch to the `master` branch:**
|
|
26
|
+
```bash
|
|
27
|
+
git checkout master
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
4. **Merge `develop` into `master`:**
|
|
31
|
+
```bash
|
|
32
|
+
git merge develop
|
|
33
|
+
```
|
|
34
|
+
*This will bring all the latest changes from `develop` into `master`.*
|
|
35
|
+
|
|
36
|
+
5. **Get the current version from `package.json`:**
|
|
37
|
+
```bash
|
|
38
|
+
# Manually read the "version" field from package.json
|
|
39
|
+
# Example: "version": "1.0.0"
|
|
40
|
+
# Let's assume the version is X.Y.Z
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
6. **Create a new Git tag for the release:**
|
|
44
|
+
```bash
|
|
45
|
+
git tag vX.Y.Z
|
|
46
|
+
```
|
|
47
|
+
*Replace `X.Y.Z` with the actual version number obtained from `package.json`.*
|
|
48
|
+
|
|
49
|
+
7. **Push the `master` branch and all tags to the remote repository:**
|
|
50
|
+
```bash
|
|
51
|
+
git push origin master --tags
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
8. **Switch back to the `develop` branch:**
|
|
55
|
+
```bash
|
|
56
|
+
git checkout develop
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
9. **Push the `develop` branch to the remote repository (to ensure it's up-to-date after the merge):**
|
|
60
|
+
```bash
|
|
61
|
+
git push origin develop
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
This sequence ensures a clean release process, updating `master`, creating a version tag, and synchronizing both branches with the remote.
|
package/package.json
CHANGED
|
@@ -1,58 +1,58 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "jattac.libs.web.responsive-table",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"module": "dist/index.es.js",
|
|
7
|
-
"types": "dist/index.d.ts",
|
|
8
|
-
"scripts": {
|
|
9
|
-
"build": "rollup -c",
|
|
10
|
-
"lint": "eslint './{src,app}/**/*.{ts,tsx}'",
|
|
11
|
-
"size": "size-limit",
|
|
12
|
-
"prepare": "npm run build"
|
|
13
|
-
},
|
|
14
|
-
"keywords": [
|
|
15
|
-
"react",
|
|
16
|
-
"typescript"
|
|
17
|
-
],
|
|
18
|
-
"author": "Nyingi Maina",
|
|
19
|
-
"license": "MIT",
|
|
20
|
-
"peerDependencies": {
|
|
21
|
-
"react": ">=18.2.0",
|
|
22
|
-
"react-dom": ">=18.2.0",
|
|
23
|
-
"typescript": ">=3.7.0"
|
|
24
|
-
},
|
|
25
|
-
"devDependencies": {
|
|
26
|
-
"@rollup/plugin-commonjs": "^25.0.7",
|
|
27
|
-
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
28
|
-
"@rollup/plugin-typescript": "^11.1.5",
|
|
29
|
-
"@size-limit/preset-small-lib": "^10.0.1",
|
|
30
|
-
"@testing-library/react": "^14.0.0",
|
|
31
|
-
"@types/react": "^18.2.33",
|
|
32
|
-
"@types/react-dom": "^18.2.14",
|
|
33
|
-
"@typescript-eslint/eslint-plugin": "^6.9.1",
|
|
34
|
-
"@typescript-eslint/parser": "^6.9.1",
|
|
35
|
-
"eslint": "^8.52.0",
|
|
36
|
-
"eslint-config-prettier": "^9.0.0",
|
|
37
|
-
"eslint-plugin-prettier": "^5.0.1",
|
|
38
|
-
"eslint-plugin-react": "^7.33.2",
|
|
39
|
-
"identity-obj-proxy": "^3.0.0",
|
|
40
|
-
"npm": "^10.2.2",
|
|
41
|
-
"postcss": "^8.4.31",
|
|
42
|
-
"prettier": "^3.0.3",
|
|
43
|
-
"react": "^18.2.0",
|
|
44
|
-
"react-dom": "^18.2.0",
|
|
45
|
-
"rollup": "^4.2.0",
|
|
46
|
-
"rollup-plugin-copy": "^3.5.0",
|
|
47
|
-
"rollup-plugin-delete": "^2.0.0",
|
|
48
|
-
"rollup-plugin-generate-package-json": "^3.2.0",
|
|
49
|
-
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
50
|
-
"rollup-plugin-postcss": "^4.0.2",
|
|
51
|
-
"size-limit": "^10.0.1",
|
|
52
|
-
"typescript": "^5.2.2"
|
|
53
|
-
},
|
|
54
|
-
"dependencies": {
|
|
55
|
-
"@rollup/plugin-terser": "^0.4.4",
|
|
56
|
-
"tslib": "^2.6.2"
|
|
57
|
-
}
|
|
58
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "jattac.libs.web.responsive-table",
|
|
3
|
+
"version": "0.1.6",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.es.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"build": "rollup -c",
|
|
10
|
+
"lint": "eslint './{src,app}/**/*.{ts,tsx}'",
|
|
11
|
+
"size": "size-limit",
|
|
12
|
+
"prepare": "npm run build"
|
|
13
|
+
},
|
|
14
|
+
"keywords": [
|
|
15
|
+
"react",
|
|
16
|
+
"typescript"
|
|
17
|
+
],
|
|
18
|
+
"author": "Nyingi Maina",
|
|
19
|
+
"license": "MIT",
|
|
20
|
+
"peerDependencies": {
|
|
21
|
+
"react": ">=18.2.0",
|
|
22
|
+
"react-dom": ">=18.2.0",
|
|
23
|
+
"typescript": ">=3.7.0"
|
|
24
|
+
},
|
|
25
|
+
"devDependencies": {
|
|
26
|
+
"@rollup/plugin-commonjs": "^25.0.7",
|
|
27
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
28
|
+
"@rollup/plugin-typescript": "^11.1.5",
|
|
29
|
+
"@size-limit/preset-small-lib": "^10.0.1",
|
|
30
|
+
"@testing-library/react": "^14.0.0",
|
|
31
|
+
"@types/react": "^18.2.33",
|
|
32
|
+
"@types/react-dom": "^18.2.14",
|
|
33
|
+
"@typescript-eslint/eslint-plugin": "^6.9.1",
|
|
34
|
+
"@typescript-eslint/parser": "^6.9.1",
|
|
35
|
+
"eslint": "^8.52.0",
|
|
36
|
+
"eslint-config-prettier": "^9.0.0",
|
|
37
|
+
"eslint-plugin-prettier": "^5.0.1",
|
|
38
|
+
"eslint-plugin-react": "^7.33.2",
|
|
39
|
+
"identity-obj-proxy": "^3.0.0",
|
|
40
|
+
"npm": "^10.2.2",
|
|
41
|
+
"postcss": "^8.4.31",
|
|
42
|
+
"prettier": "^3.0.3",
|
|
43
|
+
"react": "^18.2.0",
|
|
44
|
+
"react-dom": "^18.2.0",
|
|
45
|
+
"rollup": "^4.2.0",
|
|
46
|
+
"rollup-plugin-copy": "^3.5.0",
|
|
47
|
+
"rollup-plugin-delete": "^2.0.0",
|
|
48
|
+
"rollup-plugin-generate-package-json": "^3.2.0",
|
|
49
|
+
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
50
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
51
|
+
"size-limit": "^10.0.1",
|
|
52
|
+
"typescript": "^5.2.2"
|
|
53
|
+
},
|
|
54
|
+
"dependencies": {
|
|
55
|
+
"@rollup/plugin-terser": "^0.4.4",
|
|
56
|
+
"tslib": "^2.6.2"
|
|
57
|
+
}
|
|
58
|
+
}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
-
export default interface IFooterColumnDefinition {
|
|
4
|
-
colSpan: number;
|
|
5
|
-
cellRenderer: () => ReactNode;
|
|
6
|
-
/**
|
|
7
|
-
* An optional, explicit label for the footer cell, especially for mobile view.
|
|
8
|
-
* If not provided, the table could try to infer it from the corresponding column.
|
|
9
|
-
*/
|
|
10
|
-
displayLabel?: ReactNode;
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* An optional click handler for the footer cell.
|
|
14
|
-
*/
|
|
15
|
-
onCellClick?: () => void;
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* Optional class name for custom styling of the footer cell.
|
|
19
|
-
*/
|
|
20
|
-
className?: string;
|
|
21
|
-
}
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
export default interface IFooterColumnDefinition {
|
|
4
|
+
colSpan: number;
|
|
5
|
+
cellRenderer: () => ReactNode;
|
|
6
|
+
/**
|
|
7
|
+
* An optional, explicit label for the footer cell, especially for mobile view.
|
|
8
|
+
* If not provided, the table could try to infer it from the corresponding column.
|
|
9
|
+
*/
|
|
10
|
+
displayLabel?: ReactNode;
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* An optional click handler for the footer cell.
|
|
14
|
+
*/
|
|
15
|
+
onCellClick?: () => void;
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Optional class name for custom styling of the footer cell.
|
|
19
|
+
*/
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
:root {
|
|
3
3
|
--table-border-color: #e0e0e0;
|
|
4
4
|
--table-header-bg: #f8f9fa;
|
|
5
|
-
--table-row-hover-bg: #
|
|
6
|
-
--table-row-stripe-bg: #
|
|
5
|
+
--table-row-hover-bg: #e9ecef;
|
|
6
|
+
--table-row-stripe-bg: #f2f2f2;
|
|
7
7
|
--card-bg: #ffffff;
|
|
8
8
|
--card-border-color: #e0e0e0;
|
|
9
9
|
--card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|