Styles

Overview

Appuyez sur @ pour sélectionner une colonne

Hello

World !

import React from 'react';
import classes from './styles.module.scss';

const config = {
  alwaysInEdition: true,
  hasFooter: true,
  styles: {
    header: {
      container: () => {
        return { classes: classes.customHeader };
      },
      cell: ({ columnIndex }) => {
        const style = {};
        if (columnIndex === 0) {
          style.background = 'gold';
        }
        return { style, classes: classes.customHeaderCell };
      }
    },
    body: {
      container: () => {
        return { classes: classes.customBody };
      },
      row: ({ rowData, rowIndex }) => {
        if (rowData.one === 'B') {
          return {
            classes: [classes.customBodyRow, 'important']
          };
        } else if (rowData.one === 'C') {
          return {
            classes: [classes.customBodyRow, 'warning']
          };
        }
        return {
          classes: classes.customBodyRow,
          style: rowIndex === 2 ? { backgroundColor: '#FFAAAA' } : undefined
        };
      },
      cell: ({ key }) => {
        return {
          style: {
            backgroundColor: key === 'two' ? 'rgba(255,0,0,.8)' : null
          }
        };
      }
    },
    footer: {
      container: () => {
        return { style: { background: 'none' } };
      },
      cell: ({ columnIndex, key }) => {
        console.log(columnIndex);
        const style = {};
        if (key === 'three') {
          return {
            style: {
              border: `2px solid blue`,
              boxSizing: 'border-box',
              marginTop: '1px',
              background: '#fafafa'
            }
          };
        }
        if (columnIndex === 0) {
          style.background = 'gold';
          style.height = '100%';
        }
        return { style, classes: classes.customFooterCell };
      }
    }
  },
  columns: [
    {
      key: 'one',
      header: 'Col 1',
      size: 1
    },
    {
      key: 'two',
      header: 'Col 5',
      size: 1
    },
    {
      key: 'three',
      header: 'Col 3',
      size: 1,
      footerProps: {
        colspan: 2
      },
      footerValue: () => (
        <div>
          <div>Hello</div>
          <div>World !</div>
        </div>
      )
    },
    {
      key: 'four',
      header: 'Col 4',
      size: 1
    }
  ]
};

export default config;

Config

const config = {
  styles: {
    header: HeaderStyle,
    body: BodyStyle,
    footer: FooterStyle
  },
  columns: [...]
}

interface StyleResponse {
  classes?: object|object[];
  style?: object;
}

interface HeaderStyle {
  container?: (): StyleResponse;
  cell?: ({ columnIndex: number, key: string }): StyleResponse;
}

interface BodyStyle {
  container?: (): StyleResponse;
  row?: ({ rowData: object, rowIndex: number }): StyleResponse;
  cell?: ({ columnIndex: number, key: string, rowData: object, rowIndex: number }): StyleResponse;
}

interface FooterStyle {
  container?: (): StyleResponse;
  cell?: ({ columnIndex: number, key: string }): StyleResponse;
}

Overview​

Config​

Overview

Config