@eureca/eureca-ui/src/components/Table/stories/table.stories.mdx

UI component library of Eureca's user and admin apps

import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';
import { Box, ThemeProvider, Typography } from '@material-ui/core';

import MuiTheme from '../../../theme/mui';

import { Flex } from '../../Flex';
import { Table } from '../';
import { BasicTable, FixedColumnTable } from './table.stories.js';

<Meta title='Material/Table' component={Table} decorators={[withKnobs]}/>

<Title>Table</Title>

<Description>
  Tabela dos aplicativos Eureca, extendido da tabela padrão do `Material-UI`.
</Description>
<Description>
  Contém todas as props definidas no [Material-UI](https://material-ui.com/components/tables/#table) e tem estilo definido pelo tema desta biblioteca.
</Description>

<Preview>
  <Story name="Basic Table">
    <BasicTable />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| initialOrder | Ordem inicial dos items da tabela <br /> 'asc' \| 'desc' | 'asc' |
| initialOrderBy | Ordem inicial dada por alguma propriedade <br /> string | - |
| initialPage | Página inicial da tabela <br /> string | - |
| initialSelected | Array de IDs das linhas previamente selecionadas <br /> array | [ ] |
| totalRows | Total de linhas da tabela <br /> number | - |
| title | Título da tabela <br /> string | - |
| tableColumns | Array contendo as colunas da tabela <br /> array | - |
| tableContent | Array com o conteúdo que irá popular a tabela <br /> array | - |
| baseColumn | Coluna a se fixar na tabela <br /> string | - |
| checkboxes | Controla a exibição da coluna de checkboxes da tabela <br /> bool | true |
| extraColumns | number | - |
| rowHandler | Função associada ao clique de uma linha da tabela. Caso exista e seja uma função ao se clicar na linha o checkbox não será marcado, apenas essa função será executada. <br /> func | - |
| emptyTableText | Texto exibido quando a tabela não está populada <br /> string | - |
| selectedRows | Função que retorna as linhas selecionadas da tabela, um array de IDs <br /> func | - |
| onCheckRow | Função que controla o click do checkbox de uma linha. Recebe `id` da linha <br /> func | null |
| onCheckHeader | Função que controla o click do checkbox do header. Recebe estado do checkbox, `isSelected`. <br /> func | null |

<Subtitle>Colunas</Subtitle>

> O array com os dados das colunas deve possuir objetos com as chaves abaixo

|   Nome  |            Chave            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| id | ID da coluna <br /> string | - |
| skip | Usado para não exibir a coluna na tabela <br /> bool | false |
| disablePadding | Desabilita o padding interno da coluna <br /> bool | false |
| sortable | Página inicial da tabela <br /> string | true |
| label | Label da coluna no header da tabela <br /> string | - |
| style | Objeto de estilo para editar coluna <br /> object | - |
| sortFn | Função opcional de customização da ordenação de uma coluna <br /> func | - |

```jsx
const columns = [
  {
    id: 'id',
    skip: true,
  },
  {
    id: 'avatar',
    numeric: false,
    disablePadding: true,
    sortable: false,
    label: '',
    style: { width: 40 },
  },
  {
    id: 'email',
    numeric: false,
    disablePadding: false,
    label: 'Email',
  },
];
```

<Subtitle>Conteúdo</Subtitle>

> A tabela é populada com um array de objetos que contenham as chaves definidas no `id` das colunas.
Abaixo um exemplo de duas linhas populando as colunas definidas acima.

```jsx
const content = [
  {
    id: 1,
    avatar: avatar_src_1,
    email: 'test1@email.com'
  },
    {
    id: 2,
    avatar: avatar_src_2,
    email: 'test2@email.com'
  },
];
```

<Subtitle>Customização de Selecionados</Subtitle>

O controle de linhas selecionadas pode ser também feito externamente à tabela. Para isso basta passar as função `onCheckRow` e `onCheckHeader`. Caso essas funções não
existam a tabela utilizará seu controle interno.

Segue abaixo um exemplo de implementação dessas funções com um estado `selected`, que é passado à tabela pela prop `initialSelected`.

```jsx
const [selected, setSelected] = React.useState([]);

const handleCheckRow = (id) => {
  const selectedIndex = selected.indexOf(id);

  if (selectedIndex === -1) {
    setSelected([...selected, id]);
  } else {
    const newSelected = [...selected];
    newSelected.splice(selectedIndex, 1);
    setSelected(newSelected);
  }
};

const handleCheckHeader = (isSelected) => {
  if (isSelected) {
    const newSelecteds = basicContent.map(n => n.id);
    return setSelected(newSelecteds);
  }
  return setSelected([]);
};
```

<Subtitle>Exemplo de Aplicação</Subtitle>

```jsx
<Table
  initialSelected={selected}
  tableColumns={basicColumns}
  tableContent={basicContent}
  rowHandler={action('row-click')}
  selectedRows={(value) => setSelected(value)}
  emptyTableText="Nenhum candidato se inscreveu nessa oportunidade."
  checkboxes={checkboxes}
  onCheckRow={handleCheckRow}
  onCheckHeader={handleCheckHeader}
/>
```