cs_table

Tabela de dados CarmenSteffens

Instalação

npm install --save @carmensteffens/cs_table

Como usar

//Comece importando a tabela, a função de dados e o css.
import { Table, sendInfo } from '@carmensteffens/cs_table/dist/index.js'
import '@carmensteffens/cs_table/dist/index.css'

const MinhaTabela = props => {
  // A tabela espera os dados neste formato para serem renderizados
  const DadosDaTabela={
    tableHeaders: [
        'Cabeçalho1', 'Cabeçalho2', 'Cabeçalho3',
      ],
      tableContent: [
        ['Célula1', 'Célula2', 'Célula3'],
        ['Célula4', 'Célula5', 'Célula6']
      ]}

  return(
  //Note que o componente "Table" sempre ocupará 100% do tamanho do seu componente pai.
    <Table tableData={DadosDaTabela} />
  )
  
}

export default MinhaTabela

Usando a função "sendInfo" para pegar os dados selecionados

//Comece importando a tabela, a função de dados e o css.
import { Table, sendInfo } from '@carmensteffens/cs_table/dist/index.js'
import '@carmensteffens/cs_table/dist/index.css'

const MinhaTabela = props => {
  // A tabela espera os dados neste formato para serem renderizados
  const DadosDaTabela={
    tableHeaders: [
        'Cabeçalho1', 'Cabeçalho2', 'Cabeçalho3',
      ],
      tableContent: [
        ['Célula1', 'Célula2', 'Célula3'],
        ['Célula4', 'Célula5', 'Célula6']
      ]}

  return(
    // Ao chamar a função, passe cabeçalhos,dados como parâmetro
    // O retorno da função será um array com os dados marcados pela checkbox.
    <div>
      <button onClick={()=> sendInfo(DadosDaTabela.tableHeaders,DadosDaTabela.tableContent) }> Enviar Datados </button>
      <Table tableData={DadosDaTabela} />
    </div>
   
  )
  
}

export default MinhaTabela

Pronto! agora você ja tem sua tabela de dados!

MIT © CarmenSteffens