score:0

Accepted answer

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:

enter image description here

Source of image: @atlaskit/dynamic-table docs


Related Query

More Query from same tag