feat: add table filter ref and example

[islxyqwe]

Added tableFilterRef prop for TableWalker.
Added a example for using tableFilterRef to export csv with filters.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
graphic-walker	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 9, 2024 7:38am

[github-actions]

Risk Level 2 - /home/runner/work/graphic-walker/graphic-walker/packages/graphic-walker/src/Table.tsx

The code changes in this pull request are relatively safe. The only change is the addition of a ref prop to the DatasetTable component. However, it's not clear from the provided context whether props.tableFilterRef is always defined. If it's possible for it to be undefined, this could potentially cause issues. To mitigate this, you could add a check to ensure that props.tableFilterRef is defined before passing it as a ref.

ref={props.tableFilterRef ? props.tableFilterRef : null}

This will ensure that null is passed as the ref if props.tableFilterRef is undefined, which is a safe value.

---

Risk Level 2 - /home/runner/work/graphic-walker/graphic-walker/packages/playground/src/examples/pages/table.stories.tsx

The code seems to be well written and follows the SOLID principles. However, there are a few areas that could be improved for better readability and maintainability:

1. Error Handling: There is no error handling in the downloadCSV function. If the computation function fails or returns an unexpected result, the application could crash or behave unexpectedly. Consider adding a try-catch block to handle any potential errors.

const downloadCSV = async () => {
  try {
    // existing code...
  } catch (error) {
    console.error('Failed to download CSV:', error);
  }
};

2. Code Comments: There are some comments in the code, but they could be more descriptive. For example, the comment // or use a remote computation service could be expanded to explain when and why a remote computation service might be used.

3. Magic Numbers: The pageSize prop in the TableWalker component is set to 50. This could be extracted to a constant at the top of the file to make it clear what this number represents and to make it easier to change in the future.

const PAGE_SIZE = 50;
// ...
<TableWalker tableFilterRef={tableRef} fields={fields} data={dataSource} appearance={theme} pageSize={PAGE_SIZE} vizThemeConfig=\"g2\" />

4. Hardcoded Strings: The filename Student.csv is hardcoded in the downloadCSV function. Consider making this a parameter or a constant, especially if this function could be used to download different types of data in the future.

const FILE_NAME = 'Student.csv';
// ...
a.download = FILE_NAME;

---

🔍📝🔧

---

Powered by Code Review GPT