Null datetimes show as NaN, 0NaN NaN:NaN and null dates show as NaN, 0NaN:

I believe it's because of parseDatetimeString returning the literal string "Invalid Date", which then gets formatted by formatDate as the above. Will post a PR shortly!

I encountered a few issues that I wanted to share in case useful. I'm currently only playing with the library so not necessary to fix!

In the sandbox, https://codesandbox.io/s/dazzling-cray-bjmjs, hovering the sticky column seems to highlight a different row in the rest of the table.

Switching between pinning the first and second column seems to shuffle the contents of the first two column. This might be related to previous item.

I tried using the component inside another tailwind project nested inside a div that also has a group class name which causes hover elements to show up too aggressively. Could call this a usage issue :)

Flat UI only displays 9 and a half rows in a fixed 560px table view and each data cell sets 40px height via inline styles.

It would be more aesthetically pleasing to have shorter table data rows in applications with limited viewports, such as VSCode notebooks and their cell outputs.

I was able to overwrite some of those CSS rules, but I can't find how to remove the extra spaces between data rows:

See more info in our data table renderers: RandomFractals/vscode-data-table#138

In general, I think it would be best to remove some of those inline div styles and add more custom classes for the table rows and cells.

The loading indicator (Loader component) takes the full width of the Grid in Firefox, which results in a pretty bad UX when the Grid is loading.

Running into a small issue where Ethereum addresses like 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045 are recognized as numbers and get formatted like,

Currently, it contains the link to this page: https://effective-happiness-90fa209e.pages.github.io/ which seems to response with 404

When hosted in smaller spaces (or for user preference), it would be good if we could enable / disable:

• Footer
• Column Stats

Both string cells and long value previews inject stringWithLinks via dangerouslySetInnerHTML. However stringWithLinks is created by passing raw input through anchorme, which doesn't sanitize HTML as per alexcorvi/anchorme.js#54 .

Repro: https://flatgithub.com/danzvara/csv-xss?filename=kokos.csv&sha=9caf159937ecb7a87bd896da2e70e4e86ef3da1e

I would suggest sandboxing the string outputs in an iframe (or perhaps choosing a sanitization library to make stringWithLinks safe).

Latest version of this data grid displays the number of data rows in a grid footer.

I think it would be valuable to see the number of columns there too, similar to how most data frame libraries display them now.

Example of df.head table display:

Also, I was able to integrate it into VSCode Data Table renders extension and plan to ship that update soon.

I hope this addition will improve datasets preview in VSCode Jupyter notebooks. Example:

Extension: https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-table

Hey all,

Really fantastic package you have!

I recently tried to use this package, and faced one small issue: the tailwind applys from index.css also applied to our whole site. The one I noticed most was body { @apply bg-gray-200;}, because we have no default background color set on the site. Of course this particular one was an easy fix, but the rest are maybe less obvious.

Is there a way to avoid this or an easy way to mitigate?

I'm not very advanced at CSS or Tailwind, so perhaps there's a trivial way to do this - if so, apologies for the hassle!

Apache Arrow support a row iterator but not .map. It would be great if you could add explicit support for Apache Arrow as an efficient format for tabular data.

Here is a small example that doesn't work right now.

const int32_vector = arrow.Int32Vector.from([1,2,3]);
const my_table = arrow.Table.new(
  arrow.Column.new('column', int32_vector))

export default function App() {
  return <Grid data={my_table} />;
}

It would be great if you could multiselect values on category fields. Currently you can only select one category to filter on.

Any interest in this? I don't mind taking a crack at it.

Thanks for this awesome library! I noticed that defaultStickyColumnName was not being respected when testing it out.

Here's a codesandbox repro https://codesandbox.io/s/dazzling-cray-bjmjs

It seems like columnNames is updated after handleStickyColumnNameChange

which causes the issue in this logic

When calculating diffs, handleDiffDataChange() in src/store would identify a field whose number of unique values is equal to the number of data fields. The id field is assumed to be one such column... if its sort value type is a string:

This does not work so well when used in tandem with handleDataChange(), which generates a schema, and would coerce numeric strings into numbers. For id fields whose values are numeric strings, each identifier gets coerced into a number, which then gets ignored by handleDiffDataChange() based on the abovementioned criterion.

Because the most unique column is used as a key in diffDataMap, this in turn influences how diffs are generated.

An example of this can be found here. As id is a numeric string, the contact field is used instead, but since contact is an object type, it serves as a poor key for diffDataMap, resulting in the diffs being inaccurate in the grid.

This issue hence proposes that the id field is simply assumed to be an unique column regardless of its sort value type, or at least, if its sort value type is a string or a number. Alternatively, generateSchema() could be modified such that the data type for id remains unchanged.

When using the DOMPurify library to sanitize HTML from malicious code here, the library doesn't sanitize CSS style tags. These can be used to change the website's appearance and possibly to pull off clickjacking attacks. - https://portswigger.net/web-security/clickjacking

PoC: https://flatgithub.com/makuga01/csv-test?filename=css.csv&sha=9cfecff99206e7a11716d14b48a2edb9c16ce0c1

I suggest adding using a DOMPurify config like this one:

const dompurifyConfig = {
  FORBID_TAGS: ['style', 'form'],
}
const sanitized = DOMPurify.sanitize(displayValue, dompurifyConfig);

I also added HTML forms to the forbidden tags as they can be used for creating a fake login screen

E.g. using this example data: https://flatgithub.com/the-pudding/data?filename=boybands%2Fboys.csv&sha=9b4e89ed178e11bf70a9b3d8ffa57ac2ea181b96

In Firefox and Chrome, this works well: the body scrolls while the header stays in place:

However in Safari, the header scrolls away too:

I seem to recall having a somewhat similar issue previously with my own code, with flex acting differently in Safari, however the details don't come directly to mind. I can try at least to have a quick look to see what's causing it here!

I'm on macOS Big Sur 11.3.1, Safari 14.1.

Thanks!