Light Dark System

Data Table Column

<cw-data-table-column> | CwDataTableColumn
Since 1.2 experimental

Data table columns define the columns of a data table. 

<cw-data-table id="data-table-column-demo">
  <cw-data-table-column name="name" label="Name" sortable></cw-data-table-column>
  <cw-data-table-column name="role" label="Role"></cw-data-table-column>
</cw-data-table>

<script>
  const table = document.getElementById('data-table-column-demo');
  table.data = [
    { name: 'Ada Lovelace', role: 'Engineer' },
    { name: 'Grace Hopper', role: 'Admiral' }
  ];
</script>

import CwDataTable from '@cordwainer/cw-elements/dist/react/data-table';
import CwDataTableColumn from '@cordwainer/cw-elements/dist/react/data-table-column';

const data = [
  { name: 'Ada Lovelace', role: 'Engineer' },
  { name: 'Grace Hopper', role: 'Admiral' }
];

const App = () => (
  <CwDataTable data={data}>
    <CwDataTableColumn name="name" label="Name" sortable />
    <CwDataTableColumn name="role" label="Role" />
  </CwDataTable>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.6.0/cdn/components/data-table-column/data-table-column.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.6.0/cdn/components/data-table-column/data-table-column.js';

To import this component using a bundler:

import '@cordwainer/cw-elements/dist/components/data-table-column/data-table-column.js';

To import this component as a React component:

import CwDataTableColumn from '@cordwainer/cw-elements/dist/react/data-table-column';

Slots

Name Description
(default) This element has no rendered output; it is a configuration element only.

Learn more about using slots.

Properties

Name Description Reflects Type Default
name The key in each row data object that this column displays. Required. string ''
label The column header label. Falls back to name if not set. string ''
sortable Makes the column header clickable for sorting. boolean false
width A CSS width value for this column, e.g. “200px” or “20%”. string ''
minWidth
min-width 		A CSS min-width value for this column. string ''
align Alignment of cell content within the column. 'start' | 'center' | 'end' 'start'
hidden Hides the column without removing it from the DOM. boolean false
renderCell A custom cell renderer. Called once per row with the cell value, the full row object, and this column element. Return a Lit TemplateResult or a plain string. - -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.