Skip to main content

Table

Tables display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards.

Usage​

import React from 'react';
import { Table } from 'qdm-component-library';

function App() {
   const header = [
    {
      name: 'Id',
      field: 'id'
    },
    {
      name: 'Name',
      field: 'name'
    }
  ]
  const data = [
    {
      id: '1',
      name: 'Frances'
    },
    {
      id: '2',
      name: 'Eclair'
    }
  ]
  return ( 
        <Table
        data={data}
        header={header}
        showdata={2}
        paginationCount={[2, 5, 10]}
        />
   );
}
export default App;

Reference​

The array of Table header data. The element type is array.

data​

The array of Table rows of the data. The element type is array.

showdata​

By default it shows the number of rows present in the Table. The element type is number.

paginationCount​

The pagination count refers to how many rows you want in the Table. The element type is array.

If you want to search any data in the table set the boolean value as true.

edit​

If you want to edit any data in the table set the boolean value as true.

deleted​

If you want to delete any data in the table set the boolean value as true.

import React from 'react';
import { Table } from 'qdm-component-library';

function App() {
   const header = [
    {
      name: 'Id',
      field: 'id'
    },
    {
      name: 'Name',
      field: 'name'
    }
  ]
  const data = [
    {
      id: '1',
      name: 'Frances'
    },
    {
      id: '2',
      name: 'Eclair'
    }
  ]
  return ( 
        <Table
        data={data}
        header={header}
        edit={true}
        deleted={true}
        showdata={2}
        search={true}
        paginationCount={[2, 5, 10]}
        />
   );
}
export default App;

inLineStyles​

props give addition props to the Tab element type Object