---
name: MagaTable
route: /components/maga-table
menu: Components ⚡️
---

import { Playground, Props } from "docz";
import {
  COLUMNS_MASTER,
  COLUMNS_MASTER_2,
  COLUMNS_DETAIL,
  DATA,
} from "../mock";
import MagaTable from "../index.tsx";
import "../styles/index.css";
import "../components/Pagination/styles/index.css";
import "semantic-ui-css-magalu/semantic.min.css";

# MagaTable

Tabela padrão capaz de receber como prop um array para renderizar as colunas da tabela e seus respectivos dados.

    import { MagaTable } from "maga-components"

    <MagaTable columns={COLUMNS_MASTER} data={DATA} />

## Props

<Props of={MagaTable} />

## Uso básico

<Playground>
  <MagaTable columns={COLUMNS_MASTER} data={DATA} />
</Playground>

## Mestre detalhe

<Playground>
  <MagaTable
    columns={COLUMNS_MASTER}
    data={DATA}
    visibleColumns={true}
    exportTable={{
      columns: [COLUMNS_MASTER, COLUMNS_DETAIL],
      flatData: DATA,
      detailsKeys: ["subcategories"],
      mode: "structured",
      files: [
        {
          type: "xls",
          name: "lista_mestre_detalhe",
        },
      ],
    }}
    SubComponent={(row) => {
      return (
        <div className="container-detail">
          <MagaTable
            data={row.original.subcategories}
            defaultPageSize={5}
            noDataText="Nenhuma subcategoria encontrada"
            columns={COLUMNS_DETAIL}
            showPagination={true}
          />
        </div>
      );
    }}
  />
</Playground>

## Lista de seleção

<Playground>
  <MagaTable
    checkboxed
    selectedCheckbox={true}
    columns={COLUMNS_MASTER}
    data={DATA}
    getDataList={(data) => {
      // console.log(JSON.stringify(data));
    }}
    SubComponent={(row) => {
      return <div>teste</div>;
    }}
  />
</Playground>

## Botões de ação

<Playground>
  <MagaTable columns={COLUMNS_MASTER_2} data={DATA} visibleColumns />
</Playground>