Comments (1)
We primarily recommend developers to use the following approaches:
- The
tableStyle
property can be set withwidth
andmaxWidth
properties that use%
/vh
/vw
metrics that will automatically react to the parent dimensions. Make sure to also check out thepreserveNarrowColumns
property that defines the rule for preserving columns which exceed the minimum markup width. - The
cellStyle
property can be set withfontSize
that usesem
/rem
metrics which can help adjust the cell font size to the desired one.
A non reactive - but effective approach is to pre-compute the styling properties before passing them to the table, which enables the parent app to use any means of calculating the best values.
If you want to use media queries
, they can be add to the component via the auxiliaryStyle
property. (However, we do not recommend this approach as it may intervene with other styling properties and may result in undesirable styling) e.g:
auxiliaryStyle = `
@media (max-width: 600px) {
.cell {
font-size: 10px;
height: 38px;
}
}
`
If you have questions about reactive styling or suggestions for improvements, do not hesitate to add them in this thread or open up a new GitHub issue. Thanks!
from active-table.
Related Issues (20)
- Cannot get basic example running HOT 12
- Using active-table in a Flask app HOT 3
- CSV import doesn't support escaped commas HOT 1
- JS table data not captured HOT 1
- Cannot find module error while compiling HOT 6
- how to sponsor HOT 2
- Embedding custom HTML inside table cells HOT 2
- Provide display options for columnType HOT 6
- not explaining the usage process HOT 4
- 'cell-update' event seems to return wrong details
- navigator is not defined when using with NextJs HOT 5
- Table becomes laggy when displaying a long table HOT 1
- ERROR: ResizeObserver loop completed with undelivered notifications.
- Restoring table with column types HOT 5
- CSV export is missing formatting options to be useful
- Improvement Suggestion: Change Cursor Type for Non-Editable Select Cells
- Custom buttons
- Data and display issues HOT 1
- Feature request: Range Selection and Copy Paste
- Component not loading inside Shadow DOM. Throws: Cannot read properties of null (reading 'offsetWidth')
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from active-table.