feat(generics): add a new performant resizable table

[vikrantgupta25]

Summary

• added a generic column resizable performant table based on react-table

Related Issues / PR's

contributes to - #6132

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to 00647eb in 1 minute and 30 seconds

More details

• Looked at 235 lines of code in 3 files
• Skipped 1 files when reviewing.
• Skipped posting 5 drafted comments based on config settings.

1. frontend/src/components/PerformantColumnResizingTable/PerformantColumnResizingTable.tsx:27

• Draft comment:
  Avoid using any in cell.renderValue<any>(). Consider using a more specific type for better type safety.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The use of any in cell.renderValue<any>() can be avoided by using a more specific type. This will improve type safety and maintainability of the code.

2. frontend/src/components/PerformantColumnResizingTable/PerformantColumnResizingTable.tsx:81

• Draft comment:
  Avoid using non-null assertions like ! in headers[i]!. Consider handling potential null or undefined values explicitly.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The use of ! in headers[i]! indicates a non-null assertion. It's better to handle potential null or undefined values explicitly to avoid runtime errors.

3. frontend/src/components/PerformantColumnResizingTable/PerformantColumnResizingTable.tsx:68

• Draft comment:
  Ensure debugTable, debugHeaders, and debugColumns are disabled in production to avoid unnecessary console output.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The debugTable, debugHeaders, and debugColumns options are set to true, which might be intended for development purposes. Ensure these are disabled in production to avoid unnecessary console output.

4. frontend/src/components/PerformantColumnResizingTable/PerformantColumnResizingTable.styles.scss:57

• Draft comment:
  Consider adding a CSS transition for opacity in the .resizer class to enhance user experience during hover.
• Reason this comment was not posted:
  Confidence changes required: 33%
  The opacity transition for the .resizer class could be smoother with a CSS transition, enhancing user experience during hover.

5. frontend/src/components/PerformantColumnResizingTable/PerformantColumnResizingTable.tsx:24

• Draft comment:
  Avoid using inline styles. Consider using CSS classes or styled components instead. This applies to other inline styles in this file as well.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  This is a special case where inline styles are actually appropriate. The widths need to be dynamically calculated and set using CSS variables, which is a performance optimization explained in the code comments. Moving these to CSS classes wouldn't make sense since the values are computed at runtime. The component already uses CSS classes for static styling (see the imported .scss file and className usage).
  Maybe there's a way to handle dynamic widths using CSS custom properties defined at a higher level? Could styled-components handle this use case more elegantly?
  While there might be alternative approaches, the current implementation is a valid and performant solution. The inline styles are used appropriately for dynamic values, while static styles are properly maintained in an external stylesheet.
  The comment should be deleted as it's suggesting a change that would not improve the code. The inline styles here are being used appropriately for dynamic values that can't be predetermined in a stylesheet.

Workflow ID: wflow_6zypLG6zT8UVX5NG

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

❌ Changes requested. Incremental review on 42e0361 in 42 seconds

More details

• Looked at 124 lines of code in 2 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. frontend/src/components/TableV3/TableV3.tsx:55

• Draft comment:
  Set debugTable, debugHeaders, and debugColumns to false or remove them in production to avoid unnecessary console output.
• Reason this comment was not posted:
  Comment was not on a valid diff hunk.

2. frontend/src/components/TableV3/TableV3.tsx:23

• Draft comment:
  Avoid using inline styles. Consider using CSS classes or styled components instead. This applies to other inline styles in this file as well.
• Reason this comment was not posted:
  Comment was on unchanged code.

3. frontend/src/components/TableV3/TableV3.styles.scss:2

• Draft comment:
  Use design tokens or predefined color constants instead of hardcoding color values like 'lightgray' and 'blue'. This applies to other color values in this file as well.
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_jAz0e88UHUwjbEcy

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.