CTable

A tabela é usada para a exibição de dados e algumas ações, disponibiliza componentes customizados que por debaixo dos panos renderizam tags de uma tabela no html para o browser afim de atender a semântica.

import { CTable, CTableRow, CTableHead, CTableData } from '@estrategiahq/coruja-web-ui';

O que são esses componentes?

• CTable representa a tabela, pode conter linhas do corpo (padrão) ou do cabeçalho (slot #head).
• CTableRow representa uma linha da tabela, pode conter células de cabeçalho ou de dados.
• CTableHead representa uma célula de cabeçalho, deve estar dentro de CTableRow.
• CTableData representa uma célula de dados, deve estar dentro de CTableRow.

Veja mais detalhes abaixo:

Exemplos

API

Exemplo simples

Name	Job	Team
John	Lead Software Engineer	Kamikazi

<c-table> <template slot="head"> <c-table-row> <c-table-head> Name </c-table-head> <c-table-head> Job </c-table-head> <c-table-head> Team </c-table-head> </c-table-row> </template> <c-table-row> <c-table-data> John </c-table-data> <c-table-data> Lead Software Engineer </c-table-data> <c-table-data> Kamikazi </c-table-data> </c-table-row> </c-table>

<c-table>
  <template slot="head">
    <c-table-row>
      <c-table-head>
        Name
      </c-table-head>
      <c-table-head>
        Job
      </c-table-head>
      <c-table-head>
        Team
      </c-table-head>
    </c-table-row>
  </template>
  <c-table-row>
    <c-table-data>
      John
    </c-table-data>
    <c-table-data>
      Lead Software Engineer
    </c-table-data>
    <c-table-data>
      Kamikazi
    </c-table-data>
  </c-table-row>
</c-table>

CTable com bordas

Name	Job	Team
John	Lead Software Engineer	Kamikazi

<c-table bordered> <template slot="head"> <c-table-row> <c-table-head> Name </c-table-head> <c-table-head> Job </c-table-head> <c-table-head> Team </c-table-head> </c-table-row> </template> <c-table-row> <c-table-data> John </c-table-data> <c-table-data> Lead Software Engineer </c-table-data> <c-table-data> Kamikazi </c-table-data> </c-table-row> </c-table>

<c-table bordered>
  <template slot="head">
    <c-table-row>
      <c-table-head>
        Name
      </c-table-head>
      <c-table-head>
        Job
      </c-table-head>
      <c-table-head>
        Team
      </c-table-head>
    </c-table-row>
  </template>
  <c-table-row>
    <c-table-data>
      John
    </c-table-data>
    <c-table-data>
      Lead Software Engineer
    </c-table-data>
    <c-table-data>
      Kamikazi
    </c-table-data>
  </c-table-row>
</c-table>

CTable striped

Name	Job	Team
Jane	Software Engineer	Kamikazi
John	Software Engineer	Kamikazi

<c-table striped> <template slot="head"> <c-table-row> <c-table-head> Name </c-table-head> <c-table-head> Job </c-table-head> <c-table-head> Team </c-table-head> </c-table-row> </template> <c-table-row> <c-table-data> Jane </c-table-data> <c-table-data> Software Engineer </c-table-data> <c-table-data> Kamikazi </c-table-data> </c-table-row> <c-table-row> <c-table-data> John </c-table-data> <c-table-data> Software Engineer </c-table-data> <c-table-data> Kamikazi </c-table-data> </c-table-row> </c-table>

<c-table striped>
  <template slot="head">
    <c-table-row>
      <c-table-head>
        Name
      </c-table-head>
      <c-table-head>
        Job
      </c-table-head>
      <c-table-head>
        Team
      </c-table-head>
    </c-table-row>
  </template>
  <c-table-row>
    <c-table-data>
      Jane
    </c-table-data>
    <c-table-data>
      Software Engineer
    </c-table-data>
    <c-table-data>
      Kamikazi
    </c-table-data>
  </c-table-row>
   <c-table-row>
    <c-table-data>
      John
    </c-table-data>
    <c-table-data>
      Software Engineer
    </c-table-data>
    <c-table-data>
      Kamikazi
    </c-table-data>
  </c-table-row>
</c-table>

CTable com ordenação de coluna

Quando CTableHead tiver a prop "is-sortable", exibirá o ícone de ordenção, que quando clicado, emite o evento "change-order". A prop "direction" referencia o estado da ordenação.

Name	Job	Team
John Snow	Lead Software Engineer	kamikazi
Mariah Carey	QA Engineer	kwai records
Evelyn Sanchez	Software Engineer	kamikazi
Joseph Kwaii	Software Engineer	dino rec

<template> <c-table bordered> <template slot="head"> <c-table-row> <c-table-head is-sortable :direction="sortDirection" @change-order="sortBy('name')" > Name </c-table-head> <c-table-head> Job </c-table-head> <c-table-head> Team </c-table-head> </c-table-row> </template> <c-table-row v-for="person in team" :key="person.name"> <c-table-data> {{person.name}} </c-table-data> <c-table-data> {{person.job}} </c-table-data> <c-table-data> {{person.team}} </c-table-data> </c-table-row> </c-table> </template> <script> const team = [ { name: 'John Snow', job: 'Lead Software Engineer', team: 'kamikazi' }, { name: 'Mariah Carey', job: 'QA Engineer', team: 'kwai records' }, { name: 'Evelyn Sanchez', job: 'Software Engineer', team: 'kamikazi' }, { name: 'Joseph Kwaii', job: 'Software Engineer', team: 'dino rec' } ] export default{ data(){ return { team, sortDirection:'', } }, methods: { sortBy(propName) { this.sortDirection = this.sortDirection === 'ASC' ? 'DESC' : 'ASC' const direction = this.sortDirection === 'ASC' ? 1 : -1 this.team = this.team.sort((a, b) => a[propName].localeCompare(b[propName]) * direction) }, } } </script>

<template>
  <c-table bordered>
    <template slot="head">
      <c-table-row>
        <c-table-head
          is-sortable
          :direction="sortDirection"
          @change-order="sortBy('name')"
        >
          Name
        </c-table-head>
        <c-table-head>
          Job
        </c-table-head>
        <c-table-head>
          Team
        </c-table-head>
      </c-table-row>
    </template>
    <c-table-row v-for="person in team" :key="person.name">
      <c-table-data>
        {{person.name}}
      </c-table-data>
      <c-table-data>
        {{person.job}}
      </c-table-data>
      <c-table-data>
        {{person.team}}
      </c-table-data>
    </c-table-row>
  </c-table>
</template>

<script>
const team = [
  {
    name: 'John Snow',
    job: 'Lead Software Engineer',
    team: 'kamikazi'
  },
  {
    name: 'Mariah Carey',
    job: 'QA Engineer',
    team: 'kwai records'
  },
  {
    name: 'Evelyn Sanchez',
    job: 'Software Engineer',
    team: 'kamikazi'
  },
  {
    name: 'Joseph Kwaii',
    job: 'Software Engineer',
    team: 'dino rec'
  }
]

export default{
  data(){
    return {
      team,
      sortDirection:'',
    }
  },
  methods: {
     sortBy(propName) {
       this.sortDirection = this.sortDirection === 'ASC' ? 'DESC' : 'ASC'
       const direction = this.sortDirection === 'ASC' ? 1 : -1
       this.team = this.team.sort((a, b) => a[propName].localeCompare(b[propName]) * direction)
    },
  }
}
</script>

CTable com checkbox

	Name	Job	Team
	John Snow	Lead Software Engineer	kamikazi
	Mariah Carey	QA Engineer	kamikazi
	Evelyn Sanchez	Software Engineer	kamikazi
	Joseph Kwaii	Software Engineer	kamikazi

<template> <c-table bordered striped> <template slot="head"> <c-table-row> <c-table-head width="100px"></c-table-head> <c-table-head> Name </c-table-head> <c-table-head> Job </c-table-head> <c-table-head> Team </c-table-head> </c-table-row> </template> <c-table-row v-for="(person, index) in team" :key="person.name" :active="person.isActive" > <c-table-head> <c-checkbox :checked="person.isActive" @change="checkItem(index)"/> </c-table-head> <c-table-data> {{person.name}} </c-table-data> <c-table-data> {{person.job}} </c-table-data> <c-table-data> {{person.team}} </c-table-data> </c-table-row> </c-table> </template> <script> const team = [ { name: 'John Snow', job: 'Lead Software Engineer', team: 'kamikazi', isActive: true }, { name: 'Mariah Carey', job: 'QA Engineer', team: 'kamikazi', isActive: false }, { name: 'Evelyn Sanchez', job: 'Software Engineer', team: 'kamikazi', isActive: false }, { name: 'Joseph Kwaii', job: 'Software Engineer', team: 'kamikazi', isActive: false } ] export default{ data(){ return { team } }, methods: { checkItem(index) { const allItems = [...this.team] allItems[index].isActive = !this.team[index].isActive this.team = allItems } } } </script>

<template>
  <c-table bordered striped>
    <template slot="head">
      <c-table-row>
        <c-table-head width="100px"></c-table-head>
        <c-table-head>
          Name
        </c-table-head>
        <c-table-head>
          Job
        </c-table-head>
        <c-table-head>
          Team
        </c-table-head>
      </c-table-row>
    </template>
    <c-table-row
      v-for="(person, index) in team"
      :key="person.name"
      :active="person.isActive"
    >
      <c-table-head>
        <c-checkbox :checked="person.isActive" @change="checkItem(index)"/>
      </c-table-head>
      <c-table-data>
        {{person.name}}
      </c-table-data>
      <c-table-data>
        {{person.job}}
      </c-table-data>
      <c-table-data>
        {{person.team}}
      </c-table-data>
    </c-table-row>
  </c-table>
</template>

<script>
const team = [
  {
    name: 'John Snow',
    job: 'Lead Software Engineer',
    team: 'kamikazi',
    isActive: true
  },
  {
    name: 'Mariah Carey',
    job: 'QA Engineer',
    team: 'kamikazi',
    isActive: false
  },
  {
    name: 'Evelyn Sanchez',
    job: 'Software Engineer',
    team: 'kamikazi',
    isActive: false
  },
  {
    name: 'Joseph Kwaii',
    job: 'Software Engineer',
    team: 'kamikazi',
    isActive: false
  }
]
export default{
  data(){
    return {
      team
    }
  },
  methods: {
    checkItem(index) {
      const allItems = [...this.team]
      allItems[index].isActive = !this.team[index].isActive
      this.team = allItems
    }
  }
}
</script>

CTable APIs

Veja abaixo as opções disponíveis para cada componente da tabela:

import { CTable, CTableRow, CTableHead, CTableData } from '@estrategiahq/coruja-web-ui';

CTable

Props

Nome	Tipo	Default	Descrição
striped	boolean	false	Habilita aparência listrada da tabela
bordered	boolean	false	Habilita bordas na tabela

Slots

Nome	Descrição
head	Recebe linhas (CTableRow) para o cabeçalho da tabela
default	Recebe linhas (CTableRow) para o corpo da tabela

---

CTableRow

Props

Nome	Tipo	Default	Descrição
active	boolean	false	Habilita estado "active" da linha

Slots

Nome	Descrição
default	Recebe células de cabeçalho (CTableHead) ou dados (CTableData)

---

CTableHead

Props

Nome	Tipo	Default	Descrição
align	string	left	Define o alinhamento do conteúdo da célula. Pode ser left, center ou right
is-sortable	boolean	false	Exibe controle de ordenação.
direction	string	''	Representa a direção da ordenação a ser representada pelo ícone. Pode ser 'ASC', 'DESC' ou ''.

Slots

Nome	Descrição
default	Recebe conteúdo para a célula.

Events

Evento	Descrição
change-order	Emitido quando o controle de ordenação é clicado

---

CTableData

Props

Nome	Tipo	Default	Descrição
align	string	left	Define o alinhamento do conteúdo da célula. Pode ser left, center ou right

Slots

Nome	Descrição
default	Recebe conteúdo para a célula.