Skip to main content

Data 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. Use sorter to make a column sortable. sorter can be a function of the type function(a, b) { ... } for sorting data locally.

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;

sortBy​

please use this sortBy when you need shorted datas, the sortBy element type fun

inLineStyles​

props give addition props to the inLineStyles element type Object