score:0
Well cells don't take a fontSize prop. Thats why its not working for you.
But you can use styled-components
to adjust the styling of the table. Check out the example below.
import React from 'react';
import styled from 'styled-components';
import DynamicTable from '@atlaskit/dynamic-table';
import { caption, head, rows } from './design-system/dynamic-table/examples/content/sample-data';
const Wrapper = styled.div`
min-width: 600px;
td{font-size:30px}
`;
// eslint-disable-next-line import/no-anonymous-default-export
export default class extends React.Component<{}, {}> {
render() {
return (
<Wrapper>
<DynamicTable
caption={caption}
head={head}
rows={rows}
rowsPerPage={5}
defaultPage={1}
isFixedSize
defaultSortKey="term"
defaultSortOrder="ASC"
onSort={() => console.log('onSort')}
onSetPage={() => console.log('onSetPage')}
/>
</Wrapper>
);
}
}
The styled div Wrapper
has taken a width attribute, but we can also nest styling attributes for elements inside of Wrapper
. I've added font-size
styling for the td
tags.
Check out the code on CodeSandbox, add the td{font-size:30px}
where I added it to see its effects. You can style whatever you want within the Wrapper
, just make sure to add the correct classes / tags / id's.
And check out the props that cells can actually take:
Source of image: @atlaskit/dynamic-table docs
Source: stackoverflow.com
Related Query
- Change font size of dynamic table header using react
- How can I change font size of pagination part in material table using react js?
- Using different font size in each row in antd react table
- Changing font size with respect to the change in screen resolution using styled-components in react
- Change Button Font Size on React Native
- React table dynamic page size but with size limit and pagination
- React Material-Ui Sticky Table Header with Dynamic Height
- Change React Material-UI DataGrid (table) Default Font Size
- Using nth-child css on dynamic React table
- How to change the selected table row background using Material-UI on React
- How to change default sorting icon on table header column on React Material-Table?
- Material table for react font size is way too small
- is there a way to add a <label></label> to every column header using Material Table React
- How to change Header and footer of a specific webpage while using react route
- How can I change the font size for a <h1> in react bootstrap col?
- How to individually change text color and font weight in the same div element using Tailwind CSS and React
- inovua react data grid- change default font size
- Dynamic Table in react using material ui
- React table - dynamic group header
- Change font size of placeholder in REACT
- Change Tile Size of Mapbox Tiles using React Leaflet
- Can I render a column header that contains a string & an imported component when using React Table library?
- Can't change state in Material Table header when using remote data
- Cloudinary responsive images only displaying on window size change in React using Webpack
- How To change Font size of element in dark mode in MUI React Framework?
- How to create dynamic Header from API React table
- Change column header name dynamically in React Table
- how to change react-mathjax-preview font size and font in REACT JS?
- React Responsive Carousel how to change text font size shown in top right corner of image?
- Can't update the font size in react using tailwindcss library
More Query from same tag
- Getting Values from comparing Two Arrays
- Display Object details with React
- Is it a bad or good useMemo to memorize and return filtred array?
- How to automatically add hyphen on the state textbox when onchange handler detect on length 4 using javascript
- React material-ui TextField, the input is white
- react-datetime dropdown has missing styles(css)
- How to set the next/image component to 100% height
- React overwrite component function
- Make fabric.js objects render in a specific layer order
- How do you get Material-UI Drawer to highlight the page it is currently at?
- Changing font family of all MUI components
- React JS props not working .. Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null
- Data is not rendered when changing pages with react router
- ReactJS - use localStorage as a dependency for useEffect causes infinite loop
- Redux Toolkit: 'Cannot perform 'set' on a proxy that has been revoked'
- Redux reducers as pure functions
- React is not pushing items in array
- Access methods coming from props inside map function
- How to set type of variable on useState using typescript?
- can't import dynamic value inside curly braces - Zero to Mastery React
- add red cross delete functionality onhover in react
- react.js set default route
- State set method did not effect the main object - ReactJS
- Iterate through JSON Object to get all objects with property
- Getting dimensions of all children elements
- Change button style on press in React Native
- Can I use nodemailer in browser?
- React Not returning Child from map loop when creating SVG from JSON object
- Setting iframe height to scrollHeight in GatsbyJS
- DraftJS React-Hook-Form - submitting Editor as input