githubocto / flat-ui Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
Currently, it contains the link to this page: https://effective-happiness-90fa209e.pages.github.io/ which seems to response with 404
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.
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.
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
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
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 .
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
When hosted in smaller spaces (or for user preference), it would be good if we could enable / disable:
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
flat-ui/src/components/grid.tsx
Lines 168 to 171 in 07b88ec
flat-ui/src/components/grid.tsx
Line 183 in 07b88ec
which causes the issue in this logic
Lines 86 to 90 in 07b88ec
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 :)
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:
Line 138 in b9cebd6
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.
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!
Hey all,
Really fantastic package you have!
I recently tried to use this package, and faced one small issue: the tailwind apply
s 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} />;
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.